AngularJs学习笔记3-服务及过滤器
距离上次别博客有有一段时间了,因为最近公司和个人事情比较多,也因为学习新的知识所以耽搁了,也有人说Angularjs1.5没有人用了,没必要分享,我个人感觉既然开头了我就坚持把他写完,对一些还在使用或者维护项目的朋友能有一些帮助吧;
服务:服务提供能够在应用的整个生命周期保持数据的方法,它能在控制器之间通信,且能保持数据的一致性。
服务分类:

常量及变量使用场景及区别:
1.value不可以在config里注入,但是constant可以
2.value可以修改,但是constant不可以修改,一般直接用constant配置一些需要经常使用的数据(同名值不可修改)。
3、可以通过value()来注册服务对象或函数,用constant()来配置数据
4、 value不能在provider内访问,constant可以
Service()、Fanctory()、Provider():直接上代码更直观的看一下:
//1、工厂服务声明:
//注入factory,相当于注入factory定义时的函数调用入口
app.factory('testFactory', function() {
//1、定义对象
var factory = {};
//2、对象上添加用户属性
factory.username = "我是工厂服务!";
//2、对象属性上添加提交函数
factory.submit = function() {
console.log("工厂服务提交方法");
};
//3、返回对象
return factory;
});
//2、构造器服务声明
//注入service,相当于注入service定义时的function实例
app.service('testService', function() {
// 通过this上添加属性或方法绑定
this.username = "我是构造器服务";
this.submit = function() {
console.log("构造服务提交方法!");
}
});
//3、提供者服务
//注入provider,相当于注入provider内$get定义的函数实例的调用
app.provider('testProvider', function() {
this.setUrl = "";
this.$get = function() {
var that = this;
var privateProvider = {};
privateProvider.user = function() {
return "我是Provider服务方法";
};
privateProvider.submit = function() {
console.log("我是Provider服务提交方法");
console.log("我是config配置部分:" + that.setUrl);
}
return privateProvider;
}
});
从上面代码可以看得出来,Service返回定义时的函数实例,所以不能直接返回字符串,Factory返回的是定义时的函数调用入口,所以能返回字符串,个人感觉该两个服务没有太大区别,平时本人比较用的多的是Factory,provider提供者比他们俩更底层,使用更灵活,主要对提供对外接口之类时可以灵活使用;
decorator():
app.config(function($provide, testProviderProvider) {
testProviderProvider.setUrl = "这是config配置内容";
//声明装饰者服务
$provide.decorator('testProvider', function($delegate) {
return {
submit: function() {
var startDate = new Date();
console.log("提交时间记录开始:" + startDate);
$delegate.submit();
var endDate = new Date();
console.log("提交时间记录结束:" + endDate);
console.log("提交时间总耗时:" + (startDate - endDate) + "毫秒");
},
user: function() {
var result = $delegate.user();
console.log("结果:" + result);
}
}
});
});
该服务只要针对已有服务通过横向切面的方式添加一些自定义的代码来实现自定义内容,例如上面代码中在提交服务执行前后添加日志代码,来记录运行时间,但对于调用者没有任何影响,使用该服务时注意的是以上注入的服务名称testProviderProvider必须以Provider结束;
过滤器(Filter):过滤器这里不详细讲解了,因为这个比较简单,网上也有很多相关例子;

AngularJs学习笔记3-服务及过滤器的更多相关文章
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJs学习笔记--I18n/L10n
原版地址:http://code.angularjs.org/1.0.2/docs/guide/i18n 一.I18n and L10n in AngularJS 1. 什么是I18n和L10n? 国 ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--Managing Service Dependencies
原版地址:http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies angular允许service将其他ser ...
- AngularJs学习笔记--Injecting Services Into Controllers
原版地址:http://docs.angularjs.org/guide/dev_guide.services.injecting_controllers 把service当作被依赖的资源加载到con ...
随机推荐
- 生成一个唯一token
$token = md5(uniqid(rand(), true));
- 探索Windows命令行系列(6):活用批处理解决实际问题
1.批量修改文件名 2.批量重启服务 3.全盘搜索指定文件 3.1.全盘搜索名称为 mm.jpg 的文件,获取其全路径 3.2.查找系统中所有名称以 .docx 结尾的文件 4.调用可执行程序 4.1 ...
- 【Android Developers Training】 107. 认知用户当前的行为
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 如何利用php+android+新浪sae服务器做一个app下载应用
功能简介:提供一个app下载的平台,类似于appstore,上面有很多app可供下载 实现基本思路:利用android,在手机桌面建立一个图标,点击该图标不是打开app应用,而是跳转到一个web页面, ...
- JavaScript面向对象轻松入门之多态(demo by ES5、ES6、TypeScript)
多态(Polymorphism)按字面的意思就是"多种状态",同样的行为(方法)在不同对象上有不同的状态. 在OOP中很多地方都要用到多态的特性,比如同样是点击鼠标右键,点击快捷方 ...
- Spring MVC 项目搭建 -5- spring security 使用数据库进行验证
Spring MVC 项目搭建 -5- spring security 使用数据库进行验证 1.创建数据表格(这里使用的是mysql) CREATE TABLE security_role ( id ...
- MAC开发环境安装
MAC开发环境安装 安装sancha cmd: 安装: https://www.sencha.com/products/extjs/cmd-download/ cmd运行 $ open .bash_p ...
- VB6获取IE8的地址栏的URL信息
这是个老梗了,也没什么技术含量.因为自从接触Linux之后,Windows上我所知道的那一点api基本上都忘光了.所以这样的博文可以当做是备忘,说不定有天还能用的到. Windows上想要获取浏览器的 ...
- 使用 VS2017 和 js 进行桌面程序开发 - electron 之 Hello Word
现在基于 js 和 web浏览器核心构建的 C/S 程序越来越多,比如微信桌面版(基于 duilib 和 cef).VS CODE(基于electron)等,出于了解的目的,最近学习了 electro ...
- POJ 2342 Anniversary party / HDU 1520 Anniversary party / URAL 1039 Anniversary party(树型动态规划)
POJ 2342 Anniversary party / HDU 1520 Anniversary party / URAL 1039 Anniversary party(树型动态规划) Descri ...