Hi. Today, let me show you all how we can use multiple controllers in single Angular JS app. Only two files - i.e., HTML and JavaScript files are required.
main.html :-
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.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>
script.js :-
var mainApp = angular.module("mainApp", [ ]);
mainApp.controller("firstController", function ($scope)
{
$scope.firstName = "Anik";
$scope.lastName = "Acharjee";
$scope.getFullName = function ()
{
return $scope.firstName + " " + $scope.lastName;
};
});
mainApp.controller("secondController",function ($scope)
{
$scope.firstName = "Rahul";
$scope.middleName = "Kumar";
$scope.lastName = "Singh";
$scope.getFullName = function ()
{
return $scope.firstName + " " + $scope.middleName + " " + $scope.lastName;
};
});
Screenshot:-
main.html :-
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.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>
script.js :-
var mainApp = angular.module("mainApp", [ ]);
mainApp.controller("firstController", function ($scope)
{
$scope.firstName = "Anik";
$scope.lastName = "Acharjee";
$scope.getFullName = function ()
{
return $scope.firstName + " " + $scope.lastName;
};
});
mainApp.controller("secondController",function ($scope)
{
$scope.firstName = "Rahul";
$scope.middleName = "Kumar";
$scope.lastName = "Singh";
$scope.getFullName = function ()
{
return $scope.firstName + " " + $scope.middleName + " " + $scope.lastName;
};
});
Screenshot:-
Explanation:-
Here, two separate controllers are used - "first controller" and "second controller". Two separate controllers are performing, completely separate work. ng-bind is used to bind the data.
No comments:
Post a Comment