Angular 01

by Sky Sigal

HTML

<div data-ng-app="App1">
    <div data-ng-controller="SomeParentCtrl">
        <div data-ng-controller="SomeFormCtrl">
            <!-- To bind input Value's, we use ng-model -->
            <div>First:<input data-ng-model="first"/></div>
            <div>Last<input data-ng-model="last"/></div>
            <!-- to bind element InnerHtml's, we use ng-bind instead of ng-model: -->
            <!-- notice how it's dynamically databound and self updates -->
            <div>Full #1:<span data-ng-bind="first +'...'+ last"/></div>
            <div>Full #2:<span data-ng-bind="firstLast('?')"/></div>
            <!-- or we can use the following syntax -->
            <div>Full #3:<span>{{first + ' ' + last}}</span></div>
            <div>Full #4:<span>{{firstLast('_')}}</span></div>
            <div>Parent Property:<span data-ng-bind='cascadeExample'/></div>
            <div>Full #5:<span data-ng-model='firstLast()'/>(common newbie mistake:mixing up ng-model/ng-bind...)</div>
            <div>Full #6:<span data-ng-bind="firstLast"/>(common mistake: invoking methods without brackets)</div>
        </div>
    </div>
</div>

JavaScript

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

//note how '$scope' is mapped to $sc:
myApp.controller('SomeParentCtrl', ['$scope', function ($sc) {
    $sc.cascadeExample="I'm from an ascestor scope";
}]);

myApp.controller('SomeFormCtrl', ['$scope', function ($scope) {    
    $scope.first = 'John';    
    $scope.last = 'Smith';   
    $scope.firstLast = function(dc){if (!dc){dc=' ';}return $scope.first + dc + $scope.last;}
}]);