$scope vs. Controller As

Example of $scope vs. Controller As

by Jeremy Likness

HTML

<script src="https://code.angularjs.org/1.3.1/angular.js"></script>
<div ng-app="myApp">
    <div ng-controller="badCtrl">
        <input placeholder="Type your name" ng-model="name"/>
        <button ng-click="greetMe()" ng-disabled="notValid()">Greet Me!</button>
    </div>
    <div ng-controller="goodCtrl as ctrl">
        <input placeholder="Type your name" ng-model="ctrl.name"/>
        <button ng-click="ctrl.greetMe()" ng-disabled="ctrl.notValid()">Greet Me!</button>
    </div>
</div>

JavaScript

(function () {
    var app = angular.module('myApp', []);
    
    function BadController($scope) {
        
        $scope.notValid = function () {
            var bad = !!$scope.name;
            return !bad || $scope.name.length < 1;
        };
        
        $scope.greetMe = function () {
            if ($scope.notValid()) {
                return;
            }
            alert('Hello, ' + $scope.name);
            $scope.name = '';
        };
    }
    
    function GoodController () {
    }
    
    angular.extend(GoodController.prototype, {
        notValid: function () {
            var bad = !!this.name;
            return !bad || name.length < 1;
        },
        greetMe: function () {
            if (this.notValid()) {
                return;
            }
            alert('Hello, ' + this.name);
            this.name = '';
        }
    });
    
    app.controller('badCtrl', BadController);
    app.controller('goodCtrl', GoodController);
})();