AngularJS Controllers Inheritance – angular inherits Example

First include the AngularJS simple library or angular.min.js in the web-application. The ng-app simple directive (init module)initializes the application. The events of ng-controller directive simple data defines the ng-controller.
We defined simple two ng-controllers here define and set their html simple properties using here $scope object or json object. The second controller inherit all the parent and chield the message data property and overrides all the content the color side effect property from first controller. It also add all the data “type” property which simple not be available for first controller.

AngularJS Multiple and Scope Controllers Example

Include libs

[php]
angular.js
index.js
[/php]

index.html

[php]

AngularJS Controllers Inheritance

    {{ "EmpName Name : " + EmpName.name }} 
  
    {{ 'Total Marks: ' + EmpName.scoarTotal }}   
	

Example

[/php]

index.js

[php]
var infinityApp = angular.module(‘infinityApp’, []);
infinityApp.controller(‘FirstCtrl’, function($scope) {
$scope.EmpName = {scoarTotal: false } ;
});
infinityApp.controller(‘secondCtrl’, function($scope) {
$scope.ResultQuiz = function() {
$scope.EmpName.name = “infinityknow”;
$scope.EmpName.scoarTotal = true;
}
});
[/php]

AngularJS Controllers : Multiple Controllers Example

[php]

https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js

var infinityApp = angular.module(‘infinityApp’, []);
infinityApp.controller(‘FirstCtrl’, function($scope) {
$scope.EmpName = {scoarTotal: false } ;
});
infinityApp.controller(‘secondCtrl’, function($scope) {
$scope.ResultQuiz = function() {
$scope.EmpName.name = “infinityknow”;
$scope.EmpName.scoarTotal = true;
}
});

AngularJS Controllers Inheritance

    {{ "EmpName Name : " + EmpName.name }} 
  
    {{ 'Total Marks: ' + EmpName.scoarTotal }}   
	

Example

[/php]

Example