Post
Ask Question

AngularJS Controller

Introduction

AngularJS Controller is a JavaScript object that controls the data of AngularJS application. In Angular, Controller is defined by a JavaScript constructor function that is used to augment Angular scope.

The ng-controller directive defines the application controller. When a controller is attached to the DOM via ng-controller, the Angular will instantiate the new controller object using the specified controllers constructor function. A new child scope will be created and made available to the constructor function of specified controller as $scope.

We use controllers to set the initial state of $scope object and they can be used to add some behavior to $scope object. Controller must be used to contain only business logic.

Creating AngularJs Controllers

When we create an angular application, first we need to set up the initial state for Angular $scope. We can set up the initial state of a $scope by attaching properties to the $scope object. These properties contain view model. View model is a model that will be represented by the view. All these properties that are attached to the $scope will be available to the template at the point in the DOM where we have registered a controller. AngularJs invokes the controller with the $scope object.

Let us understand with an example: creating an Angular Controller.

Creating controller

  1. var myApp = angular.module('myApp', []);  
  2. myApp.controller('MyFirstController', ['$scope', function($scope) {  
  3.     $scope.myvar = 'Hello, this is controller!';  
  4. }]);   

In this example, we have created a controller “MyFirstController”, that attaches the myvar property that contains string “MyFirstController” to $scope.

Here, we have created angular.module myApp, then we have added controllers constructor function to this module. This is done by using .controller() method. This keeps the constructor function out of global scope. After creating controller, we will create a view for this. We can do this like the below example :

View model( Data Binding)

  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2.   
  3. <head>  
  4.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  5.     <script src="mycontroller.js"></script>  
  6. </head>  
  7.   
  8. <body ng-app="myApp">  
  9.     <div ng-controller="MyFirstController"> {{myvar}} </div>  
  10. </body>  
  11.   
  12. </html>   

Here we have attached our controller to the DOM using ng-controller, like we have done below,

  1. <div ng-controller="MyFirstController"> {{myvar}} </div>   
If we run this and verify the output, we will get the output as below,

Behavior to a scope object

We add methods to the $scope object to add some behavior to it. It will react to the events in the view if we have added some behavior to $scope.

Let’s add controller methods (variables and functions). Let’s understand this with an example where we input first name and Last name in the input fields and show full name by combining first name and last name.

First of all we will get the first name and last name into ng-models “firstName” and “lastName” respectively. The we will create a controller “nameController”, where we will pass firstname and lastname to $scope object. We will create $scope.fullName where we will combine firstname and lastname and return . This will be shown in view where we will access the fullName of the controller.

Example

View

  1. <div ng-app="myApp" ng-controller="nameController">  
  2.    First Name: <input type="text" ng-model="firstName"><br>  
  3.    Last Name: <input type="text" ng-model="lastName"><br>  
  4. <br>  
  5.    Full Name: {{fullName()}}  
  6. </div>   

Controller

  1. var app = angular.module('myApp', []);  
  2. app.controller('nameController', function($scope) {  
  3.     $scope.firstName = "Jasbeer ";  
  4.     $scope.lastName = "Singh";  
  5.     $scope.fullName = function() {  
  6.         return $scope.firstName + " " + $scope.lastName;  
  7.     };  
  8. });   

You can check here we have passed firstName and lastName to ng-models and then in the controller we have returned fullName by combining fristName and lastName of $scope object into $scope.fullName. We have used the nameController in the view using

  1. ng-controller=”nameController”   

Now, if we run this we will get the output as,

First it will give the static result as we have provided Jasbeer as the first name and singh as the last name so fullName will be “Jasbeer singh”.

 

Now, if we change the text of first name and last name in input types as first name = Angular, last name =Js we will get output as,



Controllers should only contain the business logic. A controller is a JavaScript Object with properties and functions. Each Controller accepts $scope as a parameter which refers to the module or application that the controller is to control.

This was the basics of Angular JS Controller. Please provide your valuable feedback about this.


Similar Articles