1

I started working with Angular.js 2 days ago, and I'm learning really slow so I can get the knowledge about how it works really well, and not just a generally concept about Angular, so don't be so rude to me if the question is newbie :)

Basically I'm travelling in the web(tutorials, books, videos) to learn Angular, and started with Code Academy today, so I can remember the basic concepts. The thing is that when I started to learn how to define the controller it has me confused.

this is how the controller is defined on Code Academy 

app.controller('MainController',['$scope',function($scope){
  $scope.title='to your own string';
  $scope.promo='new promo here'
}]);

the controller defined in a book that i read

app.controller('FirstController', function($scope) {
  $scope.counter = 0;
  $scope.add = function(amount) { $scope.counter += amount; };
  $scope.subtract = function(amount) { $scope.counter -= amount; };
});

I can't understand the difference between these. Can someone explain it to me? Or is it just code from different versions of angular and the second code is right?

Blunderfest
  • 1,854
  • 1
  • 28
  • 46
  • [Angular docs](https://docs.angularjs.org/guide/di) is correct reference to understand it where they explained how DI work in angular, and what are the various way to have it. – Pankaj Parkar Jul 27 '16 at 19:13
  • In #2, you pass only the function. In #1, you pass an array which contains the function as the last item. The other items in the array are `string` versions of the argument names you inject in the function (Ex. `$scope`). This is for preserving the names during minification. Minification is a technique that changes variables names to shorten code. Normally that's no problem, but with angular or any injector-based framework, the variable names must be preserved because they are used to send requests to the injector. – Dan Jul 27 '16 at 19:28

4 Answers4

0

They both work and do the same thing. The first is a little more verbose as it shows the dependencies in the array before they are listed as parameters in the function. According to Google's standards, the former is preferred.

Danny Buonocore
  • 3,731
  • 3
  • 24
  • 46
  • but can you explain me the difference i think i understand the second, but the first is kinda confusing –  Jul 27 '16 at 19:15
  • The first is more technically "correct", but the second is sort of a shorthand method. Angular does a lot of work in the background to help fill in the blanks. It's also safe for minification. – Danny Buonocore Jul 27 '16 at 19:16
0

The difference is that when you have minified javascript file, second might not work. So that's why the first approach is preferred.

Imagine that you minified a file.

First approach:

app.controller('MainController', ['$scope',function(a){

Second approach:

app.controller('MainController', function(a){

How would it know what is an 'a' after minification? In first approach it knows that because you pass a string '$scope', so it knows that 'a' is a $scope.

Maciej MJ Jedrzejewski
  • 59
  • 6
0

The first way is the preferred way to do it. This is because if you do it the second way and then minify it, the $scope variable (as well as any other dependencies) will lose its meaning. So putting the dependencies as an array (the first way) allows the code to work properly when minified.

Look at this answer for more info: Angularjs minify best practice

Community
  • 1
  • 1
Ashwin Ramaswami
  • 873
  • 13
  • 22
0

Both do the same thing but there is one key difference that you noted.

The difference is that the first example defines an array of values when calling app.controller. Why pass the $scope as a string value?

Minification

What if you're creating an application that needs to be as efficient as possible so your users don't have to wait any extra milliseconds for it to download. You'll want to minify it.

Minification is a process by which the Javascript code is made as small as possible. It's possible for 500k of Javascript to be minified down to maybe 50k or 100k. This is done by removing extraneous information, comments, spaces, etc.

But in this specific case, minification will usually also change the names of parameters to something smaller.

For example, minification might change this:

Test("This is a test.");

function Test(myLongParameterNameHere) {
    console.log(myLongParameterNameHere.length)
}

to this:

a("This is a test");

function a(b) {
    console.log(b.length);
}

See how much smaller that is?

However, Angular is analyzing the exact names of the parameters. When it sees the parameter named "$scope", it knows how to add the proper $scope information to that parameter. When a minifier changes that to something else, Angular is confused.

So you can give Angular a hint by specifying an array of strings in the same order as the parameter list, like this:

app.controller('MainController',['$scope', '$timeout', '$rootScope', function($scope, $timeout, $rootScope) {
    $scope.title ='to your own string';
    $timeout(function() { console.log("Timout fired") }, 500);
    $rootScope.test = "Hello World";
}]);

After minification, this controller code might look something like this:

app.controller('MainController',['$scope', '$timeout', '$rootScope', function(a, b, c) {
    a.title ='to your own string';
    b(function() { console.log("Timout fired") }, 500);
    c.test = "Hello World";
}]);

Minifiers will not change the name of strings.

You've told Angular which parameter belongs to its specific Angular counterpart. Even after minification, Angular has the information it needs to do its dependency injection.

TL;DR

Adding the parameter names as strings in an array is entirely optional but it's necessary if you plan to do any minification on your Javascript.

Dr. Cool
  • 3,713
  • 3
  • 22
  • 26