AngularJS Controllers

AngularJS controllers is a regular JavaScript Objects.
Controller in angular JS is defined by a JavaScript constructor function.
AngularJS controller is used to control the data of the application.
The ng-controller directive specifies the application controller in Angular JS.
A controller is said to be a JavaScript object which contains attributes/properties and functions.
In AngularJS controller $scope is act as a parameter which is used to refer the application/module to switch the controller.
By using specific Controller’s constructor function angular will initiate a new controller object and A new child scope is available as injectable parameter to the Controllers constructor function as $scope.

Syntax for Defining a Controllers in Angular JS:

var variablename = angular.module (moduleName, [ ] );
variablename.controller(“controllername”, function(){ … });

Dos and Don’ts of the Controllers in Angular JS:

Dos of the controllers:

$scope object is set to be an initial state of the AngularJS controllers.
Behavior is added to the $scope object.
Use AngularJs form controls for inputs.
Use AngularJs filters for filter the outputs.
Use AngularJs services for Share code or state across controllers.

Don’ts of the Controllers:

Manipulate DOM-controllers contain only trade logic (logical operations). By placing any presentation logic (displaying data’s) into the controllers significantly affects its testability.
We should not use any input controls other than AngularJs form controls.
We should not use any type of Filter other than AngularJs filters.
We should not use any Share code or state across controller other than AngularJs services.
Manage the life cycle of other components.( example: to create service instances)

Sample coding Controllers in Angular JS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy Controllers in Angular JS</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
        angular.min.js"> </script>
    </head>
    <body>
        <div ng-app="ngApp" ng-controller="ngCtrl">
        Name: <input type="text" ng-model="Name"><br>
        Email: <input type="text" ng-model="Email"><br>
        <br>
        Name and Email: {{Name + " " + Email}}
        </div>
        <script>
               var app = angular.module('ngApp', []);
               app.controller('ngCtrl', function($scope) {
               $scope.Name = "WIKITECHY";
               $scope.Email = "learn@wikitechy.com";
               });
        <script>
    </body>
</html>

Data:

Collection of data has been defined using array for our AngularJS Application

Name = "WIKITECHY";
Email = "learn@wikitechy.com";

Logic:

Controller logic for the AngularJS application.

app.controller('ngCtrl', function($scope) {
    $scope.Name = "WIKITECHY";
    $scope.Email = "learn@wikitechy.com";
    });

HTML:

Viewable HTML contents in AngularJS Application.

<div ng-app="ngApp" ng-controller="ngCtrl">
Name: <input type="text" ng-model="Name"><br>
Email: <input type="text" ng-model="Email"><br>
<br>
Name and Email: {{Name + " " + Email}}
</div>

Code Explanation for Controllers in Angular JS:

The AngularJS application is defined by ng-app="ngApp".The application runs inside the <div> tag. It’s also used to define a <div> tag as a root element.
The ng-controller=”ngCtrl” is an AngularJS directive. It is used to assign a controller name as “ngCtrl”.
ng-model is given for the input fields Name and Email to bind the data application.
{{Name + " " + Email}} is a string concatenation code of the ngApp application for AngularJS. The {{ }} is used to bind the value of the application variable.
Here we create a module by using angular.module function. We have passed an empty array to it.
Here we have declared a controller ngCtrl module using app.controller () function.
The value of the controller modules is stored in scope object. In AngularJS, $scope is passed as first argument to apps.controller during its constructor definition.
Here we have set the value of $scope.Name, $scope.Email and which are to be used to display the {{Name + " " + Email}} values in the HTML <div> element.

Sample Output for Modules in AngularJS :

Sample Output for Controllers In Angularjs

We have bounded Name and Email with two input boxes.
If we type anything in Name and Email in input boxes we can see the Name and Email combined getting updated automatically. (Here WIKITECHY and learn@wikitechy.com is updated automatically).

PDF

AngularJS Controllers

Syntax for Defining a Controllers in Angular JS:

Dos and Don’ts of the Controllers in Angular JS:

Dos of the controllers:

Don’ts of the Controllers:

Sample coding Controllers in Angular JS:

Data:

Logic:

HTML:

Code Explanation for Controllers in Angular JS:

Sample Output for Modules in AngularJS :

Related Searches to angularjs controllers

Wikitechy

Join our Community

Other Languages