Angular JS 学习之服务(Service)
1.AngularJS中,可以创建自己的服务,或使用内建服务;
2.在AngularJS中,服务是一个函数或对象,可在你的AngularJS应用中使用;
AngularJS内建了30多个服务;有个$location服务,它可以返回当前页面的URL;
var app=angular.module('myApp',[]);
app.controller('customersCtrl',function($scope,$location){
$scope.myUrl=$location.absUrl();
});

3.$http是AngularJS应用中最常用的服务;服务向服务器发送请求,应用响应服务器传过来的数据;
AngularJS会一直监控应用,处理事件变化,AngularJS使用$location服务比使用window。location对象更好;
var app=angular('myApp',[]);
app.controller('myCtrl',function($scope,$http){
$http.get("Welcome.htm").then(function(response){
$scope.myWelcome=response.data;
});
});

4.$timeout服务:响应了JS window.setTimeout函数:
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$timeout){
$scope.myHeader="Hello World!";
$timeout(function(){
$scope.myHeader="How are you today?";
},2000);
});


5.$interval服务:对应了JS window.setInterval函数
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$interval){
$scope.theTime=new Date().toLocaleTimeString();
$interval(function(){
$scope.theTime=new Date().toLocaleTimeString();
},1000);
});

6.创建自定义服务:可以创建访问自定义服务,链接到你的模块中;
app.service('hexafy',function(){
this.myFunc=function(x){
return x.toString(16);
}
});
使用访问自定义服务,需要在定义过滤器的时候独立添加:
app.controller('myCtrl',function($scope,hexafy){
$scope.hex=hexafy.myFunc(255);
});

7.过滤器中,使用自定义服务:当你创建了自定义服务,并连接到你的应用后,你可以在控制器,指令,过滤器或其他服务中使用它;
在过滤器myFormat中使用服务hexafy:
app.filter('myFormat',['hexafy',function(hexafy){
return function(x){
return hexafy.myFunc(x);
};
}]);
Angular JS 学习之服务(Service)的更多相关文章
- Angular JS 中的服务注册方法
在Angular JS中创建服务的几种方法 factory() service() constant() value() provider() factory(name,fn(){}) 该服务为单例的 ...
- 适合我胃口的angular.js学习资料
断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...
- Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
- Angular.js学习笔记(三)
一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRI ...
- python , angular js 学习记录【2】
1.不同scope之间的通信 (1)无父子关系的scope通信: 在需要操作的scope里面定义一个事件,名称为delete_host,参数为data $rootScope.$on('delete_h ...
- python , angular js 学习记录【1】
1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...
- Angular JS 学习之路由
1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...
- angular.js学习的第一天
第一天对angular.js进行学习,肯定是面对的入门的最简单的实例: 实现下面的这个效果,首先需要在html页面引入angular.js,在下面的div中,ng-app则表示在当前div是一个ang ...
- Angular JS 学习之Bootstrap
1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...
随机推荐
- Mathematics:Dead Fraction(POJ 1930)
消失了的分式 题目大意:某个人在赶论文,需要把里面有些写成小数的数字化为分式,这些小数是无限循环小数(有理数),要你找对应的分母最小的那个分式(也就是从哪里开始循环并不知道). 一开始我也是蒙了,这尼 ...
- NHibernate实战详解(二)映射配置与应用
关于NHibernate的资料本身就不多,中文的就更少了,好在有一些翻译文章含金量很高,另外NHibernate与Hibernate的使用方式可谓神似,所以也有不少经验可以去参考Hibernate. ...
- css 发光字效果
<!DOCTYPE html> <html> <head> <!-- 超酷炫的CSS3发光字体,可自定义喔!!--> <meta http-equ ...
- 【leetcode】Reverse Linked List II (middle)
Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1-> ...
- 如何点击按钮后在加载外部的Js文件
或许有朋友遇到过,想等自己点击按钮之后才执行某一个js文件,那么,你运气好,看到了我的代码了哈哈, <html> <head> <title></title& ...
- Hibernate单向一对多对象关系模型映射
1 hibernate 的对象关系映射 Orm: 类-----表 属性------字段 对象------记录 表:在数据库中存在主外键的关系,反向工厂类是由表生成,在由表生成类的时候,类和类之间存在者 ...
- 在cmd窗口中运行php命令
1.首先安装php.我使用的是wamp,里面包含php5.5.12 2.将C:\wamp\bin\php\php5.5.12添加到环境变量Path中 3.在cmd中运行php -v可以查看php版本相 ...
- gcc创建和使用静态库、动态库
http://www.cnblogs.com/dyllove98/archive/2013/06/25/3155599.html 目录树结构: test/include/hello.h #ifdef ...
- 标准BT.656并行数据结构
转自网络,感谢原作者和转载者. 还有参考:百科http://baike.baidu.com/link?url=bqBT3S7pz_mRJoQE7zkE0K-R1RgQ6FmHNOZ0EjhlSAN_o ...
- 与你相遇好幸运,Sails.js自定义responses
在 /api/responses/ 新建文件 >serviceDBError.js 自定义的数据库错误 >serviceError.js 自定义的数据错误 >serviceSucc ...