In Angular JS, $scope object approach of controller creation?

Question

What is the ‘controller as’ syntax and how it is different from the $scope object approach of controller creation?

I have already gone through this

AngularJs "controller as" syntax - clarification?

Answer 1

I think you want to know the difference between the 'this' and '$scope' approach. I would recommend going over the following thread:

$scope vs this

Also, there is a style guide(although opinionated) for AngularJS exploring these and other concepts.

Answer 2

Finally I have the exact answer for which I am looking for

In AngularJS 1.2, the “controller as” syntax was introduced, and made controller code creation more readable.

Usually we create a controller using the $scope object as shown in the listing below:

myApp.controller("AddController", function ($scope) {
    $scope.numb1;
    $scope.numb2;
    $scope.result;
    $scope.add = function () {
        $scope.result = $scope.numb1 + $scope.numb2;
    }
});

Above we are creating the AddController with three variables and one behaviour, using the $scope object controller and view, which talk to each other. The $scope object is used to pass data and behaviour to the view. It glues the view and controller together.

Essentially the $scope object performs the following tasks:

1. Pass data from the controller to the view

2. Pass behaviour from the controller to the view

3. Glues the controller and view together

4. The $scope object gets modified when a view changes and a view gets modified when the properties of the $scope object change

   We can rewrite the above controller using the controller as syntax and the vm variable as shown in the listing below:

   myApp.controller("AddVMController", function () {
       var vm = this;
       vm.number1 = undefined;
       vm.number2=undefined;
       vm.result =undefined;
   vm.add = function () {
        vm.result = vm.number1 + vm.number2;
    }
   

   });

Essentially we are assigning this to a variable vm and then attaching a property and behaviour to that. On the view we can access the AddVmController using controller as syntax. This is shown in the listing below:

<div ng-controller="AddVMController as vm">

            <input ng-model="vm.number1" type="number" />

            <input ng-model="vm.number2" type="number" />

            <button class="btn btn-default" ng-click="vm.add()">Add</button>

            <h3>{{vm.result}}</h3>

  </div>

Here are some steps to use the controller as syntax:

1. Create a controller without $scope object.

2. Assign this to a local variable. I preferred variable name as vm, you can choose any name of your choice.

3. Attach data and behaviour to the vm variable.

4. On the view, give an alias to the controller using the controller as syntax.

5. You can give any name to the alias. I prefer to use vm unless I’m not working with nested controllers.

In the controller as syntax, we have more readable code and the parent property can be accessed using the alias name of the parent controller instead of using the $parent syntax.

I will conclude this by saying that it’s purely your choice whether you want to use the controller as syntax or the $scope object. There is no huge advantage or disadvantage to either, simply that the controller as syntax you have control on the context is a bit easier to work with, given the clear separation in the nested controllers on the view.