angular 关于 factory、service、provider的相关用法

1、factory()

Angular里面创建service最简单的方式是使用factory()方法。

 

factory()让我们通过返回一个包含service方法和数据的对象来定义一个service。在service方法里面我们可以注入services，比如 $http 和 $q等。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

angular.module( 'myApp.services' ) .factory( 'User' ,  function ($http) {  // injectables go here    var  backendUrl =  "http://localhost:3000" ;   var  service = {    // our factory definition      user: {},      setName:  function (newName) {         service.user[ 'name' ] = newName;       },      setEmail:  function (newEmail) {        service.user[ 'email' ] = newEmail;      },      save:  function () {        return  $http.post(backendUrl +  '/users' , {          user: service.user        });      }    };   return  service; });

 

• 在应用里面使用factory()方法

在应用里面可以很容易地使用factory ，需要到的时候简单地注入就可以了

?

1 2 3 4

angular.module( 'myApp' ) .controller( 'MainCtrl' ,  function ($scope, User) {    $scope.saveUser = User.save; });

 

• 什么时候使用factory()方法

在service里面当我们仅仅需要的是一个方法和数据的集合且不需要处理复杂的逻辑的时候，factory()是一个非常不错的选择。

注意：需要使用.config()来配置service的时候不能使用factory()方法

2、service()

service()通过构造函数的方式让我们创建service，我们可以使用原型模式替代javaScript原始的对象来定义service。

和factory()方法一样我们也可以在函数的定义里面看到服务的注入

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

angular.module( 'myApp.services' ) .service( 'User' ,  function ($http) {  // injectables go here    var  self =  this ;  // Save reference    this .user = {};    this .backendUrl =  "http://localhost:3000" ;    this .setName =  function (newName) {      self.user[ 'name' ] = newName;    }    this .setEmail =  function (newEmail) {      self.user[ 'email' ] = newEmail;    }    this .save =  function () {      return  $http.post(self.backendUrl +  '/users' , {        user: self.user      })    } });

 

这里的功能和使用factory()方法的方式一样，service()方法会持有构造函数创建的对象。

• 在应用里面使用service()方法

?

1 2 3 4

angular.module( 'myApp' ) .controller( 'MainCtrl' ,  function ($scope, User) {    $scope.saveUser = User.save; });

 

 

• 什么时候适合使用service()方法

service()方法很适合使用在功能控制比较多的service里面

注意：需要使用.config()来配置service的时候不能使用service()方法

 

3、provider()

provider()是创建service最底层的方式，这也是唯一一个可以使用.config()方法配置创建service的方法

不像上面提到的方法那样，我们在定义的this.$get()方法里面进行依赖注入

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

angular.module( 'myApp.services' ) .provider( 'User' ,  function () {    this .backendUrl =  "http://localhost:3000" ;    this .setBackendUrl =  function (newUrl) {      if  (url)  this .backendUrl = newUrl;    }    this .$get =  function ($http) {  // injectables go here      var  self =  this ;      var  service = {        user: {},        setName:  function (newName) {          service.user[ 'name' ] = newName;        },        setEmail:  function (newEmail) {          service.user[ 'email' ] = newEmail;        },        save:  function () {          return  $http.post(self.backendUrl +  '/users' , {            user: service.user          })        }      };      return  service;    } });

 

• 在应用里面使用provider()方法

为了给service进行配置，我们可以将provider注入到.config()方法里面

?

1 2 3 4

angular.module( 'myApp' ) .config( function (UserProvider) {    UserProvider.setBackendUrl( "http://myApiBackend.com/api" ); })

 

这样我们就可以和其他方式一样在应用里面使用这个service了

?

1 2 3 4

angular.module( 'myApp' ) .controller( 'MainCtrl' ,  function ($scope, User) {    $scope.saveUser = User.save; });

 

• 什么时候使用provider()方法

1. 当我们希望在应用开始前对service进行配置的时候就需要使用到provider()。比如，我们需要配置services在不同的部署环境里面（开发，演示，生产）使用不同的后端处理的时候就可以使用到了

2. 当我们打算发布开源provider()也是首选创建service的方法，这样就可以使用配置的方式来配置services而不是将配置数据硬编码写到代码里面。

还可以看看这篇翻译：http://www.oschina.net/translate/top-10-mistakes-angularjs-developers-make

 

转载于:https://www.cnblogs.com/cench/p/5289769.html