I have 4+ experience and working as software Engineer with Hytech professionals India PVT ltd and also working as Consultant,Trainer,Blogger and Author on Microsoft technologies,Also I have Trained more than 500+ IT professionals.I have knowledge about Asp.net,C#,SQL,Project management,replication,MVC,WebApi,SSRS,PostMan,TFS,SVN,Swagger,WMI,Agile,SignalR,Angularjs,IIS configuration.

Part 4::How to use Multiple controller on single HTML/View Page?

Basic Example of Multiple controller on single HTML/View in AngularJs:-
Step 1:-Create simple HTML page.
Step 2:-Include AngularJs library  to support Angularjs in your application inside head tag with script tag.
or /use CDN URL:-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="firstController">
<h2>Model managed by the first controller</h2>
<strong>First name:</strong> {{firstName}}<br />
<strong>Last name:</strong> <span ng-bind="lastName"></span><br />
<strong>Full name:</strong> {{getFullName()}}<br />
<br />
<label>Set the first name: <input type="text" ng-model="firstName"/></label><br />
<label>Set the last name: <input type="text" ng-model="lastName"/></label>
</div>
<div ng-controller="secondController">
<h2>Model managed by the second controller</h2>
<strong>First name:</strong> {{firstName}}<br />
<strong>Middle name:</strong> {{middleName}}<br />
<strong>Last name:</strong> <span ng-bind="lastName"></span><br />
<strong>Full name:</strong> {{getFullName()}}<br />
<br />
<label>Set the first name: <input type="text" ng-model="firstName"/></label><br />
<label>Set the middle name: <input type="text" ng-model="middleName"/></label><br />
<label>Set the last name: <input type="text" ng-model="lastName"/></label>
</div>
</body>
</html>
Step 3:-Create Controller using:-script.js file
          var mainApp = angular.module("mainApp", []);
mainApp.controller('firstController', function($scope) 
{
// Initialize the model variables
$scope.firstName = "Bikesh";
$scope.lastName = "Srivastava";

// Define utility functions
$scope.getFullName = function ()
{
return $scope.firstName + " " + $scope.lastName;
};
});

mainApp.controller('secondController', function($scope) 
{
// Initialize the model variables
$scope.firstName = "Alok";
$scope.middleName = "Kumar";
$scope.lastName = "Srivastava";
// Define utility functions
$scope.getFullName = function ()
{
return $scope.firstName + " " + $scope.middleName + " " + $scope.lastName;
};
});
Description:-
We can define multiple controllers in the same HTML template and each one manages its own $scope object.In the example we have two controllers, firstController and secondController, and even though there are some model variables named in the same way for both the controllers, each one resides in its own $scope thus avoiding any conflict (they are in fact different variables even though the name is the same).
You have just read an article that categorized by title AngularJs by title Part 4::How to use Multiple controller on single HTML/View Page?. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2016/01/how-to-use-multiple-controller-on.html. Thank You!
Author: Bikesh Srivastava - Sunday, 17 January 2016

1 comments for "Part 4::How to use Multiple controller on single HTML/View Page?"

Life Is Complicated, But Now programmer Can Keep It Simple.