AngularJS - Controller As Syntax

by Patrick von Lieres

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://code.angularjs.org/1.1.5/angular.js"></script>
<div ng-app="myapp">
    <div ng-controller="ChildCtrl as child">
		<p>{{child.getNumberOfUsers()}} users</p>
        <p ng-repeat="user in child.users">{{ user.name }} is a {{user.type}}</p>
    </div>
</div>

JavaScript

var myapp = angular.module('myapp', []);

myapp.constant('users', [{
    name: 'Franz',
    type: 'Broker'
}, {
    name: 'Bob',
    type: 'Customer'
}]);

myapp.factory('aService', function(users) {
    return {
        getUser: function(i) {
            return users[i];
        }
    };
});

function ParentCtrl(aService) {
    this.users = [];
    this.init = function() {
        for (var i = 0; i < 2; i++) {
            this.users.push(aService.getUser(i));
        }
    }
};

myapp.controller('ChildCtrl', function(aService) {
    ParentCtrl.apply(this, [aService]);

    var self = this;
    self.init();

    self.getNumberOfUsers = function() {
        return self.users.length;
    };
});