11+ Year IT Industry Experience, Working as Technical Lead with Capgemini | Consultant | Leadership and Corporate Trainer | Motivational and Technical Speaker | Career Coach | Author | MVP | Founder Of RVS Group | Trained more than 4000+ IT professionals | Azure | DevOps | ASP.NET | C# | MVC | WEB API | ANGULAR | TYPESCRIPT | MEAN | SQL | SSRS | WEB SERVICE | WCF... https://bikeshsrivastava.blogspot.in/ http://bikeshsrivastava.com/

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 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, January 17, 2016

3 comments to "How to use Multiple controller on single HTML/View Page?"

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