--@angularJS--自定义服务与后台数据交互小实例
1、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 #777;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>
2、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;
});
},350);
};
});
$scope.hideTip = function(){//点击就隐藏提示框，注意不要放在控制器之外了，否则无效
$scope.showld = false;
}
}
]);
--@angularJS--自定义服务与后台数据交互小实例的更多相关文章
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- --@angularJS--$http服务与后台数据交互
1.httpBasic.html: <!DOCTYPE HTML><html ng-app="app"><head> <title& ...
- 《ServerSuperIO Designer IDE使用教程》- 6.增加与阿里云物联网（IOT）对接服务，实现数据交互。发布：v4.2.4 版本
v4.2.4 更新内容:1.增加了对接阿里物联网平台的服务.下载地址:官方下载 6. 增加与阿里云物联网(IOT)对接服务,实现数据交互 6.1 概述 为了满足业务系统数据上云的要求,Se ...
- AntDesign(React)学习-10 Dva 与后台数据交互
明天正式在线办公没时间学习了,今天晚上再更新一篇, 代码提交一次:https://github.com/zhaogaojian/jgdemo 1.src下创建services目录 创建文件userSr ...
- MUI框架-09-MUI 与后台数据交互
MUI框架-09-MUI 与后台数据交互 本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现 我们大家都知道,想要数据交互就要有数据,每次当我们发送请求,我们 ...
- 深究AngularJS——自定义服务详解(factory、service、provider)
前言 3种创建自定义服务的方式. Factory Service Provider 大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想.所以我们得了解下分 ...
- js前台与后台数据交互-前台调后台
转自:http://blog.csdn.net/wang379275614/article/details/17033981 网站是围绕数据库来编程的,以数据库中的数据为中心,通过后台来操作这些数 ...
- 使用Jquery.AJAX方法和PHP后台数据交互小结
使用jQuery的AJAX方法和后台PHP进行数据交互,交互采用的数据格式JSON格式. 我主要小小的总结了一下,我使用AJAX方法时候遇到一些小小的问题. 第一:在传递数据的时候,传输地址注意是否正 ...
- angularjs 自定义服务的三种方式
angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$providevar ...
随机推荐
- backBarButtonItem无效
控制器A push-> 控制器B, 我设置了B的backBarButtonItem为“返回”,发现无效... 原因: 应该在控制器A中设置backBarButtonItem,这样在push B之 ...
- Quartz 2D 初步
转载自:http://www.cofcool.net/development/2015/06/17/ios-study-note-six-Quartz2D/ Quartz 2D是一个二维绘图引擎,同时 ...
- Qt5：Qt中屏幕或窗口截图功能的实现
要想在Qt中实现屏幕或窗口截图功能 ,通常有两种方法: 1 -- 使用 QPixmap 类 2 -- 使用 QScreen类 然而虽然俩两种方法用到的类不相同,但是调用到的类成员函数的函数名称和参 ...
- Python3基础 函数 关键字参数 的示例
镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...
- git使用时遭遇the authenticity of host can't be established
修改/etc/ssh/ssh_config文件的配置,以后则不会再出现此问题 最后面添加: StrictHostKeyChecking no UserKnownHostsFile /dev/null
- 天梯赛决赛 L2-1.红色警报 并查集
L2-013. 红色警报 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 战争中保持各个城市间的连通性非常重要.本题要求你编写一 ...
- do from a specific ip
ping -S 192.168.240.1 sohu.com telnet -b 192.168.240.1 sohu.com 80
- gridcontrol第一行为0，没有选中为-999999
- iframe与父页面的js通信
1.父页面调用iframe中的函数: document.getElementById('myframe').contentWidow.fun1(); 2.在iframe中调用父页面中的函数: wind ...
- SVG页面loading动态图
https://github.com/SamHerbert/SVG-Loaders demo http://samherbert.net/svg-loaders/