current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 1 down vote favorite

I recently read in angular documentation (https://code.angularjs.org/1.4.9/docs/guide/providers) this:

myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
  this.clientId = clientId;
}]);

associated to:

<html ng-app="myApp">
  <body ng-controller="DemoController as demo">
    Client ID: {{demo.clientId}}
  </body>
</html>

Then I was surprised because this was used instead of an injected $scope service.

I tried to reproduce with success, then I'm wondering if someone could explain one use-case where using controller instance is preferable to injected $scope?

share|improve this question
up vote 3 down vote accepted

See John Papa's style guide about controllerAs:

... the controllerAs syntax is closer to that of a JavaScript constructor than the classic $scope syntax

It promotes the use of binding to a "dotted" object in the View (e.g. customer.name instead of name), which is more contextual, easier to read, and avoids any reference issues that may occur without "dotting".

Helps avoid using $parent calls in Views with nested controllers.

The biggest benefit I've found in my general day-to-day use of this is the fact that it provides a concept of namespacing in controllers instead of just having this feeling of "free variables" roaming around your markup.

That's especially important if you have nested controllers, because it provides a way to namespace variables (even ones with the same name), but ensure they are in the context of the correct controller.

share|improve this answer
    
For namespacing variables on scope I'm using object hierarchy: $scope.mynamespace = {var1: 5, var2: 6}; for example. – G. Ghez yesterday
    
@G.Ghez you're doing exactly what controllerAs does under the hood :) – Josh Beam yesterday
    
@G.Ghez, if you look at the Angular source code, you'll see that controllerAs is just a convenient way of doing $scope.<someNameSpace> – Josh Beam yesterday
    
It also provides dot notation out of the box so variables maintain reference – Sha Alibhai yesterday
    
I may agree, but then, could we just stop using $scope in favor of controller instance? I'm wondering about $scope.$watch, .$on... – G. Ghez 12 hours ago
up vote 1 down vote

Why it's better to use controller as is well described in this guide.

Why?: Controllers are constructed, "newed" up, and provide a single new instance, and the controllerAs syntax is closer to that of a JavaScript constructor than the classic $scope syntax.

Why?: It promotes the use of binding to a "dotted" object in the View (e.g. customer.name instead of name), which is more contextual, easier to read, and avoids any reference issues that may occur without "dotting".

Why?: Helps avoid using $parent calls in Views with nested controllers.

It's best however to use a specialized variable to access controller instance:

myApp.controller('DemoController', ['clientId', '$scope', function DemoController(clientId, $scope) {
  var self = this;
  self.clientId = clientId;

  //to watch the vars
  $scope.$watch('self.clientId', function(new, old) {});
}]);
share|improve this answer
    
where $scope here is coming from? ;) – G. Ghez 12 hours ago
    
Also, I think, watcher should be applied to clientId only, not self.clientId – G. Ghez 11 hours ago
    
@G.Ghez Nope, the self.clientId is correct. Please check this section: github.com/johnpapa/angular-styleguide#controlleras-with-vm – Dmitri Pavlutin 11 hours ago
    
Then I have another concern explained in another question here: stackoverflow.com/questions/35483905/… – G. Ghez 7 hours ago
1  
@G.Ghez Yep, answered. The self should be used as the alias of the controller in the view: ng-controller="controller as self". – Dmitri Pavlutin 7 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.