In hour 1 of this series we learnt to get started with AngularJS. In
this hour we will see Angular Templates and how AngularJS app can be
embraced into a pattern.
Let us start with writing a simple web application with static
template. In below application we are printing name of the authors in
HTML unordered list.
1
2
3
4
5
6
7
8
9
10
11
12
13
| <body> <h1>Authors : 8</h1> <ul> <li>Dhananjay Kumar</li> <li>Pinal Dave</li> <li>Glen Block</li> <li>Dan Wahlin</li> <li>Julie Learman</li> <li>Mahesh Chand</li> <li>Prabhjot Singh</li> <li>Gaurav Mantri</li> </ul></body> |
We will get application rendered as below and authors are printed in
HTML using static template. Below rendered page is pure static HTML
page.
Next we will learn to populate Authors dynamically using AngularJS.
Before we get into implementation of this, let us understand that
AngularJS Apps can be created adhering any MV* pattern. For this
implementation we will follow Model-View-Controller pattern. Let
us start with creating controller. Controller can be created in a
separate JavaScript file. I have created a JavaScript file Product.js.
Author.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| var AuthorApp = angular.module('AuthorApp', []);AuthorApp.controller('AuthorController',function($scope){ $scope.authors = [ { 'name': 'Dhananjay Kumar' }, { 'name': 'Pinal Dave' }, { 'name': 'Glen Block' }, { 'name': 'Dan Wahlin' }, { 'name': 'Mahesh Chand' }, { 'name': 'Prabhjot Singh' }, { 'name': 'Julie Learman' } ];}); |
Let us examine the controller class,
- In first line we are creating Module.
- In second line we are creating Controller. Controller is a function which takes $scope as parameter.
- Then adding authors JOSN array in scope of the controller. This is Model.
In Angular Controller is a constructor function that takes $scope parameter.
Once we have Controller in place we will have to create View. View simply displays model through templates.
View and Template get created in HTML. We will bind View with
Controller and Angular will project data from Model on the View. On the
View we are using various Angular directives.
We created AuthorApp module and AuthorController controller in
Author.js. Now if you see we bind View and Controller in three steps,
- Implicit Scope Declaration
- Scope Inheritance
- Model-View Data Binding
In first step we did Scope declaration by setting ng-app directive to Angular module name.
![clip_image002[6]](https://dhananjay25.files.wordpress.com/2014/07/clip_image0026.jpg "clip_image002[6]")
Then Scope Inheritance is done by setting ng-controller directive.
After setting ng-controller directive scope of body is set to controller
we created in Author.js
Now any element inside this body can bind to array of controller.
These are simple steps you need to follow to work with Angular
Template and Controller. For your reference code of View an Template is
given below,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!DOCTYPE html><html ng-app="AuthorApp"><head> <title>Angular Demo</title> <script src="Scripts/angular.min.js"></script> <script src="Author.js"></script></head><body ng-controller="AuthorController"> <ul> <li ng-repeat="author in authors"> {{author.name}} </li> </ul></body></html> |
In next hours we will get into other aspects of AngularJS.
Source Collected from :http://debugmode.net/2014/07/21/learn-angularjs-hour-2/
No comments :
Post a Comment