Angular JS Controller

Introduction

In earlier post  we concentrated on the benefits of designing JS in a specific way. In this post we will look at

  • How to configure Angular JS?
  • Configure the controller
  • Important angular JS  specific attributes (directives)
  • Important angular  specific objects eg :- $scope, angular

Configure Angular JS

To work with the core  angular js functionality one needs to include only angular js  in view(jsp, html….)

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script&gt;

Configure Controller

Define Module in JS

moduleIn above case empty array indicates no dependency but has implicit dependency with core module.

Attach controller to the module

//Define MyController and attaching it to the module

myfirstAgnularModule.controller(‘MyController’,function($scope){

$scope.message=”Hello Angular”;

});

In above case $scope is an angular specific object.  Any parameter which starts with $ managed by angular js.

In above case we are attaching message to $scope object. Anything which we are attaching to $scope object will be acting as models.

By looking at this example we can say controller is not directly communicate with a view (html) but it is through the model.

On macroscopic level controller is responsible for

  • Organizing information
  • Control things to visible/hide on view
  • Communicate with remote server to fetch data.

Configure view for module and controller

<!– load angular js from CDN –>

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script&gt;

<body ng-app=”myfirstAgnularModule” ng-controller=”MyController”>

{{message}}

</body>

Angular js specific attributes/directives and binding expression

These attributes are known as directives

  • ng-app
    • Only one attribute must be present in whole html
    • Whenever angular js find this attribute. It will bootstrap itself.
  • ng-controller
    • One page can have multiple ng-controller directives
    • It must be defined at the same level or at child level of ng-app
  • Binding expression
    • In the above case {{message}} acts as binding expression
    • Binding expression helps displaying model data to view.

Output

opComplete Example

myFirstAngularExample.js

(function() {
    var myfirstAgnularModule = angular.module(‘myfirstAgnularModule’,[]);
    myfirstAgnularModule.controller(‘MyController’,function($scope){
        $scope.message=”Hello Angular”;
    });
}());

myFirstAngularExample.htm

<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script&gt;
<script src=”myFirstAngularExample.js”></script>
</head>
<body ng-app=”myfirstAgnularModule” ng-controller=”MyController”>
    {{message}}
</body>
</html>

Advertisements

About polganesh
Software Developer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: