搜尋
首頁web前端js教程AngularJS依賴注入的幾種方式

AngularJS依賴注入的幾種方式

Mar 16, 2018 pm 05:17 PM
angularjsjavascript方式

本文參考AngularJs權威指南

概念

依賴注入是一種設計模式,它可以去除對依賴關係的硬編碼,從而可以在運行時改變甚至移除依賴關係。

從功能來看,依賴注入會事先自動尋找依賴關係,並將注入目標告知被依賴的資源,這樣就可以在目標需要時立即將資源注入進去。

AngularJS使用$injetor(注入器服務)來管理依賴關係的查詢和實例化。

事實上, $injetor負責實例化AngularJS中所有的元件,包括應用的模組、指令和控制器等。

在執行時, 任何模組啟動時$injetor都會負責實例化,並將其所需的所有依賴傳遞進去。


依賴注入的幾種方法

1、推斷式註入聲明

如果沒有明確的聲明, AngularJS會假定參數名稱就是依賴的名稱。

請注意,這個過程只​​適用於未經過壓縮和混淆的程式碼,因為AngularJS需要原始未經壓縮的參數列表來進行解析。

例子:(宣告了一個模組和一個控制器)

angular.module('myApp', [])
.factory('greeter', function() {
    return {
        greet: function(msg) {alert(msg);}
    }
})
.controller('MyController',function($scope, greeter) {//其中function中的greeter就是依赖注入
    $scope.sayHello = function() {
    greeter.greet("Hello!");
    };
});
<p>
    </p><p>
        <button>Hello</button>
    </p>

當AngularJS實例化這個模組時,會尋找greeter並自然而然地把對它的引用傳遞進去

2、明確注入宣告

AngularJS提供了明確的方法來明確定義一個函數在被呼叫時需要用到的依賴關係。

透過這種方法宣告依賴,即使在原始碼被壓縮、參數名稱改變的情況下依然能夠正常運作。

var app=angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    });function MyController(renamed$scope, renamedGreeter) {
    renamed$scope.sayHello = function() {
        renamedGreeter.greet("Hello!");
    }};
MyController.$inject = ['$scope', 'greeter'];
app.controller('MyController', MyController);//注意这个语句,我这个例子弄了半天,各种报错,就是因为这个语句少了

我們為我們的函數設定的參數名稱分別是renamed$scope和renamedGreeter,然後我們在後面使用

MyController.$inject=['$scope','greeter'];

明確的將我們需要的依賴注入到MyController函數中;

所以在MyController函數中,renamed

scope,MyController.

scope', 'greeter'];代表greeter


#3、行內注入宣告

AngularJS提供的注入宣告的最後一種方式,是可以隨時使用的行內注入宣告。

允許我們在函數定義時從行內將參數傳入。此外,它可以避免在定義過程中使用臨時變數。

這種方式其實是一個語法糖,它同前面提到的透過$inject屬性進行注入宣告的原理是完全一樣的

範例:(跟上面的例子一樣,只是修改了js的部分)

angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    })
    .controller('MyController',  ['$scope', 'greeter', function($scope, greeter)  {
    //这里注入的方式不一样了
    //在定义一个AngularJS的对象时,行内声明的方式允许我们直接传入一个参数数组而不是一个函数。
    //数组的元素是字符串,它们代表的是可以被注入到对象中的依赖的名字,最后一个参数就是依赖注入的目标函数对象本身。
            $scope.sayHello = function() {
                greeter.greet("Hello!");
            };
        }]);

演示效果還是一樣的,就不貼圖了

由於需要處理的是一個字符串組成的列表,行內注入聲明也可以在壓縮後的程式碼中正常運作。

本文參考AngularJs權威指南

概念

#依賴注入是一種設計模式,它可以去除對依賴關係的硬編碼,從而可以在運行時改變甚至移除依賴關係。

從功能來看,依賴注入會事先自動尋找依賴關係,並將注入目標告知被依賴的資源,這樣就可以在目標需要時立即將資源注入進去。

AngularJS使用$injetor(注入器服務)來管理依賴關係的查詢和實例化。

事實上, $injetor負責實例化AngularJS中所有的元件,包括應用的模組、指令和控制器等。

在執行時, 任何模組啟動時$injetor都會負責實例化,並將其所需的所有依賴傳遞進去。


依賴注入的幾種方法

1、推斷式註入聲明

如果沒有明確的聲明, AngularJS會假定參數名稱就是依賴的名稱。

