angular JS 三种服务

来源:互联网 发布:生物医药上市知乎 编辑:程序博客网 时间:2024/06/03 09:18

1.Factory
2.Service
3.Provider

1.Factory
Factory创建的服务,就是返回一个有属性有方法的对象,相当于var f = myFactory();
//创建模型
var myModule = angular.module(‘myModule’,[]);

//通过工厂模式创建自定义服务
myModule.factory(‘factory’,function () {
var service = {};//定义一个object对象
service.name = ‘张三’;

//定义一个私有化属性
var age;
service.setAge = function (newAge) {
age = newAge;
}
service.getAge = function () {
return age;
}

return service;

})
//创建控制器
myModule.controller(‘myCtrl’,function ($scope,factory) {

factory.setAge(20);
$scope.a = factory.getAge;
alert(factory.name);
})

注:在Factory中不能注入$scope作用域对象

2.Service
通过Service方式创建自定义服务,相当于new一个对象:var s = new myService();只有把属性和方法添加到this上才可以在controller里调用。
//创建模型
var myModule = angular.module(‘myModule’,[]);

//创建service服务
myModule.service(‘myService’,function () {

this.name = ‘service’;
this.getData = function () {
alert(‘this is service function’);
}

})

myModule.controller(‘myCtrl’,function ($scope,myService) {
console.log(myService.name);
myService.getData();
})

3.Provider
只有Provider才是能传.config()函数的service,如果想在service对象启用之前,先进行模块范围配置,则应该使用Provider服务,需要注意的是,在.config()中注入Provider时,名字需要是providerName + Provider的形式,使用Provider的优点就是,你可以在provider对象传递到应用程序之前,可以在.config()中对provider对象进行修改。
当使用Provider创建服务时,唯一的可以在控制器中访问属性和方法是通过$get()函数返回内容。
//创建模型
var myModule = angular.module(‘myModule’,[]);

//在.config中给provider赋值
myModule.config(function (myproviderProvider) {
myproviderProvider.setName(‘providerName’);
})

//创建Provider服务
myModule.provider(‘myprovider’,function () {
var name = ”;
var test = {‘a’:’1’,’b’:’2’};
this.setName = function (newName) {
name = newName;
}

this.$get = function () {
return {
lastName: name,
test: test
}
}
})

myModule.controller(‘myCtrl’,function ($scope,myprovider) {
alert(myprovider.test.a);
})

4.在过滤器中注入自定义服务
//创建模型
var myModule = angular.module(‘myModule’,[]);

//创建Service服务
myModule.service(‘myService’,function () {
this.myFunc = function (x) {
return x.toString(16);
}
})
//过滤器
myModule.filter(‘myFilter’,[‘myService’,function (myService) {
return function (x) {
return myService.myFunc(x);
};
}]);

{{ 324113412412 | myFilter }}