Tauchen Sie tief in die Modularisierung und Abhängigkeitsinjektion in AngularJS ein

AngularJS verfügt über einen integrierten Abhängigkeitsinjektionsmechanismus. Sie können Ihre Anwendung in mehrere Komponenten unterschiedlichen Typs aufteilen, die AngularJS in jede integrieren kann. Durch die Modularisierung Ihrer Anwendung können Sie Komponenten einfacher wiederverwenden, konfigurieren und testen. [Verwandte Tutorial-Empfehlung: „Angular Tutorial“]

AngularJS enthält die folgenden Kerntypen von Objekten und Komponenten:

• Value
• Factory
• Service
• Provider
• Continuous

Diese Kerntypen können injiziert werden untereinander mithilfe des AngularJS-Abhängigkeitsinjektionsmechanismus. Im weiteren Verlauf dieses Artikels werde ich erklären, wie diese Komponenten definiert und ineinander injiziert werden.

Wert

Wert in AngularJS ist ein einfaches Objekt. Es kann eine Zahl, ein String oder ein JavaScript-Objekt sein. Werte werden typischerweise als Konfiguration verwendet, um sie in Fabriken, Dienste oder Controller einzufügen.

Ein Wert muss zu einem AngularJS-Modul gehören. Hier sind drei Beispiele für Werte, die AngularJS-Modulen hinzugefügt werden:

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

myModule.value（ “numberValue”，999）;

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

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

Die Werte werden mithilfe der Funktion value() im Modul definiert. Der erste Parameter ist der Name des Werts und der zweite Parameter ist der Wert selbst. Fabriken, Dienste und Controller können nun mit ihren Namen auf diese Werte verweisen. 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

🎜Wert einfügen 🎜🎜🎜Das Einfügen eines Werts in eine AngularJS-Controller-Funktion erfolgt durch Übergeben des Parameters mit demselben Namen wie der Wert (übergeben an Das erste Argument vervollständigt einfach den Wert, wenn die Funktion value() definiert ist). Hier ist ein Beispiel: 🎜

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;
});

🎜Benachrichtigen Sie den Controller darüber, dass der zweite Parameter der Funktion denselben Namen wie der Wert hat. 🎜🎜🎜🎜🎜

🎜Factory🎜🎜🎜Factory ist eine Funktion, die Wert schafft. Wenn ein Dienst, Controller usw. einen von der Fabrik eingegebenen Wert benötigt, erstellt die Fabrik den Wert bei Bedarf. Nach der Erstellung wird dieser Wert für alle Dienste, Controller usw. wiederverwendet, die eingefügt werden müssen. Eine Factory unterscheidet sich also von einem Wert dadurch, dass sie eine Factory-Funktion verwenden kann, um das von ihr zurückgegebene Objekt zu erstellen. Sie können auch Werte in die Factory einfügen, um sie beim Erstellen von Objekten zu verwenden. Mit einem Wert ist das nicht möglich. 🎜🎜Hier ist ein Beispiel für die Definition einer Fabrik auf einem Modul und eines Controllers, der den von der Fabrik erstellten Wert injiziert: 🎜

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

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

});

🎜Wie Sie sehen können, ist es der Definition und Injektion von Wertobjekten sehr ähnlich. Denken Sie daran, dass nicht die Factory-Funktion eingefügt wird, sondern der von der Factory-Funktion erzeugte Wert. 🎜🎜🎜🎜🎜🎜🎜In Fabriken eingespeiste Werte 🎜🎜🎜Sie können Fabriken Werte einspeisen. Es funktioniert genauso wie das Einfügen von Werten in den Controller. Hier ist ein Beispiel: 🎜

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();
    }

});

🎜 In diesem Beispiel wird der injizierte Wert verwendet, um das von der Factory-Funktion erstellte Objekt zu erstellen. 🎜🎜🎜🎜🎜

🎜Dienste🎜🎜🎜Ein Dienst in AngularJS ist ein Singleton-JavaScript-Objekt, das eine Reihe von Funktionen enthält. Diese Funktionen enthalten jegliche Logik, die der Dienst zur Ausführung seiner Aufgabe benötigt. 🎜🎜AngularJS-Dienste werden mithilfe von Funktionen im Modul service() erstellt. Hier ein Beispiel: 🎜

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

🎜Wie Sie sehen, unterscheidet sich die Definition von Dienstleistungen von Fabriken und Werten. Zunächst wird der Dienst als einzelne benannte Funktion definiert. Dies liegt daran, dass Dienste in AngularJS mit dem Schlüsselwort new erstellt werden. Also wird AngularJS dies intern tun: 🎜

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

🎜Zusätzlich zur Definition von Diensten als Funktionen mit darin enthaltenen Funktionen können Sie diese auch hinzufügen und mit AngularJS verwenden, genau wie die Verwendung von Werten oder Funktionen. Sie können einen Dienst wie folgt in einen Controller einfügen: 🎜

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

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


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

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

});

🎜🎜🎜🎜🎜🎜Wert in einen Dienst🎜🎜🎜Sie können einen Wert in a einfügen Dienst, genau wie Sie Werte in Controller einfügen können oder Dienste in Controller usw. einfügen können. Hier ist ein Beispiel: 🎜

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

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

🎜 Beachten Sie, dass die Parameter der Funktion MyService denselben Namen haben wie die im Modul registrierten Werte. Daher wird dieser Wert bei der Erstellung in den Dienst eingefügt. 🎜🎜🎜🎜🎜

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() 函数。

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonTauchen Sie tief in die Modularisierung und Abhängigkeitsinjektion in AngularJS ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!