August 5, 2015

AngularJs Controllers

AngularJs Controllers : Are used for controlling the application data. Controllers are defined in ng-controller directive. Controllers are basically javaScript objcts.

Syntax : AngularJs Controllers


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

</div>

Lets understand with following example and demo.
If want to try the example by your own just copy and paste on .html file and run to see the ouput

AngularJs Controllers Example

Example of AngularJs Controllers

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>

<body>
<div ng-app="myApp" ng-controller="myController">

    <p>Enter Name <input type="text" ng-model="name"></p>
    <p>{{name}}</p>

</div>
<script>
var firstApp = angular.module("myApp",[]);
 firstApp.controller("myController",function($scope){
 $scope.name = "Tani"

});
</script>

</body>
</html>

Try it »

The Application is ng-app=”myApp” under which the application will run. ng-Controller =”myController” is angularJs directive. The above example shows the function in the controller code , this functions has a $scope object which is used to set the name in the field “name”. The value for the “name” filed is associated with the model “ng-model” named as “name” in input field.
The main application ng-app=”myApp” is main body of the application under which complete applications runs.
The objects are initialized when applications runs. The controller named as “myController” controls the flow of the
application and plays the important role in application handling.

You can create a separate file to keep the controller code.

Example : Create a myController.js file put in (for example “js”) directory you wish. You can Include it as it :

<body>
<div ng-app="myApp" ng-controller="myController">

    <p>Enter Name <input type="text" ng-model="name"></p>
    <p>{{name}}</p>

</div>
<script src="js/myController.js"></script>

</body>

Now you can add your controller code in the above file.

You can also add the variables in the ng-init directive to use it in the angularJs application. Controllers can interact with the external files also. You can load data from external file and use it in your application for processing. You can load data in json format and xml format.
The Output of the above demo will be :

Angularjs controller example