javascript - Angularjs "Controller as" or "$scope"

Question

I would like to know what is the main difference between "Controller as" or "$scope" syntax in angularjs.

1. Do they have any performance impact,if yes which syntax is preferable.
2. "Controller as" syntax surely improve the readability of the code,as Knockout.js and other JavaScript framework follows the same syntax.

3. $scope will provide scope inheritance which sometimes give us weird behavior like

   <div ng-controller="firstController">
    ParentController: <input type="text" ng-model="parent"/>
     <div ng-controller="secondController">
       ChildController: <input type="text" ng-model="parent" />
     </div>
   </div>
   
   app.controller('ParentController', function ($scope) {
     $scope.parent = "parentScope";
   }).controller('ChildController', function ($scope) { /*empty*/ }); 
   

   a) Initially child will get the parent property and it displays 'parentScope' when we update parent child will also get updated. But if we have changed the child property now updating the parent doesn't modify child as it has got its own scope property.

   b) If i am using controller as syntax changing child also updates the parent.

Answer 1

I've written a few answers to this question in the past, and they all essentially boil down to the same thing. In Angular, you are using $scope, even when you aren't expressly referencing it.

The ControllerAs syntax allows Angular to help you to write more efficient, fault tolerant controllers. Behind the scenes, when you use ng-controller="theController as ctrl", Angular creates theController as a property on $scope and assigns it as ctrl. You now have an object property you are referencing from scope, and are automatically protected from prototype inheritance issues.

From a performance perspective, since you are still using $scope, there should be little to no performance difference. However, since your controller is now not assigning variables directly to $scope on it's own, it does not need to have $scope injected. Also, the controller can much more easily be tested in isolation, since it is now just a plain JavaScript function.

From a forward thinking perspective, it's well known by now that Angular 2.0 will not have $scope, but instead will use features of ECMAScript 6. In any previews released by the Angular team showing migrations, they first begin by refactoring the controller to eliminate $scope. If your code is designed without the use of $scope based controllers, your first step in a migration is already complete.

From the designer's perspective, the ControllerAs syntax makes it much clearer where objects are being manipulated. Having customerCtrl.Address and storeCtrl.Address makes it much easier to identify that you have an address assigned by multiple different controllers for different purposes than if both used $scope.Address. Having two different HTML elements on a page which both are bound to {{Address}} and knowing which one is which only by the controller the element is contained in is a major pain to troubleshoot.

Ultimately, unless you are trying to spin up a 10 minute demo, you really should be using ControllerAs for any serious Angular work.