AngularJS 的依賴注入

mindwind 發布于2019-08-21 11:34 / 2172人閱讀

摘要：代碼代碼需要注意的地方這個方法只適合未經過壓縮和混淆的代碼因為需要原始未經壓縮的參數列表來進行解析。代碼代碼注意的地方行內聲明的方式允許我們直接傳入一個參數數組而不是一個函數。

AngularJS 依賴注入的方法 1. 通過函數的參數進行推斷式注入聲明

如果沒有明確的什么, AngularJS 會假定參數名稱就是依賴的名稱。因此, 它會在內部調用函數對象的 toString() 方法, 分析并提取出函數的參數列表, 然后通過 $injector 將這些參數注入進對象實例。

HTML代碼:





    demo
    
    



    
        
            {{clock.time | date: "yyyy-MM-dd hh:mm:ss"}}

JS 代碼:

angular.module("myApp", [])
    .controller("myController", myController)

function myController($scope, $timeout) {
    var updateTime = function() {
        $scope.clock = {
            time: new Date()
        }

        $timeout(function() {
            $scope.clock.time = new Date()
            updateTime()
        }, 1000)
    }
    updateTime()
}

需要注意的地方:

這個方法只適合未經過壓縮和混淆的代碼, 因為 AngularJS 需要原始未經壓縮的參數列表來進行解析。

2. 顯式的注入聲明

AngularJS 提供了顯式的方法來明確定義一個函數在被調用時需要用到的依賴關系。通過這種方法聲明依賴, 即使在源代碼被壓縮, 參數名稱發生改變的情況下依然可以正常工作。

HTML 代碼:





    demo
    
    



    
        
            {{clock.time | date: "yyyy-MM-dd hh:mm:ss"}}

JS 代碼:

angular.module("myApp", [])
    .controller("myController", myController)

function myController(s, t) {
    var updateTime = function() {
        s.clock = {
            time: new Date()
        }
        t(function() {
            s.clock.time = new Date()
            updateTime()
        }, 1000)
    }
    updateTime()
}

myController["$inject"] = ["$scope", "$timeout"]

3. 行內注入聲明

AngularJS 提供的行內注入方法實際上是一種語法糖, 它與前面提到的通過 $inject 屬性進行聲明的原理是一樣的, 但是允許我們在函數定義的時候從行內將參數傳入, 這種方法方便，簡單，而且避免了在定義的過程中使用臨時變量。

HTML 代碼:





    demo
    
    



    
        
            {{clock.time | date: "yyyy-MM-dd hh:mm:ss"}}

JS 代碼:

angular.module("myApp", [])
    .controller("myController", ["$scope", "$timeout", function(s, t) {
        var updateTime = function() {
            s.clock = {
                time: new Date()
            }
            t(function() {
                s.clock.time = new Date()
                updateTime()
            }, 1000)
        }
        updateTime()
    }])

注意的地方:

行內聲明的方式允許我們直接傳入一個參數數組, 而不是一個函數。數組的元素是字符串, 它們代表的是可以被注入到對象中的依賴名字, 最后一個參數就是依賴注入的目標函數對象本身。

GPU云服務器云服務器依賴注入依賴注入方式 js依賴注入構造函數依賴注入

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86857.html

[ AngularJS ] 自己實現一個簡單的依賴注入

摘要：我們開始使用的時候，它的雙向數據綁定是最讓我們印象深刻的，那第二個就應該算是它的那神奇的依賴注入的功能了。來實現依賴注入現在大部分的框架都提供依賴注入機制的模塊，可能會叫做。我們開始使用AngularJS的時候，它的雙向數據綁定是最讓我們印象深刻的，那第二個就應該算是它的那神奇的依賴注入的功能了。舉個栗子 function myController = ($scope,...

seasonley 2019-08-21 10:36 評論0 收藏0
【譯】《精通使用AngularJS開發Web App》（五）

摘要：上一篇譯精通使用開發四下一篇譯精通使用開發六書名合作對象正如所見，提供了一種將對象組織為模塊的方式。模塊不僅可以注冊可以直接被框架所調用的對象控制器，過濾器等，還可以使用任何應用開發者所定義的對象。上一篇：【譯】《精通使用AngularJS開發Web App》（四）下一篇：【譯】《精通使用AngularJS開發Web App》（六）書名：Mastering Web Applic...

PiscesYE 2019-08-19 14:29 評論0 收藏0
AngularJs 入門（一）--前言

摘要：入門一前言目前來說相對于現在流行的高版本以及來說實屬是老套的前端框架了，當然這都不重要，沒有完美的框架，只有不斷優化的代碼。通過使用我們稱為指令的結構，讓瀏覽器能夠識別新的語法。使用作為輸入，而不是字符串，是區別于其它的框架的最大原因。 AngularJs 入門（一）前言 AngularJs目前來說相對于現在流行的高版本ng2、ng4,以及Vue2.0、React來說實屬是老套的前...

wenyiweb 2019-08-22 13:50 評論0 收藏0