AngularJS - Basic

$scope

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>
<div class="container" ng-app="myApp">
    
    <!-- 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>

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

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

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

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