0

There is something that i don't understand with Angular. I'm new to Angular, and i don't remember where but the tutorial that teached me used this syntax do apply properties to a controller's scope :

app.controller('someCtrl', function(){
        this.variable = "hey!";
});

So, i was starting my web app, everything was fine, then i wanted to add some socket.io interactivity with my node.js server. So i was looking for some tutorials on how to make them work together i was confronted to this syntax :

app.controller('someCtrl', ['$scope', function($scope){
        $scope.variable = "hey!";
}]);

I thought it was weird, so i looked into Angular's articles about dependency injection and scopes, i found that it was actually the way everyone is doing it... I also started to see that it allows you to interact with $rootScope and other stuff, which is i guess the way to make controllers interact with each other. But i still don't see the difference between the two. Is the first one one which is used to teach people the basics of angular in order to easily introduce them to the scope and dependency injection concepts ?

Thanks in advance for your answer.

Devz
  • 563
  • 7
  • 23
  • 1
    This might help: http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers – Juan Stiza Feb 16 '16 at 19:38
  • @JuanStiza it did. thanks a lot ! – Devz Feb 16 '16 at 19:50
  • actually general consensus of preffered method is using the first one ... `controllerAs` syntax in the controller using `this`. As for injection array that is needed for minification – charlietfl Feb 16 '16 at 19:52

2 Answers2

2

Yes, that is confusing as hell and I wish the Angular guys would only use the second. The first one is easier to read and understand for any JS developer, however the docs used to state (AFAIK, that is gone from the docs now):

Previous versions of Angular (pre 1.0 RC) allowed you to use this interchangeably with the $scope method, but this is no longer the case. Inside of methods defined on the scope this and $scope are interchangeable (angular sets this to $scope), but not otherwise inside your controller constructor.

Since some versions, the second syntax (which injects $scope via dependency injection) is typically used, even if it is somewhat frightening to newbies, what with the array in the function variable list (which is needed for minification) and all.

The situation gets worse, though, because lately this makes a comeback in slightly different form, the "controller as" syntax:

HTML

<div ng-controller="MainController as main">  
  {{ main.someProp }}
</div>

Javascript

app.controller('MainController', function () {  
  var model = this;
  model.someProp = 'Some value.'
});

So, most likely what you read is the "controller as" syntax that is currently pushing back more and more the second, dependency injection form. You can differentiate it from old examples if you look at the HTML to find XxxController as yyyy.

Typically, you don't work with this all the time in your controller's functions since the scoping of this in Javascript can easily introduce bugs. Therefore it is preferable to assign this to some local variable immediately and then work with that variable (model in my example) like you would with $scope.

TL;DR: work with the "controller as" syntax to be future-proof, but know until recently, the best practice was injecting $scope.

Johannes Jander
  • 4,974
  • 2
  • 31
  • 46
0

Basically, You should directly inject the $scope as a dependency to avoid minification problems.

When doing a minification, $scope will be translated into e and Angular will not know how to use e itself.

var app=angular.module("myApp",[]);app.controller("mainController",function(e){e.message="OH NO!"})

When directly injecting the dependency as you shown, $scope will not be renamed in any other way, so Angular will know how to handle it.

Take a look at this article on Scotch.io

I hope I've been helpful.

AndreaM16
  • 3,917
  • 4
  • 35
  • 74