1. 程式人生 > >AngularJs學習筆記3-服務及過濾器

AngularJs學習筆記3-服務及過濾器

聲明 運行時 維護 style 函數調用 factor blog 使用場景 需要

距離上次別博客有有一段時間了,因為最近公司和個人事情比較多,也因為學習新的知識所以耽擱了,也有人說Angularjs1.5沒有人用了,沒必要分享,我個人感覺既然開頭了我就堅持把他寫完,對一些還在使用或者維護項目的朋友能有一些幫助吧;

服務:服務提供能夠在應用的整個生命周期保持數據的方法,它能在控制器之間通信,且能保持數據的一致性。

服務分類:

技術分享

常量及變量使用場景及區別:
1.value不可以在config裏註入,但是constant可以
2.value可以修改,但是constant不可以修改,一般直接用constant配置一些需要經常使用的數據(同名值不可修改)。
3、可以通過value()來註冊服務對象或函數,用constant()來配置數據
4、 value不能在provider內訪問,constant可以

Service()、Fanctory()、Provider():直接上代碼更直觀的看一下:

 1  //1、工廠服務聲明:
 2     //註入factory,相當於註入factory定義時的函數調用入口
 3     app.factory(‘testFactory‘, function() {
 4         //1、定義對象
 5         var factory = {};
 6         //2、對象上添加用戶屬性
 7         factory.username = "我是工廠服務!";
 8         //2、對象屬性上添加提交函數
 9         factory.submit = function
() { 10 console.log("工廠服務提交方法"); 11 }; 12 //3、返回對象 13 return factory; 14 });
1  //2、構造器服務聲明
2     //註入service,相當於註入service定義時的function實例
3     app.service(‘testService‘, function() {
4         // 通過this上添加屬性或方法綁定
5         this.username = "我是構造器服務";
6         this.submit = function
() { 7 console.log("構造服務提交方法!"); 8 } 9 });
 //3、提供者服務
    //註入provider,相當於註入provider內$get定義的函數實例的調用
    app.provider(‘testProvider‘, function() {
        this.setUrl = "";
        this.$get = function() {
            var that = this;
            var privateProvider = {};
            privateProvider.user = function() {
                return "我是Provider服務方法";
            };
            privateProvider.submit = function() {
                console.log("我是Provider服務提交方法");
                console.log("我是config配置部分:" + that.setUrl);
            }
            return privateProvider;
        }
    });

從上面代碼可以看得出來,Service返回定義時的函數實例,所以不能直接返回字符串,Factory返回的是定義時的函數調用入口,所以能返回字符串,個人感覺該兩個服務沒有太大區別,平時本人比較用的多的是Factory,provider提供者比他們倆更底層,使用更靈活,主要對提供對外接口之類時可以靈活使用;

decorator():

 app.config(function($provide, testProviderProvider) {
        testProviderProvider.setUrl = "這是config配置內容";
        //聲明裝飾者服務
        $provide.decorator(‘testProvider‘, function($delegate) {
            return {
                submit: function() {
                    var startDate = new Date();
                    console.log("提交時間記錄開始:" + startDate);
                    $delegate.submit();
                    var endDate = new Date();
                    console.log("提交時間記錄結束:" + endDate);
                    console.log("提交時間總耗時:" + (startDate - endDate) + "毫秒");
                },
                user: function() {
                    var result = $delegate.user();
                    console.log("結果:" + result);
                }
            }
        });
    });

該服務只要針對已有服務通過橫向切面的方式添加一些自定義的代碼來實現自定義內容,例如上面代碼中在提交服務執行前後添加日誌代碼,來記錄運行時間,但對於調用者沒有任何影響,使用該服務時註意的是以上註入的服務名稱testProviderProvider必須以Provider結束;

過濾器(Filter):過濾器這裏不詳細講解了,因為這個比較簡單,網上也有很多相關例子;

技術分享

AngularJs學習筆記3-服務及過濾器