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>
var mainApp = angular.module("mainApp", []);
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).
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>Step 3:-Create Controller using:-script.js file
<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>
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)Description:-
{
// 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;
};
});
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
Great for Angular JS beginners!!
ReplyDeleteGiven article is very helpful and very useful for my admin, and pardon me permission to share articles here hopefully helped:
ReplyDeleteErp In Chennai
IT Infrastructure Services
ERP software company in India
web design company in india
Mobile Application Development Company in India
ERP in India
Web development company in chennai
Thanks for sharing all the information with us all..
ReplyDeleteFull Stack Online Training