AngularJS의 모듈화 및 종속성 주입에 대해 자세히 알아보세요.-JS 튜토리얼-php.cn

AngularJS의 모듈화 및 종속성 주입에 대해 자세히 알아보세요.

AngularJS에는 종속성 주입 메커니즘이 내장되어 있습니다. AngularJS가 각각에 주입할 수 있는 다양한 유형의 여러 구성 요소로 애플리케이션을 나눌 수 있습니다. 애플리케이션을 모듈화하면 애플리케이션 테스트 구성 요소를 더 쉽게 재사용하고 구성할 수 있습니다. [관련 튜토리얼 권장 사항: "angular Tutorial"]

AngularJS에는 다음과 같은 핵심 유형의 객체 및 구성 요소가 포함되어 있습니다.

Value
Factory
Service
Provider
Continuous

이러한 핵심 유형을 주입할 수 있습니다. AngularJS 종속성 주입 메커니즘을 사용하여 서로 연결합니다. 이 기사의 나머지 부분에서는 이러한 구성 요소를 정의하고 서로 주입하는 방법을 설명하겠습니다.

Value

AngularJS의 Value는 간단한 객체입니다. 숫자, 문자열 또는 JavaScript 개체일 수 있습니다. 값은 일반적으로 공장, 서비스 또는 컨트롤러에 주입하기 위한 구성으로 사용됩니다.

값은 AngularJS 모듈에 속해야 합니다. 다음은 AngularJS 모듈에 추가된 값의 세 가지 예입니다.

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

myModule.value（ “numberValue”，999）;

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

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

로그인 후 복사

값은 모듈의 value() 함수를 사용하여 정의됩니다. 첫 번째 매개변수는 값의 이름이고, 두 번째 매개변수는 값 자체입니다. 이제 팩토리, 서비스 및 컨트롤러는 이름으로 이러한 값을 참조할 수 있습니다. 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

🎜값 주입 🎜🎜🎜 AngularJS 컨트롤러 함수에 값 주입은 값과 동일한 이름의 매개변수를 전달하여 수행됩니다. (첫 번째 매개변수로 전달되어 value() 함수가 정의될 때 값을 완성합니다.) 예는 다음과 같습니다. 🎜

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

로그인 후 복사

🎜함수의 두 번째 매개변수가 값과 동일한 이름을 가지고 있음을 컨트롤러에 알립니다. 🎜🎜🎜🎜🎜

🎜Factory🎜🎜🎜Factory는 가치를 창출하는 기능입니다. 서비스, 컨트롤러 등이 공장에서 주입된 가치를 요구할 때 공장은 요청에 따라 가치를 생성합니다. 일단 생성되면 이 값은 주입이 필요한 모든 서비스, 컨트롤러 등에 재사용됩니다. 따라서 팩토리는 팩토리 함수를 사용하여 반환되는 객체를 생성할 수 있다는 점에서 값과 다릅니다. 객체를 생성할 때 사용할 값을 팩토리에 주입할 수도 있습니다. 값으로는 이 작업을 수행할 수 없습니다. 🎜🎜다음은 모듈에 팩토리를 정의하는 예와 팩토리 생성 값을 주입하는 컨트롤러입니다. 🎜

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

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

});

로그인 후 복사

🎜보시다시피 값 개체를 정의하고 주입하는 것과 매우 유사합니다. 주입되는 것은 팩토리 함수가 아니라 팩토리 함수에 의해 생성된 값이라는 점을 기억하십시오. 🎜🎜🎜🎜🎜🎜🎜팩토리에 주입된 값 🎜🎜🎜팩토리에 값을 주입할 수 있습니다. 이는 컨트롤러에 값을 주입하는 것과 동일하게 작동합니다. 예는 다음과 같습니다. 🎜

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

});

로그인 후 복사

🎜 이 예에서는 주입된 값을 사용하여 팩토리 함수로 생성된 객체를 생성합니다. 🎜🎜🎜🎜🎜

🎜Services🎜🎜🎜AngularJS의 서비스는 일련의 함수를 포함하는 싱글톤 JavaScript 개체입니다. 이러한 함수에는 서비스가 해당 작업을 수행하는 데 필요한 논리가 포함되어 있습니다. 🎜🎜AngularJS 서비스는 service() 모듈의 함수를 사용하여 생성됩니다. 예를 들면 다음과 같습니다. 🎜

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

로그인 후 복사

🎜보시다시피 서비스의 정의는 공장 및 가치와 다릅니다. 첫째, 서비스는 단일 이름의 함수로 정의됩니다. 이는 AngularJS의 서비스가 new 키워드를 사용하여 생성되기 때문입니다. 따라서 AngularJS는 내부적으로 이 작업을 수행합니다. 🎜

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

로그인 후 복사

🎜서비스를 내부 함수가 포함된 함수로 정의하는 것 외에도 값이나 함수를 사용하는 것처럼 서비스를 추가하고 AngularJS와 함께 사용할 수도 있습니다. 다음과 같이 컨트롤러에 서비스를 삽입할 수 있습니다. 🎜

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

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


var myOtherModule = angular.module("myOtherModule", [ &#39;myUtilModule&#39; ]);

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

});

로그인 후 복사

🎜🎜🎜🎜🎜🎜Value into a service🎜🎜🎜 서비스는 컨트롤러에 값을 주입하거나 컨트롤러 등에 서비스를 주입할 수 있는 것과 같습니다. 예는 다음과 같습니다. 🎜

var myapp = angular.module("myapp", [&#39;myservices&#39;]);

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

로그인 후 복사

🎜 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", [ &#39;myUtilModule&#39; ]);

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", [&#39;myservices&#39;]);

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

로그인 후 복사

本示例将$scope对象注入到p1控制器函数的参数中。

注意控制器函数是如何注册的。不是angular.controller直接将控制器函数传递给函数，而是传递一个数组。该数组包含要注入控制器函数的值的名称，以及控制器函数本身。控制器函数始终是该数组中的最后一个值。如果需要注入多个值，则值名称列在数组的开头，并按它们要注入函数的顺序列出。这是一个缩小安全的多值示例：

var myapp = angular.module("myapp", [&#39;myservices&#39;]);

myapp.controller("AController", [&#39;$scope&#39;, &#39;$http&#39;, 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", [&#39;safeValue&#39;, function(p1) {
    return { value : p1 };
}]);


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


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

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

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

        return service;
    }];

    return provider;
});

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

로그인 후 복사

尤其要注意的provider的声明。注意，此时的依赖不会对provider工厂函数指定，但对$get()从provider工厂函数内部返回的供应商的功能。实际上，使用具有依赖项名称和函数实现的数组而不仅仅是$get() 函数。

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

위 내용은 AngularJS의 모듈화 및 종속성 주입에 대해 자세히 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!