javascript - What is the meaning of the square brackets in ".config([...])" in dependency injection of Angular

admin管理员组

文章数量:1432640

Just read the Dependency Injection of AngularJS documentation and development guide about dependency injection. The syntax is very different from what I read previously.

I was confused from factory methods and module methods, the very beginning of the dependency injection documentation.

An example of what I read from the documentation is shown:

angular.module('myModule', [])
.config(['depProvider', function(depProvider) {
  // ...
}])
.run(['depService', function(depService) {
  // ...
}])

As there is no detail implementation, it was difficult for me to understand the syntax, especially the example that I previously read of .config does not have square brackets upon declaration.

I would like to know the meaning of square brackets in .factory, .directive, .config and the meaning of the whole syntax. This is entirely different from the example I read previously (shown below as an example of .config)

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider 
//which defines a method square to return square of a number.
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

Is it because of the two examples e from different version of AngularJS?

Just read the Dependency Injection of AngularJS documentation and development guide about dependency injection. The syntax is very different from what I read previously.

I was confused from factory methods and module methods, the very beginning of the dependency injection documentation.

An example of what I read from the documentation is shown:

angular.module('myModule', [])
.config(['depProvider', function(depProvider) {
  // ...
}])
.run(['depService', function(depService) {
  // ...
}])

As there is no detail implementation, it was difficult for me to understand the syntax, especially the example that I previously read of .config does not have square brackets upon declaration.

I would like to know the meaning of square brackets in .factory, .directive, .config and the meaning of the whole syntax. This is entirely different from the example I read previously (shown below as an example of .config)

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider 
//which defines a method square to return square of a number.
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

Is it because of the two examples e from different version of AngularJS?

• javascript
• angularjs
• dependency-injection

Share Improve this question Follow asked Aug 12, 2015 at 13:29 jsh6303jsh6303 2,04044 gold badges2626 silver badges5151 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Using array is best approach if you are minifying your js file. For example Here are two samples.

mainApp.config(function($provide){});

After minification, this will bee

mainApp.config(function(a){});

As there is no any angular dependency named a, Angular will throw error here.

The solution to this problem is alias. Use array notation, Define dependency in string format, and use that dependency with any name as variable in method.

When you use this

mainApp.config(['$provide', function($provide){}]);

After minification, it will bee

mainApp.config(['$provide', function(a){}]);

As string can't be minified in minification process, the dependency name remains unchanged. And your application work also after minification of js files.

You can write it two different ways and the difference is for minification of files.

mainApp.config(function($provide){});

When you minify a file you give it a reference, the quoted value before the function, so the dependencies can be referenced after the minification.

mainApp.config(['$provide', function($provide){}]);

You can learn more about Dependency Injection and minification here.

It is a way to prevent problems that can occur if scripts are minified in production environment. Angular relies on parameter names to find and inject the correct dependencies into you controllers, services etc., but if these arguments are renamed, Angular is not able to locate the dependencies anymore.

With array syntax, all the dependencies are first listed as strings, and because they represent array data, they are left untouched by the code minification tools.

Also check the documentation for more details (the Dependency Annotation section).

FWIW, an alternative way to array syntax that is also resistant to minification is using the $inject property. Example from the docs:

MyController.$inject = ['$scope', 'greeter'];
someModule.controller('MyController', MyController);

本文标签：