angularJS學習小結——service


   引言


   最近在項目中用到了關於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服務的一些總結,這些都是入門的知識,在這和大家分享一下,如果想要對服務有更


層的理解還需要我們在項目中好好的研究。

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