What is AngulalJS?
- It follows MVC framework. If you don’t have Idea MVC framework, I’ll suggest you to get an Idea of MVC framework and then start learning AngularJS. You can refer below wiki page on MVC framework.
- AngularJS is primarily aimed to develop SPAs (Single Page Applications), it means your single HTML document turns into application. But it is also used a lot in ASP.NET and other applications .
- It provides it’s own and very rich list of attribute and properties for HTML controls which increases the usability of it exponentially.It is also called directives.
- Supports two-way binding that means your data model and control’s data will be in sync.
- Angular supports Dependency injection. Read more about dependency injection on wiki.
- Angular library is also available on CDN so you just need to the url of the CDN and it available for use.
AngularJS is Open Source
So let’s discuss the main components of AngularJS. These are
Controller – It is main component of AngularJS and contains the state and logic both. It acts as bridge between services and views.
Views/Directives – Here we generate the UI. Directives extends the HTML element and enables us to generate the complex html easily. Controllers talks to view to both directions.
Services – It contains the core logic and state of the application. In it, we can communicate to server to get and post the data.
Now let’s see all the above components glued with each other.
Now you have got the basic explanation about the basics of AngularJS. So let’s jump to the coding. We need to learn two things mentioned below before writing the first application
2- $scope – This is one of very important variable used in AngularJS. It provides and link between the data and views. It holds all the required data for the views and used with in the HTML template.
3- ng- – All the elements that are provided by angular starts from ng-. So if you see some attribute that ng- and angular library is also included in the page, then you can assume that this should be angular element only.
4- ng-app – This directive is used to bootstrap the application. Normally, it is put at in top level element like html or body tag. (That will be discussed in details in coming post).
Now lets write our first Hello World application with AngularJS. In this example, I’ll be using the basic construct of AngularJS. I have created Empty Project in Visual Studio and added an HTML page Home.html and written it as
- I have included AngularJS library on the page using Google cdn.
- Here we have created a module myApp that is assigned to ng-app attribute which works as container for an Angular application. We will discuss module in detail in coming posts.
- Whenever we want to use the AngularJS, we need a controller. We defined our controller named HelloWorldCtrl here. Controller contains all the logic of an angular application. I appended Ctrl in the name just as a naming convention. Controller is later used in HTML element. Controller can be created in different file which we will see in coming posts.
- We already discussed about $scope. This is a parameter in controller method and we can create dynamic properties and assign values to it, which can be later can be accessed in UI element. Here helloWorldMessage is used which is a dynamic property, created in controller.
- Here we created a new property helloWorldMessage to $scope variable and assigns the message.
- As discussed earlier that this attribute is required to bootstrap the AngularJS application so I have put it in body element. Putting it at body element allows us to use AngularJS inside this tag. In the above application, I could have put it at h1 element as well because I am using AngularJS inside this tag only. The scope can be displayed pictorially as
- Now we see the expression here. As we provided the controller in this element and we can access the property helloWorldMessage that we defined in the controller.
Now it’s to run the application.
We can see the message with date and time that we have provided. Our page got rendered as per expectation. Now Let’s discuss the flow of the angular page. It can be depicted pictorially as
So the above picture clearly illustrates that How does the flow of Angular page work at high level.
So In this post we created a very simple page which has all the code on the same HTML page. In the next post, we’ll learn more concept and write a more detailed page and provide a better structure to the application.
Sample is attached with the application.
Hope you have enjoyed the post. To go next post post in the series, use link Next Post ==> at the right side at the end of the post.
[9th Aug 2015 : Updated this post for Angular version 1.4.*]