AngularJS (67 Blogs) Become a Certified Professional

All you Need to Know About AngularJS Controllers

Last updated on Oct 25,2020 572 Views


Controlling the flow of your Data is very important. Especially when we are talking about Web Applications. So in this article, we will learn about AngularJS Controllers in the following order:

 

WHAT ARE ANGULARJS CONTROLLERS?

angular logo - EdurekaThe data of AngularJS applications is controlled by AngularJS controllers. These controllers are nothing but JavaScript Objects. The controllers take the data from the View and process them. The data is then sent to the view which in turn is displayed to the user.

The application controller is defined by the ng-controller.

Example:

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

<div ng-app="firstApp" ng-controller="firstCtrl">

Initials: <input type="text" ng-model="Initials"><br>

Middle Name: <input type="text" ng-model="middlename"><br>

<br>

Full Name: {{Initials + " " + middlename}}

</div>

<script>

var app = angular.module('firstApp', []);

app.controller('firstCtrl', function($scope) {

$scope.Initials = "E";

$scope.middlename = "Ari";

});

</script>

</body>

</html>

The application given above is defined by ng-app=”firstApp”.

We also define an AngularJS attribute i.e. ng-controller=”firstCtlr”. This defines the controller. The firstCtrl function is a JavaScript function.

The controller is invoked by using a $scope object by AngularJS. The controller creates two variables in this scope i.e. Initials and middle name. The ng-model directive binds the input field to the controller properties or variables.

 

CONTROLLER METHODS

A controller can have methods as shown in the example below:

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

<div ng-app="firstApp" ng-controller="peopleCtrl">

Initials: <input type="text" ng-model="Initials"><br>

Middle Name: <input type="text" ng-model="middleName"><br>

<br>

Full Name: {{fullName()}}

</div>

<script>

var app = angular.module('firstApp', []);

app.controller('peopleCtrl', function($scope) {

$scope.Initials = "E";

$scope.middleName = "Ari";

$scope.fullName = function() {

return $scope.Initials + " " + $scope.middleName;

};

});

</script>

</body>

</html>

The code produces the following output:

 

CONTROLLERS IN EXTERNAL FILES

We can store controllers in external files for larger applications.

To implement this, we create an application.js file with the following code:

angular.module('app',[]).controller('firstCtrl',function($scope)

{

$scope.message = "Ahoy!"

});

The module called app holds the controller along with the controller functionality. The controller is named firstCtrl and is used to display the “Ahoy!” message. The scope object defined in the code is used to pass information from the controller to the view.

In the next step, we create an html file with the div class containing the ng-controller directive. It must be noted that the application.js file must be referenced in the code.

<!DOCTYPE html>

<html ng-app="app">

<head>

<meta chrset="UTF 8">

<title>Hello</title>

<link rel="stylesheet" href="css/bootstrap.css"/>

</head>

<body>

<h1> EXAMPLE CONTROLLER</h1>

<div class="container">

<div ng-controller="firstCtrl">{{message}}</div>

</div>

<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<script src="lib/angular.js"></script>

<script src="lib/bootstrap.js"></script>

<script src="lib/jquery-1.11.3.min.js"></script>

<script src="application.js"></script>

</body>

</html>

The output of the code will be as follows:

angularjs controllers output

The primary responsibility of the controller is to create a scope object and thereby pass it to the view.

With this, we come to an end of this AngularJS Controllers article. Check out the Angular training by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework which is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities. The Angular Certification Training aims at covering all these new concepts around Enterprise Application Development.

Upcoming Batches For Angular Certification Training Course Online
Course NameDateDetails
Angular Certification Training Course Online

Class Starts on 21st December,2024

21st December

SAT&SUN (Weekend Batch)
View Details
Angular Certification Training Course Online

Class Starts on 15th February,2025

15th February

SAT&SUN (Weekend Batch)
View Details
Comments
0 Comments

Join the discussion

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

All you Need to Know About AngularJS Controllers

edureka.co