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

Advertisements

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

  1. 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!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s