引言
最近在項目中用到了關於angularJS中的服務相關的知識,在起初學習這個東西的時候就瞭解到這個東西在項目
中是經常被用到的,在angular中也是比較重要的一塊,所以今天小編就總結一些關於service的知識。
認識Service
關於service我們一點都不陌生,不論實在c#中還是java中我們經常會遇到service的概念,其實service的作用
就是對外提供某種特定的功能,也就是我們經常說的“爲了實現某個功能而調用哪個服務”是一樣的道理,他們一般
是一個獨立的模塊,ng服務是這樣的定義的:
Angular services are singletons objects or functions that carry out specific tasks common to web apps.
1、它是一個單利對象或函數,對外提供特定的功能。
2、它與我們自己定義一個function然後在其他地方調用不同,因爲服務被定義在一個模塊中,所以它的作用範
圍是可以被我們來管理的,ng避免全局變量污染意識是非常強的。
自定義服務
在angular中爲我們提供了三種不同的方式來實現自定義服務,他們分別是系統內置的$provider、module中的
service和module中的factory,下面來看看如何使用這三種方式;
1)$provide的使用
Providers 是唯一一種你可以傳進 .config() 函數的 service。當你想要在 service 對象啓用之前,先進行
模塊範圍的配置,那就應該用 provider
var m1 = angular.module('myApp', [], function ($provide) {
$provide.provider('providerService01', function () {
this.$get = function () {
return {
message: 'this is providerService01'
}
}
})
$provide.provider('providerService02', function () {
this.$get = function () {
var _name = '';
var service = {};
service.setName = function (name) {
_name = name;
}
service.getName = function () {
return _name
}
return service;
}
})
})
m1.controller('firstController', ['$scope', 'providerService01', 'providerService02', function ($scope, providerService01, providerService02) {
console.log(providerService01);
providerService02.setName("李四");
$scope.name = providerService02.getName();
}])
我們在使用$provide的使用可以像上面這樣直接在module中直接注入$provide,然後再module中依次定義多個服
務,當然我們也可以利用config來完成服務的定義。
var m1=angular.module('myApp',[]);
m1.config(function($provide){
$provide.provider('providerService01', function () {
this.$get = function () {
return {
message: 'this is providerService011'
}
}
});
$provide.provider('providerService02', function () {
this.$get = function () {
var _name='';
var service={};
service.setName=function(name){
_name=name;
}
service.getName=function(){
return _name
}
return service;
}
});
})
2)factory的使用
Factory方法直接把一個函數當成一個對象的$get 方法可以直接返回字符串,用 Factory 就是創建一個對象,
爲它添加屬性,然後把這個對象返回出來。你把 service 傳進 controller 之後,在 controller 裏這個對象裏的
屬性就可以通過 factory 使用了。
var m1 = angular.module('myApp', [], function ($provide) {
$provide.factory('factoryService01',function(){
return{
message:'this is providerServices01'
}
})
});
factory的使用比$provide的使用簡單一些,可以在factory直接返回已給對象,不在使用$get來實現對象的返
回。並且$factory和$provide不僅僅可以返回一個對象還可以返回一個任意的字符串。
3)service的使用
Service 是用"new"關鍵字實例化的。因此,你應該給"this"添加屬性,然後 service 返回"this"。你把
service 傳進 controller 之後,在 controller 裏 "this" 上的屬性 就可以通過 service 來使用了
$provide.service('service01',function(){
return{
message:'this is providerServices01'
}
})
service和factory的使用是非常相似的,但是service是不能返回字符串的,而factory既可以返回對象也可以返回任意
的字符串。
三者的區別:provider需要藉助$get來實現,而其餘的兩者都不需要。series不能返回字符串,而其他的兩個
都可以返回。
服務之間的依賴關係
我們在實現某個功能的時候也許需要多個服務相互依賴纔可以完成,那麼對於服務之間的關係我們就需要來管
理,例如我們在完成一個數據驗證的功能,這是在jsFiddle中找的一個非常簡單的小例子
var app = angular.module('MyApp', []);
app.controller('testC3',function($scope,validate){
$scope.validateData = validate;
});
app.factory('remoteData',function(){
var data = {name:'n',value:'v'};
return data;
});
app.factory('validate',function(remoteData){
return function(){
if(remoteData.name=='n'){
alert('驗證通過');
}
};
});
服務validate是來驗證數據是否合法的功能,但是它需要依賴另外一個服務remoteData來獲得數據,但是在
factory的參數中,我們可以直接傳入服務remoteData,ng的依賴注入機制便幫我們做好了其他工作。不過一定要保
證這個參數的名稱與服務名稱一致,ng是根據名稱來識別的。若參數的名次與服務名稱不一致,你就必須顯示的聲明
一下,方式如下:
app.factory('validate',['remoteData',function(remoteDataService){
return function(){
if(remoteDataService.name=='n'){
alert('驗證通過');
}
};
}]);
小結
以上是小編在學習angularJS服務的一些總結,這些都是入門的知識,在這和大家分享一下,如果想要對服務有更
深層的理解還需要我們在項目中好好的研究。