資深架構(gòu)師的 AngularJS服務(wù)

AngularJS的service層用于處理業(yè)務(wù)邏輯和數(shù)據(jù)持久化,以下3鐘方法可以創(chuàng)建并注冊我們自己的service,在控制器中注入已創(chuàng)建的service服務(wù),就可以調(diào)用service里面的屬性和方法了。

1、Factory

2、Service

3、Provider

1、最簡單的方式:Factory工廠方法

Angular里創(chuàng)建service最簡單的方式就是使用factory()方法,使用factory()來創(chuàng)建服務(wù)的時候,首先創(chuàng)建一個對象,然后在這個對象上添加屬性,最后返回這個對象。把這個服務(wù)注入控制器中,控制器就可以訪問對象上的方法了。

[javascript]?view plain copy

angular.module('yeomanAngularApp')

.factory('playerFactory',function(){

var _players = [

{"username":"zhangsan",'address':'北京'},

{"username":"lisi",'address':'上海'},

{"username":"wangwu",'address':'大連'}

];

var service = {};

service.getPlayers = function(){

return _players;

}

return service;

});

[javascript]?view plain copy

angular.module('yeomanAngularApp')

.controller('PlayerCtrl', function ($scope,$http,$filter,playerFactory) {

$scope.playName = $filter('lowercase')('Angular');

$scope.players = playerService.getPlayers();

console.log(players);

})

2、最直接的方式:Service構(gòu)造函數(shù)方法

service()與factory用法差不多,區(qū)別在于不需要返回一個對象。

使用service()創(chuàng)建服務(wù)時,相當于使用new關(guān)鍵字進行了實例化,只需要在this上添加屬性和方法,然后服務(wù)會自動返回this。把這個服務(wù)注入控制器中,控制器就可以訪問對象上的屬性方法了。

[javascript]?view plain copy

angular.module('yeomanAngularApp')

.service('playerService', function(){

this.getRemotePlayers = function(){

var deferred = $q.defer();

$http({

method: 'JSONP',

url: 'url'+'&callback=JSON_CALLBACK'

}).success(function(data, status) {

deferred.resove(data);

}).error(function(data, status) {

deferred.reject('error');

});

return deferred.promise;

}

})

[javascript]?view plain copy

angular.module('yeomanAngularApp')

.controller('PlayerCtrl', function ($scope,$http,$filter,playerService) {

$scope.players = playerService.getRemotePlayers();

console.log(players);

})

3、最通用的方式:Provider方法

provider是唯一一種可以創(chuàng)建用來注入到config()函數(shù)的服務(wù)的方式。如果要在service對象啟動之前先進行模塊范圍的配置,應(yīng)使用Provider。

[javascript]?view plain copy

angular.module('yeomanAngularApp')

.provider('playerProvider',function(){

this._players = [

{"username":"zhangsan",'address':'北京'},

{"username":"lisi",'address':'上海'},

{"username":"wangwu",'address':'大連'}

];

this.paramFromConfig = '';

this.$get = function(){

var that = this;

return{

getPlayers: function(){

return that._players;

},

paramOnConfig: that.paramFromConfig

}

}

})

.config(function(playerProviderProvider){

playerProviderProvider.paramFromConfig = 'param from config';

})

[javascript]?view plain copy

angular.module('yeomanAngularApp')

.controller('PlayerCtrl', function ($scope,$http,$filter,playerProvider) {

$scope.playName = $filter('lowercase')('Angular');

$scope.players = playerService.getPlayers();

console.log(players);

})

在此我向大家推薦一個架構(gòu)學習交流群。交流學習群號: 744642380, 里面會分享一些資深架構(gòu)師錄制的視頻錄像:有Spring,MyBatis,Netty源碼分析,高并發(fā)、高性能、分布式、微服務(wù)架構(gòu)的原理,JVM性能優(yōu)化、分布式架構(gòu)等這些成為架構(gòu)師必備的知識體系。還能領(lǐng)取免費的學習資源,目前受益良

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容