您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)Angular中$injector對象的示例分析的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
$injector其實是一個IOC容器,包含了很多我們通過.module()和$provide創(chuàng)建的模塊和服務(wù)。$injector服務(wù)提供了對依賴注入器對象的訪問,當(dāng)然我們也可以調(diào)用angular.injector()來獲得注入器?!鞠嚓P(guān)推薦:《angular教程》】
var injector1 = angular.injector(["myModule","herModule"]); //獲得myModule和herModule模塊下的注入器實例
angular.injector()可以調(diào)用多次,每次都返回新建的injector對象,所以我們自己創(chuàng)建的myInjector和angular自動創(chuàng)建的$injector不是同一個對象。
var injector1 = angular.injector(["myModule","herModule"]); var injector2 = angular.injector(["myModule","herModule"]); alert(injector1 == injector2);//false
通過$injector.get('serviceName')根據(jù)名字獲得服務(wù)的實例,通過$injector.annotate('xxx')獲得xxx的所有依賴項。
var app = angular.module("myApp",[]); app.factory("hello1",function(){ return { hello:function(){ console.log("hello1 service"); } } }); app.factory("hello2",function(){ return { hello:function(){ console.log("hello2 service"); } } }); var $injector = angular.injector(['myApp']); console.log(angular.equals($injector.get('$injector'),$injector));//true var myCtrl2 = function($scope,hello1,hello2){ $scope.hello = function(){ hello1.hello(); hello2.hello(); } } myCtrl2.$injector = ['hello1','hello2']; app.controller("myCtrl2", myCtrl2); console.log($injector.annotate(myCtrl2));//["$scope","hello1","hello2"]
在我們使用.controller()函數(shù)的時候,會調(diào)用$controller服務(wù),而在底層,則將使用$injector服務(wù)的invoke()函數(shù)創(chuàng)建該控制器,函數(shù)invoke()將負(fù)責(zé)分析什么參數(shù)需要被傳入controller中,并執(zhí)行該函數(shù),所以底層實際上是使用了以下三種方式聲明依賴。
// 創(chuàng)建myModule模塊、注冊服務(wù) var myModule = angular.module('myModule', []); myModule.service('myService', function() { this.my = 0; }); // 獲取injector var injector = angular.injector(["myModule"]); // 第一種inference(推斷) injector.invoke(function(myService){alert(myService.my);}); // 第二種annotation (注入) function explicit(serviceA) {alert(serviceA.my);}; explicit.$inject = ['myService']; injector.invoke(explicit); // 第三種inline (內(nèi)聯(lián)) injector.invoke(['myService', function(serviceA){alert(serviceA.my);}]);
因為$scope是局部的,不是一個服務(wù),所以Angular使用它的方式和服務(wù)的方式不同,為了正確注入$scope變量,下面是一個理論上實踐:
$injector.invoke(function ($scope, $http) { //在這里使用$scope,$http }, null, {$scope: {}});
$rootScope是由angularJS加載模塊的時候自動創(chuàng)建的,每個模塊只會有1個rootScope。rootScope創(chuàng)建好會以服務(wù)的形式加入到 $injector中。也就是說通過 $injector.get("$ rootScope ")能夠獲取到某個模塊的根作用域。
// 新建一個模塊 var module = angular.module("app",[]); // true說明$rootScope確實以服務(wù)的形式包含在模塊的injector中 var hasNgInjector = angular.injector(['app','ng']); console.log("has $rootScope=" + hasNgInjector.has("$rootScope"));//true // 獲取模塊相應(yīng)的injector對象,不獲取ng模塊中的服務(wù) // 不依賴于ng模塊,無法獲取$rootScope服務(wù) var noNgInjector = angular.injector(['app']); console.log("no $rootScope=" + noNgInjector.has("$rootScope"));//false // 獲取angular核心的ng模塊 var ngInjector = angular.injector(['ng']); console.log("ng $rootScope=" + ngInjector.has("$rootScope"));//true
感謝各位的閱讀!關(guān)于“Angular中$injector對象的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。