Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of modularization and dependency injection in AngularJS, which has a certain reference value, and interested friends can refer to it. I hope you can learn a lot after reading this article.

AngularJS has a built-in dependency injection mechanism. You can divide your application into several different types of AngularJS that can be injected into each of the components. Modularizing your application makes it easier to reuse, configure, and test components.

AngularJS contains the following core types of objects and components:

Value

Factory

Service

Provider

Continuous

These core types can be injected into each other using the AngularJS dependency injection mechanism. Throughout the rest of this article, I will explain how to define and inject these components into each other.

Value

The value in AngularJS is a simple object. It can be a number, a string or a JavaScript object. Value is typically used as the configuration of the injection factory, service, or controller.

A value must belong to an AngularJS module. Here are three examples where values are added to the AngularJS module:

Var myModule = angular.module ("myModule", []); myModule.value ("numberValue", 999); myModule.value ("stringValue", "ABC"); myModule.value ("objectValue", {val1: 123, val2: "abc"})

These values are defined using functions on the value () module. The first parameter is the name of the value, and the second parameter is the value itself. Factories, services, and controllers can now refer to these values by their names.

Injected value

The injected value into AngularJS controller function is by passing the parameter with the same name as the value (when passing to the first parameter to simply complete the value defined by the value () function). Here is an example:

Var myModule = angular.module ("myModule", []); myModule.value ("numberValue", 999); myModule.controller ("myController" function ($range, numberValue) {console.log (numberValue);})

The second parameter of the notify controller function is how to have the same name as the value.

Factory

The factory is a function of creating value. When a value needs to be injected from the factory for services, controllers, and so on, the factory creates the value as needed. Once created, this value will be reused for all services, controllers, and so on that need to be injected. Therefore, the difference between a factory and a value is that it can use the factory function to create the objects it returns. You can also inject values into the factory for use when creating objects. You can't do that with a value.

This is an example of defining a factory on a module and a controller that gets the injection of the factory creation value:

Var myModule = angular.module ("myModule", []); myModule.factory ("myFactory", function () {return "a value";}); myModule.controller ("MyController", function ($scope, myFactory) {console.log (myFactory);})

As you can see, it is very similar to defining and injecting value objects. Remember, it is not the factory function that is injected, but the value produced by the factory function.

Values are injected into the factory

You can inject values into the factory. It works like injecting values into a controller. Here is an example:

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

In this example, the injected value is used to create an object created by the factory function.

Service

A service in AngularJS is a singleton JavaScript object that contains a set of functions. These functions contain any logic that the service needs to perform its work.

The AngularJS service is created using functions on the service () module. Here is an example:

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

As you can see, the definition of a service is different from the factory and value. First, the service is defined as a separate named function. This is because services in AngularJS are created using the new keyword. Therefore, AngularJS will do this internally:

Var theService = new MyService ()

In addition to defining services as functions with internal functions, you can add them to AngularJS and use them with AngularJS, just as you would with values or functions. You can inject services into the controller like this:

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

Inject value into services

You can inject values into the service, just as you can inject values into the controller, or inject the service into the controller, and so on. This is an example:

