In the last post , we learnt about the basics of AngularJS and created a simple hello world application. You can refer the link of my earlier post.

Learning {{AngularJS}} with Examples–Part 1

We have discussed the basic components of AngularJS that we used in our last post. As we discussed that AngularJS is a complete framework for writing client side code, it includes myriad components which cane be used leverage the latest design principles. We will be discussing following few components in this series

There could be few other components and concepts of AngularJS that is not part of the above image but it includes all that we need to learn to built up the foundation on AngularJS. I’ll be discussing all the mentioned components in the series of posts with tons of example.

Let me tell you the color coding briefly. The dark blue color shows that we have discussed it that in our last posts. Other two highlighted items will be discussed in today’s post. And items with light blue color will be covered in coming post.

In today’s post, we’ll take a step further and discuss some more concepts of AngularJS. In our example, we’ll provide a structure to our application which is the beauty of AngularJS. In last post, we created a Hello World application,  which used a controller and  ng-app directive which was used to bootstrap the application.

One of the most common tasks in the web applications is, to show the data the tabular format and Angular did keep it in mind. If you’ve worked earlier on some client side template libraries then you will find it similar to that. Even if we don’t have any idea about that then also you will find it very simple and easy to understand. Angular provides a way to repeat some part of HTML based on the provided list of data. So we can have code like

If we see here the red encircled area then we see ng-repeat directive. It actually repeats the element on which it is used based on the provided list of data . Here talks is an JSON object which contains list of talk. It says for every talk in talks, repeat the tr and evaluate the used expression based on the properties of talk. So if we have four items in the list then four rows will be created.

Now the next question is, how to provide the value to talks. As talks is being accessed here, it should be a global variable or a variable in the scope where it can be accessed. To fetch the data, there could be two ways

1- Initialize the value on the page

2- Or get the data from server/web services etc

Let’s take first scenario, initialize the value the on the page. AngularJS provides us a simple way to initialize using a directive that is called ng-init.

ng-init – This directive provides us a way to initialize a variable on the page. We can initialize the talks as

So here, put a div over the table and in div element, we initialized the variable talks using ng-init directive as above. So using this directive, we can provide some initial value to a variable.

I added the angular library on the page. Also I have used bootstrap.css for rendering the not so bad looking UI. Now let’s run the application.

So we have created an angular app. Now before providing it a structure, let’s discuss one very important component of Angular that we’ll use in today’s post that is called Module.So, What is Module?

Modules – Modules are like containers . It is a top level element and contains all the part of AngularJS that are used on the page. So let’s see how does it fit into an application

Above image is for the basic understanding. It shows an AngularJS application can have multiple modules and every module contains controllers, views etc.

There are many other components which we’ll introduce in coming posts. As we discussed in last post that the main beauty of the an AngularJS application is it’s architecture so let’s restructure the code that we have written and we’ll use another component module in this example.

As now we have controller and module in our application, these should be put in different JavaScript file. If you are working on some enterprise level application which has lots of pages then one need to decide how is (s)he going manage or structure that. There are different views on that I’ll not discuss that in detail. In my code, I normally prefer having folders functionality wise, which makes very easy to find any file, add/remove any functionality at any point of time.

In this example, I have created a folder named as events. Now I have put all the angular JavaScript files associated to this feature in the same folder. As we discussed that the top level item is module. So lets create a module named as eventModule.

So I have created a file eventModule.js and here I registered this module with angular

var eventModule = angular.module("eventModule", []);

Now let’s create a controller named eventController as

So here controller also got registered with Module. In this method we initialized the talks in $scope variable which is a default parameter to the controller.

Now let’s move our HTML page and provide the controller name to the element. as..

<div class="row" ng-controller="eventController">

Now we have created a module and a controller. Controller is also registered with module and controller is assigned to the  UI element as well. Also we mapped module with angular. What else is left?

How the module that we created will get loaded. In last post, we discussed that when AngularJS loads it looks for the ng-app directive and this is the place where we need to provide our module as

<html ng-app="eventModule">

We need to include all the controller and module JavaScript files to our page that we created. Now, we don’t have any JavaScript code on our page.

Now when we run the page, we get the similar output which we got initially. Refer third figure from Top.

So in this post, we discussed about some new directive ng-init, ng-repeat. Then we discussed and new component module and converted the application in properly structured manner.

In next post, we will about ASP.NET MVC and AngularJS and create some examples using both.

To navigate to previous and next post of the series, use the links at the bottom of the page

Cheers,
Brij

[9th Aug 2015 : Updated this post for Angular version 1.4.*]