AngularJS中模塊化和依賴注入的示例分析

這篇文章主要介紹了AngularJS中模塊化和依賴注入的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

AngularJS 帶有內置的依賴注入機制。您可以將您的應用程序分為多個不同類型的AngularJS可以注入到每個等組成。模塊化您的應用程序可以更容易地重新使用，配置和應用程序測試組件。

AngularJS包含以下核心類型的對象和組件：

• 價值

• 工廠

• 服務

• 提供者

• 持續的

這些核心類型可以注入到彼此使用AngularJS依賴注入機制。縱觀本文的其余部分，我將解釋如何定義和注入這些組件相互轉化。

價值

在AngularJS的值是一個簡單的對象。它可以是一個數字，字符串或JavaScript對象。值通常用作注入工廠、服務或控制器的配置。

一個值必須屬于一個 AngularJS 模塊。這里有三個例子，價值觀添加到AngularJS模塊：

var myModule = angular.module("myModule", []);

myModule.value（ “numberValue”，999）;

myModule.value（ “stringValue的”， “ABC”）;

myModule.value("objectValue", { val1 : 123, val2 : "abc"} );

這些值是使用value()模塊上的函數定義的。第一個參數是所述值的名稱，并且第二參數是所述值本身。工廠，服務和控制器現在可以通過它們的名字引用這些值。

注入價值

注入的值成AngularJS控制器功能是通過將參數具有相同的名稱作為值（傳遞給所述第一參數簡單地完成value()函數被定義的值時）。下面是一個例子：

var myModule = angular.module("myModule", []);

myModule.value（ “ numberValue ”，999）;

myModule.controller（ “myController的”功能（$范圍，numberValue）{

    的console.log（numberValue）;

});

通知控制器功能的第二個參數是如何具有相同的名稱作為值。

工廠

工廠是一個創造價值的函數。當服務、控制器等需要從工廠注入的值時，工廠會按需創建該值。一旦創建，該值將被重新用于所有需要注入的服務、控制器等。因此，工廠與值的不同之處在于它可以使用工廠函數來創建它返回的對象。您還可以將值注入工廠以在創建對象時使用。你不能用一個值來做到這一點。

這是一個在模塊上定義工廠的示例，以及一個獲取工廠創建值注入的控制器：

var myModule = angular.module("myModule", []);
myModule.factory("myFactory", function() {
return "a value";
});

myModule.controller("MyController", function($scope, myFactory) {
console.log(myFactory);
});

如您所見，它與定義和注入值對象非常相似。請記住，注入的不是工廠函數，而是工廠函數產生的值。

價值觀注入到工廠

您可以將值注入工廠。它的工作原理就像將值注入控制器一樣。下面是一個例子：

var myModule = angular.module("myModule", []);
myModule.value("numberValue", 999);
myModule.factory("myFactory", function(numberValue) {
return "a value: " + numberValue;
});

在這個例子中，注入的值用于創建由工廠函數創建的對象。

服務

AngularJS 中的服務是一個包含一組函數的單例 JavaScript 對象。這些函數包含服務執行其工作所需的任何邏輯。

AngularJS 服務是使用service()模塊上的函數創建的。下面是一個例子：

function MyService() {this.doIt = function() {console.log("done");}}
var myModule = angular.module("myModule", []);
myModule.service("myService", MyService);

如您所見，服務的定義與工廠和值有所不同。首先，服務被定義為一個單獨的命名函數。這是因為 AngularJS 中的服務是使用new關鍵字創建的。因此，AngularJS 將在內部執行此操作：

var theService = new MyService();

除了將服務定義為內部帶有函數的函數之外，您還可以將它們添加到 AngularJS 中并將其與 AngularJS 一起使用，就像使用值或函數一樣。您可以像這樣將服務注入控制器：

function MyService() {
    this.doIt = function() {
        console.log("done");
    }
}


var myModule = angular.module("myModule", []);

myModule.service("myService", MyService);


myModule.controller("MyController", function($scope, myService) {

    myService.doIt();

});

價值注入到服務

您可以將值注入服務，就像您可以將值注入控制器，或將服務注入控制器等。這是一個示例：

var myModule = angular.module("myModule", []);

