angularjs---服務(service / factory / provider)

標籤：log   技術分享   優雅   bsp   module   對象傳遞   單例   行修改   span   

初angularJs時  常寫一些不夠優雅的代碼  !我總結了一下看看各位有沒有中槍的!-----( 這裡只針對服務service及其相關! )

以下做法不太優雅

1. 兄弟controller 之間的相同的商務邏輯的實現 靠  從父 controller 通過繼承實現.   ×
2. 將大量的不必要的商務邏輯和持久化的資料  堆放在 $scope  和controller中.    ×
3. ......

其實我們應該把商務邏輯和持久化的資料盡量放在service中

　　從記憶體效能的角度來看,只有在需要controller的時候才去載入,一旦不需要就應該拋棄,每次重新整理都應該清除controller

　　而service 是個單例對象,只有在使用的時候才會被建立,在其生命週期內都有效(瀏覽器關閉之前).而且可以注入到不同controller中

　　因此service 更適合存放持久化的資料和絕大部分的商務邏輯.

angular 中提供了三種建立服務的方式

1. service
2. factory
3. provider

service  ---  實質是使用‘new‘進行了執行個體化 然後就可以在controller中調用service中this的方法和資料

var app = angular.module(‘myApp‘, []);app.controller(‘rainCtrl‘, [‘$scope‘, ‘firstService‘,function($scope,firstService) {    $scope.name = firstService.name;}]);app.service(‘firstService‘, function() {    this.name = ‘rain_tdk‘;})

但是一般人不會直接把資料暴露出來  一般應該是這個樣子的

var app = angular.module(‘myApp‘, []);app.controller(‘rainCtrl‘, [‘$scope‘, ‘firstService‘,function($scope,firstService) {    $scope.name = firstService.getName();}]);app.service(‘firstService‘, function() {    var name = ‘rain_tdk‘;    this.getName = function(){        return this.name = name;    }})

factory  ---  返回的一定是一個參考型別

var app = angular.module(‘myApp‘, []);app.controller(‘rainCtrl‘, [‘$scope‘, ‘secondService‘,function($scope,secondService) {    $scope.name = secondService.name;}]);app.factory(‘secondService‘, function(){    return {        name:"rain_tdk"    }})

provider

provider是唯一一個可以傳.config()函數的service. 如果想在service對象啟動之前,先進行模組範圍的配置,就應該選擇provide....

注意:在config函數 裡注入 provide時 有特殊的命名規則: provideName+Provider,控制器中要調用的在$get中返回

優點: 可以在可以在Provide 對象傳遞到應用程式的其他controller 之前在.config()函數中對其進行修改

var app = angular.module(‘myApp‘, []);app.controller(‘rainCtrl‘, [‘$scope‘, ‘thirdService‘, function($scope, thirdService) {    $scope.name = thirdService.name;}]);app.config(function(thirdServiceProvider) {    thirdServiceProvider.name = ‘rain_tdk2‘;});app.provider(‘thirdService‘, function() {    this.name = ‘rain_tdk1‘;    this.$get = function() {        var _this = this;        return {            name: _this.name        }    }})

現在看看源碼

可以看出什麼他們三個方法是一個德行的  哈哈哈哈...

 

 

小傘(rain_tdk)  技術有限...如果出現錯誤請大神指正.如有疑問也歡迎大家一起研討... 

 

angularjs---服務(service / factory / provider)