、myService.html:

<!DOCTYPE HTML>
<html ng-app="app">
<head>
<title>自定义服务与后台数据交互</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/angular.js"></script>
<style>
.tip{background: #f2f2f2;border-radius: 6px;box-shadow: 2px 2px 4px #;width: 200px;height: auto;position: relative;top:-10px;padding: 10px;}
</style>
</head>
<body>
<div ng-controller="myServiceCtrl" ng-click="hideTip()">
<label>用户名</label>
<input type="text" ng-model="username" placeholder="请输入用户名..."/>
<div ng-show="showld" ng-class='{tip: showld}'>
<p ng-repeat="user in users">{{user.name}}</p>
</div>
</div>
<script src="myService.js"></script>
</body>
</html>
、myService.js:

var myModule = angular.module("app",[]);
myModule.service('userListService', ['$http', function($http){
var doRequest = function(username,path){
return $http({//底层其实还是$http的交互
method:'GET',
url:'data.json'
});
}
return{//一层一层的封装
userList:function(username){
return doRequest(username,'userList');
}
}
}]);
//上面封装的服务其实就是众多controller中与后台文件交互,得到数据的共同代码,提取出来单独封装在公共服务模块里,供后面的控制器直接调用而已
myModule.controller('myServiceCtrl', ['$scope','$timeout','userListService', //注入除作用域外的定时器对象和自定义的服务,注意:angular系统自带的都是带$符的,自定义的是不带$符的
function($scope,$timeout,userListService){
var timeout;//定义延迟变量
$scope.showld = false;
$scope.watch('username',function(newUserName){//监察username,一旦username发生变化,就执行后面的function()函数
if (newUserName) {//如果拿到新用户名,就用自定义服务中的方法进行处理
if (timeout) {//一旦timeout里面有定时器id
$timeout.cancel(timeout);//就清除已经生成过的定时器,cancel()相当于clearTimeOut()方法
}
timeout = $timeout(function(){
userListService.userList(newUserName)
.success(function(data,status){
$scope.users = data;
$scope.showld = true;
});
},);
};
});
$scope.hideTip = function(){//点击就隐藏提示框,注意不要放在控制器之外了,否则无效
$scope.showld = false;
}
}
]);

angluarJs与后台交互小案例的更多相关文章

  1. angluarJs与后台交互get

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  2. 微信小程序 与后台交互----获取服务器时间

    index.wxml代码 <!--index.wxml--> <view class="container"> <text>{{date}}&l ...

  3. 微信小程序 与后台交互----传递和回传时间

    wxml代码 <!--index.wxml--> <view class="container"> <view class="section ...

  4. 微信小程序实战,与后台交互

    index.wxml <view class="container"> <text>{{txt}}</text> <input name= ...

  5. 第七节:Vuejs路由交互及后台系统路由案例

    一. 简介 1.路由的概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源.那么url地址和真实的资源之间就有一种对应的关系 ...

  6. Vue.js小案例、生命周期函数及axios的使用

    一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...

  7. Extjs 4.2 Grid增删改及后台交互(Java)

    上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...

  8. ajax简单后台交互

    ajax简单后台交互 1,扯淡 单身的生活,大部分时间享受自由,小部分时间忍受寂寞. 生活有时候,其实蛮苦涩,让人难以下咽.那些用岁月积累起来的苦闷,无处宣泄,在自己的脑海里蔓延成一片片荆棘,让你每每 ...

  9. 如何用CropBox实现头像裁剪并与java后台交互

    如何用CropBox实现头像裁剪并与java后台交互 参考网站:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 参考: http://blo ...

随机推荐

  1. Scala语言简介和开发环境配置

    Scala语言的简介和开发环境搭建 Scala是一门结合了面向对象特征和函数式编程特征的语言,它是一个创新的编程语言产品.Scala可以做脚本(就像shell脚本一样),可以做服务端编程语言,可以写数 ...

  2. C#中查询字符串中是否包含指定字符/串,使用IndexOf还是Contains?

    C#中查询字符串中是否包含指定字符/串,使用IndexOf还是Contains?这是一个很常见的命题,以前也没有注意,今天QQ群里有人提起,于是就做了下试验,代码如下: using System; u ...

  3. 将.sql文件导入powerdesigner的实现方法详解

    将.sql文件导入powerdesigner的步骤是本文我们主要要介绍的内容,步骤如下: 第一步:将要导入的库的所有表的表结构(不要表数据,只要表结构)导出成一个.sql文件. 第二步:在powerd ...

  4. mysql数据库中插入表情4个字节的

    这个问题,原因是UTF-8编码有可能是两个.三个.四个字节.Emoji表情或者某些特殊字符是4个字节,而Mysql的utf8编码最多3个字节,所以数据插不进去. 我的解决方案是这样的 1.在mysql ...

  5. Android and iOS 判断是那个系统访问。

    <!-- 如果是安卓就加载. --> <neq name="Think.server.HTTP_USER_AGENT|strstr='Android'" valu ...

  6. 266. Palindrome Permutation 重新排列后是否对称

    [抄题]: Given a string, determine if a permutation of the string could form a palindrome. For example, ...

  7. 58. Length of Last Word最后一个单词的长度

    [抄题]: [暴力解法]: 时间分析: 空间分析: [优化后]: 时间分析: 空间分析: [奇葩输出条件]: [奇葩corner case]: "b a " 最后一位是空格,可能误 ...

  8. 如果你的资源贫乏,那么专注做好一件事将是你的唯一出路(no reading yet)

    http://www.jianshu.com/p/8784f0fd7ab8/comments/1161511

  9. Mybatis——逆向工程

    一.引入依赖 mybatis-generator-core-1.3.2.jar 二.基于XML的配置 <?xml version="1.0" encoding="U ...

  10. javascript高级程序设计读书笔记----函数表达式

    定义函数两种方式: 1.函数声明 function sayHi(){ alert("Hi"); } sayHi();//调用函数 2.函数表达式 var sayHi = funct ...