How to use multiple Controllers in AngularJS?

Generally, new angular JS developers use only one controller while writing the script.

But if we have to use multiple controllers here is how we can use it:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">

<div ng-controller="firstController">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>
<br/>
<div ng-controller="secondController">

First Name: <input type="text" ng-model="fName"><br>
Last Name: <input type="text" ng-model="lName"><br>
<br>
Full Name: {{fName + " " + lName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('firstController', function($scope) {
    $scope.firstName = "";
    $scope.lastName = "";
});

app.controller('secondController', function($scope) {
    $scope.fName = "";
    $scope.lName = "";
});
</script>

</body>
</html>

Output in browser:

Type your first and last name.

angular1

One thought on “How to use multiple Controllers in AngularJS?”

You actually make it seem so easy with your presentation but I in finding this topic to be actually something which I think I might never understand. It sort of feels too complex and extremely wide for me. I’m looking forward in your next put up, I will attempt to get the hold of it!

LikeLike