Newbie: Help understanding AngularJS/Javascript syntax

Question

I have been reading AngularJS code and trying to make sense out of the argument passed to the .config method. From the sample below, it appears to be passing [ ] to .config. The part that perplexes me is that according to angular.Module documentation on docs.angularjs.org, the method config, takes configFn as a parameter which is a function. So why in following example I see that ['$routeProvider', function(..) { .. }] being passed as the argument? Can someone help clarify my confusion?

var sampleApp = angular.module('phonecatApp', []);

sampleApp .config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/addOrder', {
        templateUrl: 'templates/add-order.html',
        controller: 'AddOrderController'
      }).
      when('/showOrders', {
        templateUrl: 'templates/show-orders.html',
        controller: 'ShowOrdersController'
      }).
      otherwise({
        redirectTo: '/addOrder'
      });
  }]);

Read about dependency annotations: docs.angularjs.org/guide/di#dependency-annotation Short answer: since minifiers renames the function parameters names, you can use array to tell Angular what service in what order should be injected (minifiers don't rename array elements strings). — dfsq
– dfsq, Commented Nov 16, 2014 at 8:05
And you shouldn't be doing this by hand. If you run a minification process in a task runner (gulp/grunt) then you could add the annotations in the same task. Look into ng-annotate — JimL
– JimL, Commented Nov 16, 2014 at 8:20

son_cativo · Accepted Answer · 2014-11-16 08:36:13Z

3

The array notation is used in order to avoid problems with the injected modules when minificate the js files for production. Since the strings don't be minificated, passing the '$routeProvider' as a string in the array is a convention in Angularjs.

answered Nov 16, 2014 at 8:36

son_cativo

412 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nick Tsitlakidis · Accepted Answer · 2014-11-16 13:27:28Z

0

You would have the same result if you didn't pass the string parameter and only passed the function. The code would work but you would have problems when you tried to minify your application.

A minifier will rename the parameters of a function so Angular would have no way to understand what your dependency is.

You solve this by passing an array with the names of the parameters in the same order the function expects them.

This is happening not only in the config function but everywhere you need to inject dependencies.

answered Nov 16, 2014 at 13:27

Nick Tsitlakidis

2,5094 gold badges23 silver badges27 bronze badges

Collectives™ on Stack Overflow

Newbie: Help understanding AngularJS/Javascript syntax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related