AngularJS Provider,Service,Factory

简介:

provider是干啥的?

provider可以为应用提供通用的服务,形式可以是常量,也可以是对象。

比如我们在controller里常用的$http就是AngularJS框架提供的provider

Java代码   收藏代码
  1. myApp.controller(‘MainController', function($scope, $http) {  
  2.     $http.get(…)  
  3. }  

 在上面的代码里,就可以直接使用$http包好的各种功能了

provider

那我们自己想定制一个provider,怎么写呢

Java代码   收藏代码
  1. //定义:  
  2. $provide.provider('age', {  
  3.     start: 10,  
  4.     $get: function() {  
  5.       return this.start + 2;  
  6.     }  
  7. });  
  8. //或  
  9. $provide.provider('age', function($filterProvider){  
  10.     this.start = 10;  
  11.     this.$get = function() {  
  12.       return this.start + 2;  
  13.     };  
  14. });  
  15.   
  16. //调用:  
  17. app.controller('MainCtrl', function($scope, age) {  
  18.   $scope.age = age; //12  
  19. });  

 provider的基本原则就是通过实现$get方法来在应用中注入单例,使用的时候拿到的age就是$get执行后的结果。 上面例子中的两种定义方法都可以

factory

Java代码   收藏代码
  1. $provide.provider('myDate', {  
  2.     $get: function() {  
  3.       return new Date();  
  4.     }  
  5. });  
  6. //可以写成  
  7. $provide.factory('myDate', function(){  
  8.     return new Date();  
  9. });  
  10.   
  11. //调用:  
  12. app.controller('MainCtrl', function($scope, myDate) {  
  13.   $scope.myDate = myDate; //current date  
  14. });  

 直接第二个参数就是$get要对应的函数实现,代码简单了很多有没有?!

service

这时候我又来劲儿了,我不仅就想定义个$get,里面我还就返回个new出来的已有js类,三哥service闪亮登场

Java代码   收藏代码
  1. $provide.provider('myDate', {  
  2.     $get: function() {  
  3.       return new Date();  
  4.     }  
  5. });  
  6. //可以写成  
  7. $provide.factory('myDate', function(){  
  8.     return new Date();  
  9. });  
  10. //可以写成  
  11. $provide.service('myDate', Date);  

 对于这种需求,代码更简洁了是不是

最后再总结一下provider哥儿几个的优点~

1. 为应用提供通用的服务,形式可以是常量或对象

2. 便于模块化

3. 便于单元测试

相关文章
|
7月前
|
缓存 API
Angular 里的 Service Worker
从 5.0.0 版本开始,Angular 附带了一个 Service Worker 实现。 Angular 开发人员可以利用这个 service worker 并从其提供的更高的可靠性和性能中受益,而无需针对低级 API 编写代码。
52 0
|
Java C#
angularJS学习小结——service
angularJS学习小结——service
71 0
|
前端开发 数据库 容器
AngularJS自定义服务(factory、service、provider)
AngularJS自定义服务(factory、service、provider)
|
JavaScript 前端开发
实战之AngularJS 的Scope和Service的深入应用心得
实战之AngularJS 的Scope和Service的深入应用心得
实战之AngularJS 的Scope和Service的深入应用心得
为 Angular service 注册 provider 的三种方式
为 Angular service 注册 provider 的三种方式
206 0
为 Angular service 注册 provider 的三种方式
如何在Angular项目里创建新的Service
如何在Angular项目里创建新的Service
169 0
如何在Angular项目里创建新的Service
|
JavaScript
Angular Service依赖注入的一个具体例子
Angular Service依赖注入的一个具体例子
104 0
Angular Service依赖注入的一个具体例子
|
监控 JavaScript 前端开发