AngularJS - Basic

$scope vs controller as

by Ryan Morris

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Sample of using $scope -->
<div class="container" ng-app="myScopeApp">
    
    <!-- basic controller usage -->
    <div ng-controller="MainCtrl">
        
        <h1>Hello, {{ name }}</h1>
    
        <input type="text" name="name" ng-model="name" placeholder="What is your name?" />
        
    </div>
    
    <!-- a second instance of MainCtrl -->
    <div ng-controller="MainCtrl">
        
        <h1>Hello, {{ name }}</h1>
        <input type="text" name="name" ng-model="name" placeholder="What is your name?" />
        
    </div>
    
    <!-- a third instance, with children controllers -->
    <div ng-controller="MainCtrl">
        
        <h1>Hello, {{ name }}</h1>
        <input type="text" name="name" ng-model="name" placeholder="What is your name?" />
        
        <!-- child scope, has access to parent -->
        <div ng-controller="SecondaryCtrl">
        
            <h1>{{ name }}</h1>
            <p>Friend of {{$parent.name}}</p>
            <input type="text" name="name" ng-model="name" placeholder="What is your name?" />
            
        </div>
        
    </div>   
    
</div>

<hr>
<!-- sample of using controller as -->
<!-- REMINDER: comment out one app or the other -->
<div class="container" ng-app="myControllerAsApp">
    
    <!-- basic controller usage -->
    <div ng-controller="MainCtrl as main">
        
        <h1>Hello, {{ main.name }}</h1>
    
        <input type="text" name="name" ng-model="name" placeholder="What is your name?" />
        
    </div>
    
    <!-- a second instance of MainCtrl -->
    <div ng-controller="MainCtrl as main">
        
        <h1>Hello, {{ main.name }}</h1>
        <input type="text" name="name" ng-model="name"...

CSS

div[ng-controller] {
    border: 1px solid #ccc;
    border-radius:5px;
    margin:5px 0;
    padding:5px;
}

div[ng-controller] > div[ng-controller] {
    background-color:#f0f0f0;
}

JavaScript

/**
 * $scope App
 */
var myScopeApp = angular.module('myScopeApp', []);

myScopeApp.controller('MainCtrl', ['$scope', function($scope) {
    
    $scope.name = "Ryan Morris";
    
}]);

// controllers have their own scope
myScopeApp.controller('SecondaryCtrl', ['$scope', function($scope) {
    
    $scope.name = "Jim Dandy";
    
}]);

/**
 * Controller As app
 */
var myControllerAsApp = angular.module('myControllerAsApp', []);

myControllerAsApp.controller('MainCtrl', [function() {
    
    this.name = "Ryan Morris";
    
}]);

// controllers have their own scope
myControllerAsApp.controller('SecondaryCtrl', [function() {
    
    this.name = "Jim Dandy";
    
}]);