Angular JS Controller
July 12, 2015 Leave a comment
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>
Configure Controller
Define Module in JS
In 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>
<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
Complete 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>
<script src=”myFirstAngularExample.js”></script>
</head>
<body ng-app=”myfirstAgnularModule” ng-controller=”MyController”>
{{message}}
</body>
</html>
About polganesh
polganesh