Var myModule = angular.module ("myModule", []); myModule.value ("myValue", "12345"); function MyService (myValue) {this.doIt = function () {console.log ("done:" + myValue;}} myModule.service ("myService", MyService)

Notice how the parameter of the MyService function is named the same as the value registered on the module. Therefore, this value will be injected into the service at creation time.

Provider

The provider in AngularJS is the most flexible factory form you can create. You can use the module to register the provider as if you were using a service or factory, but you want to use the provider () function. This is an example of an AngularJS provider:

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

As you can see, the provider () function takes two parameters. The first parameter is the name of the service / object created by the provider. In this case, the name is mySecondService. The second parameter is the function that creates the provider. Note: the provider itself is a factory, so no actual service or object is created from the provider at this time. Only the functions that create the provider are defined.

When you look at the function that created the provider, you can see that the provider is a JavaScript object.

The JavaScript provider object contains a $get () function. This is the provider's factory function. In other words, the $get () function creates whatever the provider creates (services, values, and so on). In the above example, the provider creates a service object that contains a service function named (standard JavaScript function) doService ().

To inject the provider's product into the controller, specify a dependency on the provider, just as you would with a service. It is the product created by the provider, not the provider itself, that injects the controller. This is an example of AngularJS provider injection:

MyModule.controller ("MyController", function ($scope, mySecondService) {$scope.whenButtonClicked = function () {mySecondService.doIt ();}})

As you can see, the name of the provider is used as a parameter in the controller function. The object created by the provider's $get () function will be injected into this parameter.

Configuration provider

You can further configure the provider by calling its function during the configuration phase of the module. Here is an example:

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

Notice how the provider object now has an extra function called doConfig (). This function can be used to set configuration parameters on the provider.

Also note the call to the myModule.config () function. The config function takes a function as an argument. This function can configure the module. The function config () passed to takes a single argument named mySecondServiceProvider. This is the same name registered by the provider as Provider, with the suffix plus. The suffix tells AngularJS to inject the provider itself, not the object created by the provider. This function is called inside the mySecondServiceProvider.doConfig () function passed to the config () function, which sets the config parameter on the provider.

The controller defined later in the example depends only on the objects created by the provider (not the provider itself). It is achieved by getting a parameter called mySecondServicename, which is the name registered by the service provider. As you can see, the service is used inside the $scope.whenButtonClicked () function.

Constant

In the previous section on providers, you saw how to configure providers through the module.config () function. Unfortunately, you cannot inject values into the module.config () function. Instead, you can inject constants.

Constants in AngularJS are defined using the module.constants () function. This is an example of an AngularJS constant:

MyModule.constant ("configValue", "constant config value")

This constant can now be injected into the function by module.config () like this:

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

As you can see, the parameter configValue matches the name of the constant, which is also configValue. Exe. So the value of the constant will be injected into this parameter. The constant value is then passed as an argument to the function mySecondServiceProvider on the provider doConfig ().

Dependencies between modules

As you can see, values, factories, and services are added to the AngularJS module. One module can use the values, factories, and services of another module. To do this, the module needs to declare dependencies on the module that contains the values, factories, and services it wants to use. Here is an example:

Var myUtilModule = angular.module ("myUtilModule", []); myUtilModule.value ("myValue", "12345"); var myOtherModule = angular.module ("myOtherModule", ['myUtilModule']); myOtherModule.controller ("MyController", function ($scope, myValue) {})

Notice how the second module (myOtherModule) lists the name of the first module () in the second parameter (inside the array) passed by myUtilModule to the angular.module () function. This tells you that all values, factories, and services defined in AngularJS should also be available in the myOtherModule module. In other words, myOtherModule depends on myUtilModule.

Second, notice how the MyController controller function now declares a parameter named myValue. This value will be provided from the value registered on the myUtilModule module.

Tiny security dependency injection AngularJS

When you shrink the JavaScript, JavaScript minifier replaces the names of local variables and parameters with shorter names. However, AngularJS uses the parameter names of controller functions, factories, services, and providers to determine what to inject into their factory functions. If the name changes, AngularJS will not be able to inject the correct object.

To make your AngularJS code compression secure, you need to provide the name of the object to be injected as a string. You wrap these strings in an array with functions that need to inject values. This is an example of AngularJS compression security dependency injection:

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

This example injects the $scope object into the parameters of the p1 controller function.

Notice how the controller function is registered. Instead of passing the controller function directly to the function, angular.controller passes an array. The array contains the name of the value to be injected into the controller function, as well as the controller function itself. The controller function is always the last value in the array. If multiple values need to be injected, the value names are listed at the beginning of the array and listed in the order in which they want to inject functions. This is a multi-valued example of narrowing security:

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

This example injects the $scope object into the p1 parameter and the $http service into the parameters of the p2 controller function.

Now, the parameter name of the controller function is no longer important. AngularJS will use the string at the beginning of the array to determine what to inject into the controller function.

The same mechanism can be used for factories, services, and providers to provide dependency injection that reduces security. This is an example of a miniaturized security factory, service, and provider:

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

Pay particular attention to provider's statement. Note that the dependency at this time is not specified for the provider factory function, but for the vendor's functionality returned from the provider factory function for $get (). In fact, use an array with dependency names and function implementations, not just the $get () function.

Thank you for reading this article carefully. I hope the article "sample Analysis of Modularization and dependency injection in AngularJS" shared by the editor will be helpful to you. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.