[Dev Tip] Learning {{AngularJS}} with Examples–Part 2

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 that allows us to use latest design principles, there are many important components. Let’s see some of the important ones

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

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  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 does kept it in mind. If you’ve worked earlier on some client side templating features then you will find it similar to that. Else also it is very simple and easy to understand. Angular provides a way to repeat the some part of HTML based on the provided list of data. So we can have code like


So if we see here the red encircled area then we see ng-repeat directive. It actually repeat the element on which it is used based on the provide 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 Smilelooking 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 todays 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. So If you are working 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 in detail on that. But 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 etc.

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 an module named aseventModule.

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-appdirective 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, that we got initially .Refer third figure from Top.

So in this post, we discussed about some new directive ng-initng-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.



2 thoughts on “[Dev Tip] Learning {{AngularJS}} with Examples–Part 2

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