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 ...
随机推荐
- 【leetcode】Isomorphic Strings(easy)
Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...
- php图片防盗链的小测试
test.php <?php $txt = "http://hiphotos.baidu.com/stupidet/pic/item/4f1b8cfb4c33b7254e4aea69. ...
- Android笔记:ninepatch
上边框和左边框绘制的部分就表示当图片需要拉伸时就拉伸黑点标记的区域 下边框和右边框绘制的部分则表示内容会被放置的区域
- Mac下java开发环境的搭建与开发工具的安装
一.安装JDK 1.根据你当前环境的需要,下载相应的JDK并安装,安装步骤与其他Mac软件安装方法相同,我安装的是jdk1.8.0_74.jdk,mac中jdk1.8的默认位置:/Library/Ja ...
- js函数的几个特殊点
在ECMAScript中,Function(函数)类型实际上是对象.每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法.由于函数是对象,因此函数名实际上也是一个指向函数对象 ...
- hdu 4006 The kth great number
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4006 思路:利用优先队列的性质,将数据存入后会自动对数据进行排序 #include<stdlib ...
- JAVA中读取xls数据方法介绍
用例编号(UI-0001) 用例名称({验证页面跳转|验证元素文本}-简要明确表述) 验证类型 是否执行 初始URL 初始元素xpath 目标元素xpath 目标元素属性 期望结果 UI-0001 验 ...
- (编辑器)Jquery-EasyUI集合Kindeditor编辑器
1.在html里面添加 list.html list.html (function ($, K) { if (!K) throw "KindEditor未定义!"; functio ...
- 与你相遇好幸运,Waterline初遇
Github : https://github.com/balderdashy/waterline 文档 : https://github.com/balderdashy/waterline-docs ...
- 虚拟机Class文件结构笔记
>>Java语言的平台无关性 Java是与平台无关的语言,“一次编写,到处运行”,这一方面依赖于Java源代码编译后生成的存储字节码的文件,即Class文件是语言和平台无关的: 另一方面依 ...