myModule.value  ("myValue"  , "12345");

function MyService(myValue) {
    this.doIt = function() {
        console.log("done: " + myValue;
    }
}

myModule.service("myService", MyService);

注意MyService函數的參數是如何命名為與模塊上注冊的值相同的。因此，該值將在創建時注入到服務中。

provider

AngularJS 中的提供者是您可以創建的最靈活的工廠形式。您可以像使用服務或工廠一樣使用模塊注冊提供者，但您要使用該 provider()函數。這是一個 AngularJS 提供程序示例：

var myModule = angular.module("myModule", []);

myModule.provider("mySecondService", function() {
    var provider = {};

    provider.$get = function() {
        var service = {};

        service.doService = function() {
            console.log("mySecondService: Service Done!");
        }

        return service;
    }

    return provider;
});

如您所見，該provider()函數采用 2 個參數。第一個參數是提供者創建的服務/對象的名稱。在這種情況下，名稱是mySecondService。第二個參數是創建提供程序的函數。注意：提供者本身是一個工廠，因此此時沒有從提供者創建實際的服務或對象。僅定義了創建提供程序的函數。

當您查看創建提供程序的函數時，您可以看到提供程序是一個 JavaScript 對象。

JavaScript 提供程序對象包含一個$get()函數。這是提供者的工廠函數。換句話說，該$get()函數會創建提供者創建的任何內容（服務、值等）。在上面的例子中，提供者創建了一個服務對象，其中包含一個名為 的服務函數（標準 JavaScript 函數）doService()。

為了將提供者的產品注入控制器，請指定對提供者的依賴，就像使用服務一樣。注入控制器的是提供者創建的產品，而不是提供者本身。這是一個 AngularJS 提供程序注入示例：

myModule.controller("MyController", function($scope, mySecondService ) {

    $scope.whenButtonClicked = function() {
        mySecondService.doIt();
    }

});

如您所見，提供者的名稱用作控制器函數中的參數。提供者的$get()函數創建的對象將被注入到這個參數中。

配置提供商

可以在模塊的配置階段通過調用其函數來進一步配置提供者。下面是一個例子：

var myModule = angular.module("myModule", []);

myModule.provider("mySecondService", function() {
    var provider = {};
    var config   = { configParam : "default" };

    provider.doConfig = function(configParam) {
        config.configParam = configParam;
    }

    provider.$get = function() {
        var service = {};

        service.doService = function() {
            console.log("mySecondService: " + config.configParam);
        }

        return service;
    }

    return provider;
});

myModule.config( function( mySecondServiceProvider ) {
    mySecondServiceProvider.doConfig("new config param");
});

myModule.controller("MyController", function($scope, mySecondService) {

    $scope.whenButtonClicked = function() {
        mySecondService.doIt();
    }

});

注意 provider 對象現在如何有一個名為 的額外函數doConfig()。此函數可用于在提供程序上設置配置參數。

還要注意對myModule.config()函數的調用。該config函數接受一個函數作為參數。該函數可以配置模塊。傳遞給的函數 config()采用名為 的單個參數mySecondServiceProvider。這與提供者注冊的名稱相同Provider，后綴為 plus 。后綴告訴 AngularJS 注入提供者本身，而不是提供者創建的對象。在傳遞給config()函數的mySecondServiceProvider.doConfig()函數內部調用該函數，該函數在提供程序上設置 config 參數。

示例中稍后定義的控制器僅依賴于提供者創建的對象（而不是提供者本身）。它通過獲取一個名為mySecondServicename 的參數來實現，該參數是服務提供者注冊的名稱。如您所見，從$scope.whenButtonClicked()函數內部使用的服務 。

常數

在上一節有關提供程序的部分中，您看到了如何通過module.config() 函數配置提供程序。不幸的是，您不能將值注入到module.config()函數中。相反，您可以注入常量。

AngularJS 中的常量是使用module.constants()函數定義的。這是一個 AngularJS 常量示例：

myModule.constant("configValue", "constant config value");

這個常量現在可以module.config()像這樣注入到函數中：

myservices.config( function( mySecondServiceProvider, configValue ) {
    mySecondServiceProvider.doConfig(configValue);
});

如您所見，該參數configValue與常量的名稱相匹配，該名稱也是 configValue. 因此常量的值將被注入到這個參數中。然后將常量值作為參數傳遞給提供程序doConfig()上的函數 mySecondServiceProvider。

模塊之間的依賴關系

如您所見，值、工廠和服務被添加到 AngularJS 模塊中。一個模塊可以使用另一個模塊的值、工廠和服務。為此，模塊需要聲明對包含它要使用的值、工廠和服務的模塊的依賴關系。下面是一個例子：

var myUtilModule = angular.module("myUtilModule", []);

myUtilModule.value("myValue", "12345");


var myOtherModule = angular.module("myOtherModule", [ 'myUtilModule' ]);

myOtherModule.controller("MyController", function($scope, myValue ) {

});

注意第二個模塊 ( myOtherModule)如何在myUtilModule傳遞給angular.module()函數的第二個參數（數組內部）中列出第一個模塊 ( )的名稱。這告訴 AngularJS 中定義的所有值、工廠和服務也myUtilModule應該在myOtherModule模塊中可用。換句話說，myOtherModule 取決于 myUtilModule。

其次，注意MyController控制器函數現在如何聲明一個名為 的參數myValue。該值將從在myUtilModule模塊上注冊的值提供。

微小的安全依賴注入AngularJS

當您縮小 JavaScript 時，JavaScript minifier 會用較短的名稱替換局部變量和參數的名稱。然而，AngularJS 使用控制器函數、工廠、服務和提供者的參數名稱來決定將什么注入到他們的工廠函數中。如果名稱更改，AngularJS 將無法注入正確的對象。

為了使您的 AngularJS 代碼壓縮安全，您需要提供要作為字符串注入的對象的名稱。您將這些字符串與需要注入值的函數一起包裝在一個數組中。這是一個 AngularJS 壓縮安全依賴注入示例：

var myapp = angular.module("myapp", ['myservices']);

myapp.controller("AController", ['$scope', function(p1) {
    p1.myvar = "the value";
}]);

本示例將$scope對象注入到p1控制器函數的參數中。

注意控制器函數是如何注冊的。不是angular.controller直接將控制器函數傳遞給函數，而是傳遞一個數組。該數組包含要注入控制器函數的值的名稱，以及控制器函數本身。控制器函數始終是該數組中的最后一個值。如果需要注入多個值，則值名稱列在數組的開頭，并按它們要注入函數的順序列出。這是一個縮小安全的多值示例：

var myapp = angular.module("myapp", ['myservices']);

myapp.controller("AController", ['$scope', '$http', function(p1, p2) {
    p1.myvar = "the value";
    p2.get("/myservice.json");
}]);

此示例將$scope對象注入p1參數，并將$http服務注入p2控制器函數的參數。

現在，控制器函數的參數名稱不再重要。AngularJS 將使用數組開頭的字符串來確定要注入到控制器函數中的內容。

相同的機制可用于工廠、服務和提供者，以提供縮小安全的依賴注入。這是一個小型化安全工廠、服務和提供程序示例：

var myutil = angular.module("myutil", []);


myutil.value("safeValue", "a safe value");


myutil.factory("safeFactory", ['safeValue', function(p1) {
    return { value : p1 };
}]);


function MySafeService(p1){
    this.doIt = function() {
        return "MySafeService.doIt() called: " + p1.value;
    }
}
myutil.service("safeService", ['safeFactory', MySafeService]);


myutil.provider("safeService2", function() {
    var provider = {};

    provider.$get = ['safeService', function(p1) {
        var service = {};

        service.doService = function() {
            console.log("safeService from provider: " + p1.doIt());
        }

        return service;
    }];

    return provider;
});

myapp.controller("AController", ['$scope', 'safeService2', function(p1, p2) {
    p1.myvar = "the value";
    p2.doService();
}]);

尤其要注意的provider的聲明。注意，此時的依賴不會對provider工廠函數指定，但對$get()從provider工廠函數內部返回的供應商的功能。實際上，使用具有依賴項名稱和函數實現的數組而不僅僅是$get() 函數。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“AngularJS中模塊化和依賴注入的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!