AngularJS Controllers

Introduction

AngularJS controllers are just simple JavaScript objects bound to a specific scope. AngularJS controllers are codes that control certain areas containing DOM elements.

In this article, we will learn more about AngularJS Controllers in detail. So, without any further ado, let's get started!

AngularJS Controller

The controller in AngularJS is a JavaScript function that keeps track of the application's data and behavior using the $scope object.

By attaching methods and properties to the $scope object, we can add/update data within a controller function and attach behaviors to HTML elements. The $scope object serves as a link between the controller and the HTML.

The ng-controller directive adds behavior or maintains data in an HTML element and its child elements by specifying a controller.

Syntax:

<element ng-controller="expression">Contents...</element>

The example below shows how to add properties to the $scope object within a controller and then display the property’s value in HTML.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app="ninjaApp">
    <div ng-controller="ninjaController">
        {{message}}
    </div>
    <script>
        var myApp = angular.module('ninjaApp', []);

        myApp.controller('ninjaController'function ($scope) {
            $scope.message = "Hello Ninjas!";        
        });
    </script>
</body>
</html>

Output:  

Hello Ninjas!

The ng-controller="ninjaController" directive is applied to the <div> element in the preceding example, where "ninjaController" is the controller's name. We have specified a message expression within the div element.

We need to do an application module to make "ninjaController." The module defines an application and isolates its components from the global scope, such as controllers and services. We add a controller function to a module using the controller() method, where the first parameter is the controller's name and the second parameter is the controller's function. The $scope parameter in the controller function is injected by the AngularJS framework.

Let us understand with the figure given below:

 

<body ng-app="ninjaApp">

The line given below instructs Angular to use "ninjaApp" as a controller for the code in the <body></body> section. A standard JavaScript function object is the "ninjaApp" function. With a $scope object, AngularJS will call "ninjaApp.

Controller Method

Methods can be added to a controller(variables that act as functions). 

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

<div ng-app="ninjaApp" ng-controller="personCtrl">

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

</div>

<script>
var app = angular.module('ninjaApp', []);
app.controller('personCtrl'function($scope) {
    $scope.fName = "Coding";
    $scope.lName = "Ninjas";
    $scope.fullName = function() {
        return $scope.fName + " " + $scope.lName;
    };
});
</script>

</body>
</html>

 

Output:

The code given above was an example of a controller method in AngularJS.

Controllers In External Files

When developing web apps, controllers are usually stored in an external file in larger applications. We just have to copy the file name and paste it into an <script> element. Let us understand it with an example given below: 

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

<div ng-app="ninjaApp" ng-controller="personCtrl">

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

</div>

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

</body>
</html>

Output:

Here, “codingninjas.js" is the name of the external file.

 

Frequently Asked Questions

 

Q1) What are the functions of an AngularJS controller?

Answer: The controller's primary task is to construct a scope object and send it to the view. 
 

Q2) In Angular, what is ng-controller?

Answer: In AngularJS, the ng-controller directive adds a controller to the application. It can be used to add functions, methods, and variables that can be called to perform a specific action when an event occurs, such as a click.


Q3) Is it possible to have numerous ng-controllers?

Answer: Yes, we can have numerous ng-controllers.


Q4) What is an AngularJS controller?

Answer: AngularJS controllers are plain JavaScript objects which are for certain scope. Angular.js controllers are pieces of code that control certain areas containing DOM elements.

Key Takeaways

In this article, we've learned about AngularJS Controller in detail.

If you want to learn advanced front-end web development, Coding Ninjas has one of the best courses available, which you can find here

 

Thank you for reading!

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think