在AngularJS中創建自定義服務

1,創建value服務

    你可以使用非常簡單的value服務來定義你可以作爲服務提供器注入的單個值。value方法使用下面的語法,其中name是服務名稱,object是你想要提供的任何JavaScript對象:

        value(name,object)  或者

var app = angular.module('myApp',[]);
app.value('myValue',{color:'blue',value:'17'})

2,創建constant服務

    constant服務與value服務是基本相同的,不同的是,constant服務在構建module對象的配置階段可用,而value服務不是。constant方法使用下面的語法,其中name是服務名稱,object是你想要提供的任何JavaScript對象。

    constant(name,object) 或者

var app = angular.module('myApp',[]);
app.constant('myValue',{color:'blue',value:'17'});

3,創建factory服務

    factory提供了把功能實現到服務中的能力。它也可用依賴於其他服務提供器,讓你建立條塊分離的代碼。factory方法使用下面的語法,其中name是服務名而factoryProvider是建立工廠服務的提供器函數:

    factory(name,factoryProvider)

    你可用使用其他服務注入factory方法,它返回一個相應功能的服務對象。這裏功能可以是一個複雜的JavaScript服務,值,或一個簡單的函數。例如,下面的代碼實現一個factory服務,它返回一個將兩個數字相乘的函數:

var app = angular.module('myApp',[]);
app.constant('myConst',10);
app.factory('multiplier',['myConst',function(myConst){
	return function(value){
		return value*myConst;
	}]);

4,創建service服務

    service方法提供把功能實現到一個服務中的能力。但是,service方法的工作原理與factory方法略有不同。service方法接受一個構造函數作爲第二個參數,並使用它來創建一個對象的新實例。service方法使用下面的語法,其中name是服務名,而constructor是一個構造函數:

    service(name,constructor)

    service方法也可以接受依賴注入。下面的代碼實現了一個基本的service方法,這提供了一個add()函數和multiply()函數:

var app = angular.module('myApp',[]);
app.constant('myConst',10);
function ConstMathObj(myConst){
	this.add = function(value){ return value + myConst; };
	this.multiply = function(value){ return value * myConst; };
}
app.service('constMath',['myConst',ConstMathObj]);

    請注意,ConstMathObj構造函數首先被創建,然後service()方法調用它,並使用依賴注入來插入myConst服務。

5,把服務集成在一個模塊中

    下面的代碼清單顯示了吧vaue,constant,factory和service服務集成到單個模塊中的例子。

var app = angular.module('myApp',[]);
app.value('censorWords',['bad','mad','sad']);
app.constant('repString',"****");
app.factory('censorF',['censorWords','repString',function(cWords,repString){
	return function(inString){
		var outString = inString;
		for(i in cWords){
			outString = outString.replace(cWords[i],repString);
		}
		return outString;
	};
}]);
function CensorObj(cWords,repString){
	this.censor = function(inString){
		var outString = inString;
		for(i in cWords){
			outString = outString.replace(cWords[i],repString);
		}
		return outString;
	};
}
app.servie('censorF',['censorWords','repString',CensorObj]);
app.controller('mControler',['$scope','censorF','censorS',function($scope,censorF,censorS){
	$scope.censoredByFactory = censorF("mad text");
	$scope.censoredByService = censorS.censor("bad text");
}]);

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章