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.


<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.

clip_image002

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

 


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.

image

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.

image

We created AuthorApp module and AuthorController controller in Author.js. Now if you see we bind View and Controller in three steps,

  1. Implicit Scope Declaration
  2. Scope Inheritance
  3. Model-View Data Binding

In first step we did Scope declaration by setting ng-app directive to Angular module name.

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

clip_image004

Now any element inside this body can bind to array of controller.

clip_image006

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,

 


<!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.

Advertisements

6 thoughts on “Learn AngularJS: Hour 2

  1. Good artcile for beginners, if am not wong, found 2 spelling mistakes, Replace Product.js with Author.js and JOSN with JSON

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