angularJS Provider、factory、service詳解及實例代碼

2019-11-20 08:55:35

字體：大中小

來源：轉載

供稿：網(wǎng)友

factory

用 Factory 就是創(chuàng)建一個對象，為它添加屬性，然后把這個對象返回出來。你把 service 傳進 controller 之后，在 controller 里這個對象里的屬性就可以通過 factory 使用了。

app.controller('myFactoryCtrl', function($scope, myFactory){  $scope.artist = myFactory.getArtis();});app.factory('myFactory', function(){  var _artist = '';  var service = {};  service.getArtist = function(){    return _artist;  }  return service;});

service

Service 是用"new"關鍵字實例化的。因此，你應該給"this"添加屬性，然后 service 返回"this"。你把 service 傳進 controller 之后，在controller里 "this" 上的屬性就可以通過 service 來使用了。

app.controller('myFactoryCtrl', function($scope, myService){  $scope.artist = myService.getArtis();});app.service('myService', function(){  var _artist ='';  this.getArtist = function(){    return _artist;  }});

provider

Providers 是唯一一種你可以傳進 .config() 函數(shù)的 service。當你想要在 service 對象啟用之前，先進行模塊范圍的配置，那就應該用 provider。

app.controller('myProviderCtrl', function($scope, myProvider){  $scope.artist = myProvider.getArtist();  $scope.data.thingFromConfig = myProvider.thingOnConfig;});app.provider('myProvider', function(){  this._artist = '';  this.thingFromConfig = '';  this.$get = function(){    var that = this;    return {       getArtist: function(){         return that._artist;       },       thingOnConfig: that.thingFromConfig    }  }});app.config(function(myProviderProvider){  myProviderProvider.thingFromConfig = 'This was set in config()';});

value和constant

$provide.value('myValue', 10);$provide.constant('myConstant', 10);/*二者的區(qū)別：1. value可以被修改，constant一旦聲明就無法修改2. value不可以在config中注入，constant可以。*/

provider、factory、service三者的關系

app.provider('myDate', {   $get: function() {    return new Date();   }});//可以寫成app.factory('myDate', function(){  return new Date();});//可以寫成app.service('myDate', Date);

總結