Angular 01 - DataBinding (Scalar) examples

by Sky Sigal

HTML

<div data-ng-app="App1">
    <div data-ng-controller="SomeParentCtrl">
        <div data-ng-controller="SomeCtrl">
            <b>Scalar Binding:</b><br/>
            <div>Number:<span data-ng-bind="someNumber"/></div>
            <div>Text:<span data-ng-bind="someText"/></div>
            <!-- to object properties -->
            <div>First:<input data-ng-model="someObject.first"/></div>
            <!-- to behaviour -->
            <div>Last:<span data-ng-bind="someObject.full()"/></div>
       </div>
    </div>
</div>

JavaScript

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


//note how '$scope' is mapped to $sc:
app1.controller('SomeParentCtrl', ['$scope', function ($s) {
    $s.someText = "Three";
}]);

app1.controller('SomeCtrl', ['$scope', function ($scope) {    
    $scope.someNumber = 3;
    $scope.someObject = {
        first : 'John',
        last : 'Smith',
        full : function(){return this.first + ' ' + this.last;}
    };
    
}]);