Several ways of dependency injection in AngularJS

This article refers to AngularJsThe authoritative guide

Concept

Dependency injection is a design pattern, which can remove hardcoding of dependencies, allowing dependencies to be changed or even removed at runtime.

From a functional point of view, dependency injection will automatically search for dependencies in advance and inform the injection target of the dependent resources, so that the resources can be injected immediately when the target needs them.

AngularJS uses $injetor (injector service) to manage dependency query and instantiation.

In fact, $injetor is responsible for instantiating all components in AngularJS, including application modules, directives and controllers, etc.

At runtime, $injetor will be responsible for instantiating any module when it is started and passing all the dependencies it requires.

---

Several methods of dependency injection

1. Inferential injection statement

If there is no explicit statement, AngularJS will assume that the parameter name is dependent name.

Please note that this process only works on uncompressed and unobfuscated code, as AngularJS requires the original uncompressed parameter list for parsing.

Example: (declaring a module and a controller)

angular.module('myApp', [])
.factory('greeter', function() {
    return {
        greet: function(msg) {alert(msg);}
    }
})
.controller('MyController',function($scope, greeter) {//其中function中的greeter就是依赖注入
    $scope.sayHello = function() {
    greeter.greet("Hello!");
    };
});

<p ng-app="myApp">
    <p ng-controller="MyController">
        <button ng-click="sayHello()">Hello</button>
    </p></p>

When AngularJS instantiates this module, it will look for greeter and naturally put a reference to it Pass it in

2. Explicit injection statement

AngularJS provides an explicit method to clearly define the dependencies that a function needs to use when it is called. relation.

Declaring dependencies in this way can still work normally even if the source code is compressed and the parameter names change.

var app=angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    });function MyController(renamed$scope, renamedGreeter) {
    renamed$scope.sayHello = function() {
        renamedGreeter.greet("Hello!");
    }};
MyController.$inject = ['$scope', 'greeter'];
app.controller('MyController', MyController);//注意这个语句，我这个例子弄了半天，各种报错，就是因为这个语句少了

The parameter names we set for our function are renamed$scope and renamedGreeter, and then we use

MyController.$inject=['$scope','greeter'];

later to explicitly inject the dependencies we need into MyController In the function;

So in the MyController function, renamed

scope,MyController.

scope', 'greeter'];represents greeter

---

3. Inline injection statement

The last way of injection statement provided by AngularJS is the inline injection statement that can be used at any time.

Allows us to pass parameters in from the line when the function is defined. Additionally, it avoids the use of temporary variables during definition.

This method is actually a syntax sugar. It is exactly the same as the previously mentioned injection declaration through the $inject attribute.

Example: (With The above example is the same, only the js part has been modified)

angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    })
    .controller('MyController',  ['$scope', 'greeter', function($scope, greeter)  {
    //这里注入的方式不一样了
    //在定义一个AngularJS的对象时，行内声明的方式允许我们直接传入一个参数数组而不是一个函数。
    //数组的元素是字符串，它们代表的是可以被注入到对象中的依赖的名字，最后一个参数就是依赖注入的目标函数对象本身。
            $scope.sayHello = function() {
                greeter.greet("Hello!");
            };
        }]);

The demonstration effect is still the same, no picture is attached

Since what needs to be processed is a list of strings, inline injection statements It can also run normally in compressed code.

This article refers to the AngularJs Authoritative Guide

Concept

Dependency injection is a design pattern that can remove the hard coding of dependencies, so that Change or even remove dependencies at runtime.

From a functional point of view, dependency injection will automatically find dependencies in advance and inform the injection target of the dependent resources, so that the resources can be injected immediately when the target needs it.

AngularJS uses $injetor (injector service) to manage dependency query and instantiation.

In fact, $injetor is responsible for instantiating all components in AngularJS, including application modules, directives, and controllers.

At runtime, $injetor will be responsible for instantiating any module when it is started and passing all the dependencies it requires.

---

Several methods of dependency injection

1. Inferential injection statement

If there is no explicit statement, AngularJS will assume that the parameter name is the name of the dependency.

Please note that this process only works on uncompressed and unobfuscated code, as AngularJS requires the original uncompressed parameter list for parsing.

Example: (declaring a module and a controller)

angular.module('myApp', [])
.factory('greeter', function() {
    return {
        greet: function(msg) {alert(msg);}
    }
})
.controller('MyController',function($scope, greeter) {//其中function中的greeter就是依赖注入
    $scope.sayHello = function() {
    greeter.greet("Hello!");
    };
});

<p ng-app="myApp">
    <p ng-controller="MyController">
        <button ng-click="sayHello()">Hello</button>
    </p></p>

When AngularJS instantiates this module, it will look for greeter and naturally put a reference to it Pass it in

2. Explicit injection statement

AngularJS provides an explicit method to clearly define the dependencies that a function needs to use when it is called.

Declaring dependencies in this way can still work normally even if the source code is compressed and the parameter names change.

var app=angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    });function MyController(renamed$scope, renamedGreeter) {
    renamed$scope.sayHello = function() {
        renamedGreeter.greet("Hello!");
    }};
MyController.$inject = ['$scope', 'greeter'];
app.controller('MyController', MyController);//注意这个语句，我这个例子弄了半天，各种报错，就是因为这个语句少了

The parameter names we set for our function are renamed$scope and renamedGreeter, and then we use

MyController.$inject=['$scope','greeter'];

later to explicitly inject the dependencies we need into MyController In the function;

So in the MyController function, renamed

scope,MyController.

scope', 'greeter'];represents greeter

---

3. Inline injection statement

The last way of injection statement provided by AngularJS is the inline injection statement that can be used at any time.

Allows us to pass parameters in from the line when the function is defined. Furthermore, it avoids the use of temporary variables during definition.

This method is actually a syntactic sugar. It is exactly the same as the previously mentioned injection declaration through the $inject attribute.

Example: (With The above example is the same, only the js part is modified)

angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    })
    .controller('MyController',  ['$scope', 'greeter', function($scope, greeter)  {
    //这里注入的方式不一样了
    //在定义一个AngularJS的对象时，行内声明的方式允许我们直接传入一个参数数组而不是一个函数。
    //数组的元素是字符串，它们代表的是可以被注入到对象中的依赖的名字，最后一个参数就是依赖注入的目标函数对象本身。
            $scope.sayHello = function() {
                greeter.greet("Hello!");
            };
        }]);

Since what needs to be processed is a list of strings, inline injection statements can also run normally in the compressed code.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the data binding process of $watch, $apply and $digest

Using localStorage of Html5 Detailed explanation

AJAX cross-domain knowledge

The above is the detailed content of Several ways of dependency injection in AngularJS. For more information, please follow other related articles on the PHP Chinese website!