Learn AngularJS: Hour 2

Dhananjay Kumar
Jul 21, 2014
8.6k
0
2
Article

In the first hour of this series we learned how to get started with AngularJS. In this hour we will see Angular Templates and how an AngularJS app can be embraced into a pattern.

Let us start with writing a simple web application with a static template. In the following application we are printing the name of the authors in a 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>

We will get the application rendered as in the following and the authors are shown in HTML using a static template. The following rendered page is pure static HTML page.

Next we will learn to populate Authors dynamically using AngularJS. Before we get into the implementation of this, let us understand that AngularJS apps can be created that adhere to any MV* pattern. For this implementation we will follow the Model-View-Controller pattern. Let us start with creating the controller. The 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 the first line we are creating the Module
In the second line we are creating the Controller.
The controller is a function that takes $scope as parameter.

Then adding an authors JOSN array in the scope of the controller. This is the Model.

In Angular the controller is a constructor function that takes a $scope parameter.

Once we have the controller in place we will need to create the view. The view simply displays the model using templates.

The view and template are created in HTML. We will bind the view with the controller and Angular will project data from the model on the view. On the view we are using various Angular directives.

We created the AuthorApp module and AuthorController controller in Author.js. Now if you see we bind the view and controller in the following three steps:

Implicit Scope Declaration
Scope Inheritance
Model-View Data Binding

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

Then the Scope Inheritance is done by setting the ng-controller directive. After setting the ng-controller directive the scope of the body is set to the controller we created in Author.js.

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

This is the simple procedure you need to follow to work with Angular templates and controllers. For your reference the code of the view and template is given below,