請注意,這個過程只​​適用於未經過壓縮和混淆的程式碼,因為AngularJS需要原始未經壓縮的參數列表來進行解析。

例子:(宣告了一個模組和一個控制器)

angular.module('myApp', [])
.factory('greeter', function() {
    return {
        greet: function(msg) {alert(msg);}
    }
})
.controller('MyController',function($scope, greeter) {//其中function中的greeter就是依赖注入
    $scope.sayHello = function() {
    greeter.greet("Hello!");
    };
});
<p>
    </p><p>
        <button>Hello</button>
    </p>

當AngularJS實例化這個模組時,會尋找greeter並自然而然地把對它的引用傳遞進去

2、明確注入宣告

AngularJS提供了明確的方法來明確定義一個函數在被呼叫時需要用到的依賴關係。

透過這種方法宣告依賴,即使在原始碼被壓縮、參數名稱改變的情況下依然能夠正常運作。

var app=angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    });function MyController(renamed$scope, renamedGreeter) {
    renamed$scope.sayHello = function() {
        renamedGreeter.greet("Hello!");
    }};
MyController.$inject = ['$scope', 'greeter'];
app.controller('MyController', MyController);//注意这个语句,我这个例子弄了半天,各种报错,就是因为这个语句少了

我們為我們的函數設定的參數名稱分別是renamed$scope和renamedGreeter,然後我們在後面使用

MyController.$inject=['$scope','greeter'];

明確的將我們需要的依賴注入到MyController函數中;

所以在MyController函數中,renamed

scope,MyController.

scope', 'greeter'];代表greeter


#3、行內注入宣告

AngularJS提供的注入宣告的最後一種方式,是可以隨時使用的行內注入宣告。

允許我們在函數定義時從行內將參數傳入。此外,它可以避免在定義過程中使用臨時變數。

這種方式其實是一個語法糖,它同前面提到的透過$inject屬性進行注入宣告的原理是完全一樣的

範例:(跟上面的例子一樣,只是修改了js的部分)

angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    })
    .controller('MyController',  ['$scope', 'greeter', function($scope, greeter)  {
    //这里注入的方式不一样了
    //在定义一个AngularJS的对象时,行内声明的方式允许我们直接传入一个参数数组而不是一个函数。
    //数组的元素是字符串,它们代表的是可以被注入到对象中的依赖的名字,最后一个参数就是依赖注入的目标函数对象本身。
            $scope.sayHello = function() {
                greeter.greet("Hello!");
            };
        }]);

由於需要處理的是一個字串組成的列表,行內註入宣告也可以在壓縮後的程式碼中正常運作。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

$watch,$apply和$digest資料綁定過程詳解

Html5的localStorage使用詳解

AJAX的跨域知識

以上是AngularJS依賴注入的幾種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
Python vs. JavaScript:性能和效率注意事項Python vs. JavaScript:性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在:1)Python作為解釋型語言,運行速度較慢,但開發效率高,適合快速原型開發;2)JavaScript在瀏覽器中受限於單線程,但在Node.js中可利用多線程和異步I/O提升性能,兩者在實際項目中各有優勢。

JavaScript的起源:探索其實施語言JavaScript的起源:探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年,由布蘭登·艾克創造,實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後:什麼語言能力JavaScript?幕後:什麼語言能力JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行,依賴JavaScript引擎解析和執行代碼。 1)解析階段生成抽象語法樹(AST);2)編譯階段將AST轉換為字節碼或機器碼;3)執行階段執行編譯後的代碼。

Python和JavaScript的未來:趨勢和預測Python和JavaScript的未來:趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括:1.Python將鞏固在科學計算和AI領域的地位,2.JavaScript將推動Web技術發展,3.跨平台開發將成為熱門,4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景,並在性能上有更多突破。

Python vs. JavaScript:開發環境和工具Python vs. JavaScript:開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda,適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack,適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎?檢查證據JavaScript是用C編寫的嗎?檢查證據Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C語言編寫的。 1)C語言提供了高效性能和底層控制,適合JavaScript引擎的開發。 2)以V8引擎為例,其核心用C 編寫,結合了C的效率和麵向對象特性。 3)JavaScript引擎的工作原理包括解析、編譯和執行,C語言在這些過程中發揮關鍵作用。

JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript:連接解釋C和JavaScript:連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1)C 代碼編譯成WebAssembly模塊,引入到JavaScript環境中,增強計算能力。 2)在遊戲開發中,C 處理物理引擎和圖形渲染,JavaScript負責遊戲邏輯和用戶界面。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具