Angularjs - Fundamentals & Prototypical Scope Inheritance

by AntrikshPatel

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://code.angularjs.org/1.2.3/angular.js"></script>
<div ng-app="myApp">
    $rootScope.Model:
    <pre>(01) aliasPrimitive = {{aliasPrimitive || json}}</pre>
    <pre>(02) nameModel = {{nameModel || json}}</pre>
    
    <div>(03) aliasPrimitive:<input type="text" ng-Model="aliasPrimitive"/></div>
    <div>(04) aliasPrimitive:<input type="text" ng-Model="aliasPrimitive"/></div>
    <div>(05) nameModel.name:<input type="text" ng-Model="nameModel.name"/></div>
    <div>(06) nameModel.name:<input type="text" ng-Model="nameModel.name"/></div>

    <hr class="hline_color"/>
    <div ng-controller="MyCtrl1">
        MyCtrl.Model:
        <pre>(07) aliasPrimitive = {{aliasPrimitive || json}}</pre>
        <pre>(08) nameModel = {{nameModel || json}}</pre>
        <pre>(09) movieModel = {{movieModel || json}}</pre>
        
        <hr/>

        <div>(10) movieModel.movieName:<input type="text" ng-Model="movieModel.movieName"/></div>

        <hr/>
        
        <div>(11) $parent.aliasPrimitive:<input type="text" ng-Model="$parent.aliasPrimitive"/></div>
        <div>(12) $parent.nameModel.name:<input type="text" ng-Model="$parent.nameModel.name"/></div>
        
        <hr/>
        
        <div>(13) aliasPrimitive:<input type="text" ng-Model="aliasPrimitive"/></div>
        <div>(14) nameModel.name:<input type="text" ng-Model="nameModel.name"/></div>        
        <button ng-click="reconstructChain()">Re-construct Scope Inheritance Chain for aliasPrimitive</button>
    </div>
</div>

CSS

hr.hline_color {
   height:1px;
   background:#000;
}

JavaScript

//ExternalResources
//Required: http://code.angularjs.org/1.2.3/angular.js
//http://code.jquery.com/jquery-2.0.3.min.js
//http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css

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

app.run(function ($rootScope) {
    $rootScope.aliasPrimitive = "Neo";
    $rootScope.nameModel = {
        name: "Peter Anderson"
    };
});

//Note: $scope is not mandatory here, it is just there to facilitate re-construction of scope inheritance chain. All other functionality remains same even without passing (injecting) $scope to the controller.
app.controller("MyCtrl1", function ($scope) {
    $scope.movieModel = {
        movieName: "The Matrix"
    };
    
    $scope.reconstructChain = function() {
        delete $scope.aliasPrimitive;
    };
});