CODEWITHSUNDEEP
javascriptangularjsdependency-injection
jsh6303
jsh6303

Reputation: 2040

What is the meaning of the square brackets in ".config([...])" in dependency injection 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 come from different version of AngularJS?

Upvotes: 3

Views: 1417

Answers (3)

Laxmikant Dange
Laxmikant Dange

Reputation: 7688

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 become

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 become

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.

Upvotes: 4

machinehead115
machinehead115

Reputation: 1657

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.

Upvotes: 3

plamut
plamut

Reputation: 3206

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

Upvotes: 2

Related Questions