Angular服务的5种创建方式
来源:互联网 发布:法律讲堂网络 编辑:程序博客网 时间:2024/05/29 17:51
config配置块
Angular应用的运行主要分为两部分:app.config()和app.run(),config是你设置任何的provider的阶段,从而使应用可以使用正确的服务,需要注意的是在配置块中只有provider能被注入(只有两个例外是$provide和$injector)。而且provider也只能在config中注入。Angular注入服务的5种方式中,只有通过provider和constant注入的服务可以在依赖到config中。
app.controller('MyController', function ($httpProvider) {//错误,无法在控制器中注入服务提供者});app.config(function ($http) {//错误,配置块中只能注入服务});
关于一些内置的服务
控制器函数是可以被注入的,但是控制器本身是不能被注入到任何东西里面去的,然而,有一个内建的AngularJS服务叫做$controller,它负责设置你的控制器,调用myMod.controller(…)时,你实际上是访问了这个服务的provider。
代码:
myMod.controller('MainController', function($scope) { // ...});实际上做了以下事情:
myMod.config(function($controllerProvider) { $controllerProvider.register('MainController', function($scope) {// ... });});类似的还有filter和directive,filter会使用一个叫做$filter的服务以及它的provider $filterProvider,而directive使用一个叫做$compile的服务以及它的provider $compileProvidr。
服务的5中注入方式
factory()
依赖注入器将使用factory函数创建服务的实例,工厂函数返回一个对象。
myModule.factory('myService', function () {var myService = {};//添加myService的一些属性和方法return myService;});
service()
service注入通过传递一个函数给service,然后使用javascript的new操作生成一个服务,也就是说将属性附加到this上即可,使用这个方法要小心javascript的this陷阱,this并不总是指向执行函数本身,也可能指向顶级对象window。
myModule.service('myService', function () {this.foo = 'bar';});
provider()
实际上以上我们提到的factory和service被实现为provider上的语法糖,通过provider注入的服务可以作为提供者在配置块中使用,另外provider必须实现一个$get属性。
myMod.provider('greeting', function() { var text = 'Hello, '; this.setText = function(value) { text = value; }; this.$get = function() { return function(name) { //$get必须实现,可以返回一个函数或者一个对象 alert(text + name); }; };});myMod.config(function(greetingProvider) { greetingProvider.setText("Howdy there, ");});myMod.run(function(greeting) { greeting('Ford Prefect');});
constant(name,value)
constant主要用于注册一个常量,value是一个值或者json对象,通常这个常量主要用于配置经常使用的数据,constant配置的服务可以注入到config。
angular.module('myApp', []).constant('apiKey', '123123123').config(function(apiKey) {// 在这里apiKey将被赋值为123123123// 就像上面设置的那样})
value(name,value)
value主要用于存放一些数据或方法以供使用,如果这个数据或方法需要被修改,就用value来创建服务,其中参数value是一个值或者json对象。另外它不能够依赖到config中。
serviceApp.value('myConfig',{ name:'code_bunny', age:12, getId:function(){ return 1 }});
参考链接:
http://sentsin.com/web/663.html
http://www.jb51.net/article/107021.htm
http://www.cnblogs.com/liulangmao/p/4078246.html
阅读全文
0 0
- Angular服务的5种创建方式
- Angular中创建服务的三种方式factory、service、provider
- angular中定义服务的三种方式
- angular学习笔记--服务的三种定义方式
- angular的http服务的常用方式
- [angular]服务之1创建自定义服务
- angular的自定义五种服务
- Angular JS页面传参的5种方式
- angular的$interpolate服务
- angular的provider服务
- angular的$http服务
- 创建Windows服务的几种方式总结
- axis2五种创建服务方式的比较
- WebService 创建客户端访问服务端面的三种方式
- angular的http三种请求方式
- Angular的启动方式
- 【Angular】延迟执行(服务定义/控制器定义/服务实例的创建)
- axis2五种创建服务方式比较
- 微信H5页 audio标签MP3无法自动播放解决方案
- 此地址使用了一个通常用于网络浏览以外的端口
- Https的认证证书简介
- OC与swift3.1混编
- 第一个ios简单应用——加法计算器
- Angular服务的5种创建方式
- Angularjs 表单请求和字符串请求
- 行人检测(三)自己训练hog+svm分类器
- 使用Kubeadm在CentOS7.2上部署Kubernetes集群
- Latex 编辑下参考文献的引用命令(natbib)
- VS2013中"error C2275: “ElemType”: 将此类型用作表达式非法"错误
- kubernetes的ceph RBD volume(4): 性能测试
- js数字验证码 js数字加字母验证
- android 获取手机屏幕的刷新频率