What is key benefits of using controllerAS in angularJS

Question

ng-controller="invoiceController as invoice" create new invoiceController constructor and assigned the same to scope behind the scene, which the similar thing $scope injection does in controller function parameter

am i right for the above point.

if yes then how scope is related to this. Please help.

-- AngularJS Developer Guide - Conceptual Overview

You might find these useful: http://stackoverflow.com/questions/30970922/what-are-the-advantages-of-using-controller-as-syntax-instead-of-scope, http://stackoverflow.com/questions/32755929/what-is-the-advantage-of-controller-as-in-angular — lealceldeiro, Feb 27 '17 at 13:37
Possible duplicate of [What is the advantage of "Controller as" in Angular?](http://stackoverflow.com/questions/32755929/what-is-the-advantage-of-controller-as-in-angular) — georgeawg, Feb 27 '17 at 18:04
http://stackoverflow.com/questions/30641478/angularjs-controller-as-or-scope — Claies, Feb 27 '17 at 18:40

score 0 · Answer 1 · answered Feb 27 '17 at 13:53

0

"as" tells what "this" is supposed to point to. This way, you can create more than one instance of the controller in different scopes, without getting them confused thanks to their different names.

answered Feb 27 '17 at 13:53

A. Kutluozen

96
4

score 0 · Answer 2 · answered Feb 27 '17 at 18:36

It allows you to use your controller as a class or prototype, where you expose class/prototype methods and properties to your templates rather than your controller adding methods and properties to the scope object.

So with ES2015 or ES5 you could do either:

export class SomeController {

 someProperty = true;

 someMethod() {
   return 'foo';    
 }
}

Or

function SomeController() {}
SomeController.prototype.someProperty = true;
SomeController.prototype.someMethod = function() { return 'foo'; }

Now if you provide one of these to your template as SomeController as ctrl you will then be able to access these as ctrl.someProperty and ctrl.someMethod(). The ctrl instance of your controller is added to the $scope for you.

Another benefit is memory footprint. Monkey patching functions onto $scope is wasteful. Class and prototypes allow the same method implementation to be shared, while keeping each instance separate. This adds up for components with many instances such as a list-item, for example.

What is key benefits of using controllerAS in angularJS

2 Answers2