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.
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.
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
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
[9th Aug 2015 : Updated this post for Angular version 1.4.*]