home

Angularjs Controllers

Angularjs applications depended on the controllers to control the entire flow of data of application. This attribute defines a Controller to be bound with the view. Controller is defined using ng-controller directive. A controller is a JavaScript Object, which is created by a standard JavaScript object constructor.

How to Define a controllere

ng-controller directive defines the controller.

Any way we have some basic idea of angularjs directives and expressions.

Controller is a javascript object containing with attributes/properties and functions.

Here we defined example controller testController with using ng-controller directive. below we have basic controller.
overview code next example you will see more about controller.

var app = angular.module('testApp', []);
app.controller('testController', function($scope) {
    $scope.firstName = "thomas";
    $scope.lastName = "Cook";
});

'testApp' is defined with div and applications runs inside.

'testController' defined as a JavaScript object with $scope as argument.

'$scope' refers to application which is to use the 'testController' object.

'Controller' creates two properties /variables in the scope - firstName and lastName.

'ng-model' binds the input fields value to the controller properties - firstName and lastName.

<div ng-app="testApp" ng-controller="testController">

First Name: <input type="text" ng-model="firstName">
Last Name: <input type="text" ng-model="lastName">

Full Name: {{firstName + " " + lastName}}

</div>

Bounded firstName and lastName to input element with ng-model directive.

Bounded full Name {{firstName + " " + lastName}} to html view.

Full name automatically gets update(full name) when you entered text in the input.

ng-contoller directive above code demo


First Name: 
Last Name:
Full Name: {{firstName }} {{lastName}}