angular syntax for creating services and controllers

Question

I've been reading about angular a lot to learn some best practices to apply in an application I'm working on. I went through a section that talks about minifying the javascript and how the following syntax is preferred:

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

myApp.controller('Controller', ['$scope', function($scope) {
  //code
}]);

however, I've also heard from a couple of people that the following syntax is preferred:

var myApp = angular.module('myApp', []);
function ControllerOne($scope) {
 //code
}
myApp.controller('ControllerOne', ControllerOne)

my first question is, in the second example, when the controller is registered and a string is passed as a parameter, then the function named "controllerOne", does this have the same benefit (as far as minifying) as passing the array in the first example?

my second question is, is one of the top approaches preferred over the other or is this a case of 'what you're more comfortable with'?

Looking at it now I can see how the second approach could be more flexible because the function is free from the actual controller and may be reused, whereas the first example the code is specific to that specific controller because its declared as part of the array. Is this correct?

Answer 1

1. Registering controller name as a string has no effect on minification. Passing your dependencies does have an effect. You need to pass them in minification safe way. You can also use $inject service to inject dependencies.

2. To get all the best approaches to write Angular code, follow John Papa's Angular style guide

https://github.com/johnpapa/angular-styleguide

Answer 2

Have you tried Google's closure(https://developers.google.com/closure/)? The @ngInject in the jsdoc should take care of the minification quite well. I use closure on a day to day basis and I must say that it is quite robust. The learning curve is quite steep in the beginning, but eventually, you will start loving it

Answer 3

Second example is too much different to be compared. It is not injecting $scope and supposes "ControllerAs" syntax in template.

I consider all this fuss about array injection syntax for controllers is redundant. If you're using minification make use of ng-annotate and make your code as clear as possible. Because supporting/fixing code is more expensive then writing it and much more then making computer do any kind of automation over it.

Answer 4

1. Using inline declaration (option one) is totally for correctness after minifying.

   Please noted that all injectables are defined and cached on some space of the module.

   • Option two, minifying tools are likely to rename the function argument $scope to some shorter name, such as s, which is not defined in the module definition.
   • Option one: Angular will take the String $scope, find its definition on the scope, then run something like s = $scope, finally run the controller. So call injection.

2. Always use option one.

You may want to use option one, minimize the code, and then see what will happen.