AngularJS - Controller "Controller as" syntax

We have seen in my earlier post the controller code with $scope object. In this post I am going to talk about the controller code with "controller as" syntax.

While creating the controller code with "controller as" syntax, we don't have to inject the $scope object in controller function, instead "this" is being used .

While using "Controller as" syntax don't be in under impression that $scope is not being used. It is still being used behind the scene, just that AngularJS is hiding that.

Defining controller:

angular.module("myApp", [])
            .controller("myController", function(){

                this.message = "Hello World!";

             })

            .controller("employeesController", function($http){

                    var self= this;

                    $http({

                             method: 'get',

                             url: "EmplyeeService.asmx/GetAllEmployees'

                        })

                           .then(

                                       function(response) {

                                           self.employees = response.data;

                                        }, 

                                        function(reason) {

                                            self.error = reason.data;

                                        })

                   })

            .controller("employeeDetailsController", function($http, $routeParams){

                   var self= this;

                    $http({

                             method: 'get',

                             url: "EmplyeeService.asmx/GetEmployees',
                             params: {id: $routeParams.id}

                        })

                           .then(

                                       function(response) {

                                           self.employee = response.data;

                                        }, 

                                        function(reason) {

                                            self.error = reason.data;

                                        })

                   });

Using Controller: through routing

angular.module('myApp', ["ngRoute"])
             .configure( function ($routeProvider){
                   $routeProvider
                          .when("/employees",  {
                                    templateUrl: "Partial/employees.html",
                                    controller: "employeeController as employeeCtrl"
                            })
                          .when("/employee/:id",  {
                                    templateUrl: "Partial/employeeDetails.html",
                                    controller: "employeeDetailsController",
                                    controllerAs: "employeeDetailsCtrl"
                            })
                            .otherwise({
                                    redirectTo: "/home"
                            })
                });

Using Controller: directly in view

<h1 ng-controller= "myController as myCrl">{{myCtrl.message}}   </h1>

<table ng-controller ="employeesControls as employeeCtrl">
      <tr ng-repeat="employee in employeeCtrl.employees">
           <td>
                   {{employee.name}}
           </td>  
      </tr>
</table>     

Below examples summaries the two syntax for defining AngularJS controllers:

Controller code with $scope object:

Define Controller:

angular.module("myApp", [])

            .controller("myController", function($scope) {

                  $scope.message "Hello World!";

            });

Use controller inside the View:
<h1 ng-controller="myController">{{message}}   </h1>

Controller code with "controller as" syntax

Define controller:

angular.module("myApp", [])

            .controller("myController", function() {

                  this.message "Hello World!";

            });

Use controller inside the View:

<h1 ng-controller="myController as myCtrl">{{myCtrl.message}}   </h1>