AngularJS中的factory、service以及provider的区别

梦里梦外; 2022-05-22 20:29 207阅读 0赞

初学 AngularJS 时， 肯定会对其提供 factory 、 service 和 provider 感到疑惑， 这三种都是提供服务的方式， 他们到底有什么区别呢？

##  ##

## factory ##

factory 可以认为是设计模式中的工厂方法， 就是你提供一个方法， 该方法返回一个对象的实例， 对于 AngularJS 的 factory 来说， 就是先定义一个对象， 给这个对象添加属性和方法， 然后返回这个对象， 例如：

\[javascript\]  [view plain][]   [copy][view plain]

1.  **var** app = angular.module('MyApp', \[\]);  
2.    
3.  app.factory('MyFactory', **function**() \{  
4.      // define result object of factory.  
5.      **var** result = \{\};  
6.      // add some property and method to the object  
7.      result.greeting = 'Hello from factory.';  
8.      // return the object;  
9.      **return** result;  
10. \});

最后 controller 拿到的就是  `result ` 对象， 相当于下面的代码：

\[javascript\]  [view plain][]   [copy][view plain]

1.  **var** factoryResult = MyFactory();

所谓的 factory 就是这么简单。

## service ##

service 通过 `new `运算符进行实例化， 可以认为是一个类型， 只要把属性和方法添加到 `this `对象上即可， 不用显式返回什么对象， 比如下面的代码：

\[javascript\]  [view plain][]   [copy][view plain]

1.  app.service('MyService', **function**() \{  
2.      **this**.greeting = 'Hello from service';  
3.  \});

controller 拿到的对象就是上面代码中  `this ` 指向的对象， 相当于下面的代码：

\[javascript\]  [view plain][]   [copy][view plain]

1.  **var** serviceObj = **new** MyService();

## provider ##

与 factory 和 service 稍有不同的是， provider 必须提供一个 `$get `方法， `$get `方法和 factory 要求是一致的， 即： 先定义一个对象， 给这个对象添加属性和方法， 然后返回这个对象， 例如：

\[javascript\]  [view plain][]   [copy][view plain]

1.  app.provider('MyProvider', **function**() \{  
2.        
3.      **this**.$get = **function**() \{  
4.          **var** result = \{\};  
5.          result.greeting = 'Hello from provider';  
6.          **return** result;  
7.      \}  
8.  \})

最后 controller 拿到的对象就是 provider 的  `$get ` 方法返回的对象， 相当于下面的代码：

\[javascript\]  [view plain][]   [copy][view plain]

1.  **var** instance = **new** MyProvider();  
2.  **var** provider = instance.$get();

## 使用 factory、 service 与 provider ##

factory、 service 与 provider 使用起来是一样的， 都是通过 AngularJS 的依赖注入使用， 比如：

\[javascript\]  [view plain][]   [copy][view plain]

1.  // inject factory, service and provider to a controller  
2.  app.controller('TestController', \['$scope', 'MyFactory', 'MyService', 'MyProvider', **function**($scope, myFactory, myService, myProvider) \{  
3.      $scope.greetingFromFactory = myFactory.greeting;  
4.      $scope.greetingFromService = myService.greeting;  
5.      $scope.greetingFromProvider = myProvider.greeting;  
6.  \}\]);

对应的 HTML 视图为：

\[html\]  [view plain][]   [copy][view plain]

1.  **<****body** ng-controller="TestController"**>**  
2.      **<****p****>**greeting from factory: \{ \{greetingFromFactory\}\} **</****p****>**  
3.      **<****p****>**greeting from service: \{ \{greetingFromService\}\} **</****p****>**  
4.      **<****p****>**greeting from provider: \{ \{greetingFromProvider\}\} **</****p****>**  
5.  **</****body****>**

## provider 可以在应用启动时进行配置 ##

provider 的特殊之处就是可以在 module 启动时进行配置， 从而达到特殊的用途， 比如在上面的 provider 中可以添加一个 `setName `方法， 可以在启动时调用这个方法， 进行一些额外的初始化工作：

\[javascript\]  [view plain][]   [copy][view plain]

1.  app.provider('MyProvider', **function**() \{  
2.      // default name is 'anonymous';  
3.      **var** defaultName = 'anonymous';  
4.      **var** name = defaultName;  
5.      // setName can be called duaring module init  
6.      **this**.setName = **function**(newName) \{  
7.          name = newName;  
8.      \}  
9.        
10.     **this**.$get = **function**() \{  
11.         **var** result = \{\};  
12.         result.greeting = 'Hello from provider';  
13.   
14.         result.name = name;  
15.         result.defaultName = defaultName;  
16.         **return** result;  
17.     \}  
18. \})

添加了  `setName ` 方法之后， 可以 module 启动时来调用这个方法， 实现对 provider 的配置

\[javascript\]  [view plain][]   [copy][view plain]

1.  app.config(**function**(MyProviderProvider) \{  
2.      MyProviderProvider.setName('Angularjs Provider');  
3.  \});

在 controller 中添加显示 provider 的这些信息：

\[html\]  [view plain][]   [copy][view plain]

1.  app.controller('TestController', \['$scope', 'MyFactory', 'MyService', 'MyProvider', function($scope, myFactory, myService, myProvider) \{  
2.      $scope.greetingFromFactory = myFactory.greeting;  
3.      $scope.greetingFromService = myService.greeting;  
4.      $scope.greetingFromProvider = myProvider.greeting;  
5.        
6.      $scope.defaultName = myProvider.defaultName;  
7.      $scope.name = myProvider.name  
8.  \}\]);

对应的 HTML 视图也调整一下

\[html\]  [view plain][]   [copy][view plain]

1.  **<****body** ng-controller="TestController"**>**  
2.      **<****p****>**greeting from factory: \{ \{greetingFromFactory\}\} **</****p****>**  
3.      **<****p****>**greeting from service: \{ \{greetingFromService\}\}**</****p****>**  
4.      **<****p****>**greeting from provider: \{ \{greetingFromProvider\}\} **</****p****>**  
5.      **<****p****>**defaultName: \{ \{defaultName\}\}, config to: \{ \{name\}\} **</****p****>**  
6.  **</****body****>**

最后程序运行截图如下：

![20160503171915778][]

[view plain]: https://blog.csdn.net/ywl570717586/article/details/51306176#
[20160503171915778]: /images/20220523/2a3b7de37226497b94bbdfa8ed6c195e.png