Home > DeveloperSection > Beginner > AngularJs Controllers

AngularJs Controllers


Angular JS Angularjs Controller 
Ratings:
0 Comment(s)
 1458  View(s)
Rate this:

AngularJs Controllers

Hi everyone in this article I’m explaining about Angularjs Controller

Introduction:

This article explains the Controller in AngularJS. In AngularJS "Controller" has a different meaning, here the JavaScript Constructor function is referred to as a "Constructor" to augment the Angular Scope.

The Controller is called in DOM using the ng-controller directive, the Controller defines the initial state of the $scope object.

Now I will show you an example by which it will become easy for you to understand the Controller in AngularJS.

AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is defined using ng-controller directive. A controller is a JavaScript object containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.

<div ng-app="" ng-controller="employeeController">

        ...

    </div>

Here we've declared a controller employeeController using ng-controller directive. As a next step we'll define the studentController as follows

<script>

    function employeeController($scope) {

        $scope.employee = {

            firstName: "Kamlakar",

            lastName: "Singh",

            fullName: function () {

                var employeeObject;

                employeeObject = $scope.student;

                return employeeObject.firstName + " " + employeeObject.lastName;

            }

        };

    }

</script>

1.       employeeController defined as a JavaScript object with $scope as argument.

2.       $scope refers to application which is to use the employeeController object.

3.       $scope.student is property of employeeController object.

4.       firstName and lastName are two properties of $scope.student object. We passed the default values to them.

5.       fullName is the function of $scope.student object whose task is to return the combined name.

6.       In fullName function we're getting the student object and then return the combined name.

7.       As a note, we can also defined the controller object in seperate JS file and refer that file in the html page.

Now we can use employeeController Employee property using ng-model or using expressions as follows.

<div ng-app="" ng-controller="employeeController">

        Enter first name:

    <input type="text" ng-model="employee.firstName"><br>

        Enter last name:

    <input type="text" ng-model="employee.lastName"><br>

        <br>

        You are entering: {{employee.fullName()}}

    </div>

We've bounded student.firstName and student.lastname to two input boxes.

We've bounded student.fullName() to HTML.

Now whenever you type anything in first name and last name input boxes, you can see the full name getting updated automatically.

Example:

<html>

<head>

<title>Angular JS Controller</title>

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

</head>

<body>

<h2>AngularJS Sample Application</h2>

<div ng-app="mainApp" ng-controller="employeeController">

 

Enter first name: <input type="text" ng-model="employee.firstName"><br><br>

Enter last name: <input type="text" ng-model="employee.lastName"><br>

<br>

You are entering: {{employee.fullName()}}

</div>

<script>

    var mainApp = angular.module("mainApp", []);

 

    mainApp.controller('employeeController', function ($scope) {

        $scope.employee = {

            firstName: "Kamlakar",

            lastName: "Singh",

            fullName: function () {

                var studentObject;

                employeeObject = $scope.employee;

                return employeeObject.firstName + " " + employeeObject.lastName;

            }

        };

    });

</script>

</body>

</html>

Output:


Don't want to miss updates? Please click the below button!

Follow MindStick