三大框架---angular---依賴注入

weixin_34148340發表於2017-06-29

            上一章,我們理解了angular框架的各種指令,控制器,各種服務模組的呼叫。這個是      angular框架的執行模式,通過c層來實現modle和v層的資料互動,來動態的實現頁面的動態效果。通過控制器的作用,來建立不同的作用域。通過,不同的作用域來進行不同的資料處理的。這樣angular框架就是把頁面的架構分成不同的控制器,我們可以在控制器的引入不同的模組和服務,來進行不同的服務引入。進行不同的操作。依賴注入在解決web需要的不同的功能上,比如說,購物車的計算總價的時候,我們可以用工廠的模式來進行封裝不同的工具和方法,在我們需要使用的時候,可以直接調起方法,注入模組到需要的控制器中,就可以來使用我們的依賴注入的工廠模式所封裝的方法。如果,需要在不同的控制器傳值的或者是說傳遞資料的話,我們可以通過service服務來進行資料之間的轉換,來進行不同頁面的資料的轉換。也是依賴注入的一種模式。在網站上,我們是經常用到的service服務的。這些都是依賴注入的功能,在資料的轉換和資料的傳值的,我們可以通過service服務上資料物件來進行資料的互動,在service服務上,我們可以封裝一下方法,比如點選的資料的增加,點選按鈕資料的減少等的方法,來進行資料的互動和轉化。這些方法都在service服務裡進行封裝好,我們可以通過陣列來進行儲存資料,通過封裝點選方法來進行把資料push到陣列裡面,然後,在注入service服務控制器的作用域中,我們就可以通過service的物件所封裝的方法拿到我們需要的資料了。因為service服務的回撥函式是一個建構函式,在建構函式的裡面的所建立的是物件,可以用this來進行代表建構函式的所建立的物件。在點選事件裡面,我們可以用this指標來進行指向點選的資料物件,這樣,我們可以拿到我們所需要的資料物件,這樣,我們可以就通過自定義指令來進行渲染到文件流中。封裝好service服務,引進我們的主頁裡面。就可以注入我們所需要的模組當中,然後,我們在所需要的頁面中,新增點選事件。裡面,可以進行傳進我們所需要的引數是我們用ajax請求下來的資料,所遍歷的物件。這樣,我們可以通過新增點選事件的時候,可以把所點選的物件this.item 儲存在服務模組中,我們可以在購物車中,通過封裝好的陣列push方法的所在的函式來進行拿到我們所點選的物件資料。點選幾個,我們所在的陣列的資料就會有儲存所點選的物件資料,我們就可以通過迴圈遍歷裡面的陣列中的資料,來進行渲染,因為,每一條資料都包含在物件裡面,我們可以通過自定義指令來進行物件的渲染,就是我們在購物車中的所新增的資料了。這個是我們所需要的方法和功能,因為,我們在service中,我們所需要的方法可以封裝和注入。

依賴注入可以通過以下幾個方法:

service: 資料的互動和注入,保證資料的持久化,和不同頁面的引進共享資料。

一般的程式碼寫法如下:引數第一是:我們模組的名稱。第二個引數是一個回撥函式(注意:是個建構函式,所建立的是單例物件,我們可以用this指標來進行指向我們的單例物件,也是我們所需要的資料的載體的資料的物件。),裡面可以封裝我們所需要的方法和資料。

   .service('service', function () {

            var arr = [];

           this.name = 'Operation Data';

          this.addItem = function (item) {

             arr.push(item)

       };

})

factory: 工廠方法。工廠方法是我們的設計模式比較好的設計思想。在我們學習物件導向的時候,我們就可以通過工廠方法來建立我們的所需要的物件。可以大批量建立我們的所需要的物件模板。在angular框架中,我們用factory工廠方法來進行封裝我們的所需要的工具和方法。來進模組的依賴注入。我們可以單獨建個模組的來封裝我們的所需要的工具和方法,來進行再在需要的地方進行模組注入。實現方法工具的共享。這個是工廠方法的用法。在工廠方法裡面進行返回的也是個物件。外部可以調來獲取使用。寫法如下:

app.factory('logFactory',function(){

     return { 

                    min: function (a,b) {

                             return a>b? a:b;

                       } ,

                    max:function (a,b){

                           return a>b?b:a;

                 }

      }

})

        在這裡,我們就可以用工廠的方法來進行定義了兩個方法,是比較大小的方法,在需要比較大小的方法所需要的模組我們可以依賴注入呼叫工廠的方法進行比較大小。在原生js中,我們需要的是通過封裝函式來進行呼叫,就可以了。在angular框架中,我們需要把公共的方法封裝在工廠的模式中,就可以了。通過模組的注入來進行呼叫。這個是與原生的js中,所不同的方法。在這裡的是,工廠的方法和service服務的就是我們來進行資料的傳送。

          上面,我們瞭解了我們的專案是通過模組化來進行管理我們的頁面的,通過依賴注入的方式來進行方法的呼叫,和資料的傳送,這是angular的最大的特點,我們把計算價錢的方法,和計算數量的方法來進行封裝到工廠方法裡。也就是說,我們要在工廠裡進行封裝我們所需要的方法,通過模組注入的形式來進行方法的傳遞,當然,也可以通過事件的觸發來進行呼叫我們的注入的方法,也就是我們定義的事件觸發來進行我們的注入的方法,這是不同的控制器的傳遞方法的一種形式。所以,我們要把共同方法來進行封裝在工廠裡面,實現方法共享。在封裝方法,我們可以充分利用物件,陣列,函式來進行方法的封裝,通過函式的傳參,形參,實參是我們的經常利用函式的方法,定義傳入不同的引數來進行不同的方法計算方法,比如,在購物車中,我們經常用,定義求點選數量相加的方法,這個數量是通過service服務上

相關文章