Introduction to AngularJS

Santosh.Impossible
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 3075 red flag
Rating: 4 out of 5  
 1 vote(s)

In this article, we will learn about AngularJS. The main objective of the article is to address what, why and other details about AngularJS. AngularJS is the Super Heroic JavaScript MVW Framework.

What is AngularJS?

I am sure by now you might be already hearing the buzz word: AngularJS. Some might be also thinking along the lines like already so many good open source client side libraries and frameworks are available– jquery, knockout.js, backbone.js, spine.js, moustache.js, ember.js etc.-then why another framework?

To answer to the above question let’s start figuring out about what the heck is AngularJS.

AngularJS is super innovation from the highly talented developers at Google. It is open source javascript framework which is maintained by Google and community developers. It is MV*(Model-View-Whatever) framework for building interactive, single page applications, and the traditional web applications.

MV*, here the * can be mapped to controller or presenter, or anything else based on the conventions you follow for your application.


AngularJS is great framework to build well structured, highly scalable, testable and maintainable web applications including SPA.

Now let me jump to the next question: Why we should use AngularJS?

Why we should use AngularJS?

Before using any framework or library we as developers should always know about what problems the framework or library will address. Same was the thought with me before I started using AngularJS. Ok let’s start focusing on the problem now.
 
Directives

We all know that html is great declarative language fit for static documents only and not for applications. But AngularJS thinks like HTML was designed for applications and not for static documents. We can make the HTML dynamic by using javascript and css.

Have you ever thought like is it possible to have an html markup:

<statusbutton>Status of Product</ statusbutton>
Yes we can now say that it is very much possible to have a tag as mentioned a since AngularJS extends the HTML by providing directives which encapsulates the functionality of the markup listed above and thus allow us to create dynamic templates. Directives add rich elements to the DOM by enabling us to create our own HTML elements. They help us to keep things very simple and also help us in achieving the separation of concerns ideology.

We can leverage the inbuilt available directives and also create custom directives that can be leveraged as reusable components across multiple projects. Directives are designed to be standalone reusable elements separate from the main application which can be unit tested easily. 

We all know how the modern browsers are well adopting the HTML 5 standards. Let us assume that we have developed a custom directive for our application and in the future the functionality provided by the custom directive is provided as HTML5 feature, then it should be a simple change for us and our app will work without any issues. This shows that AngularJS is already working with forward thought process.

Filters

Filters are one of the best inbuilt features available in the toolset of AngularJS. Similar to directives they are also standalone components that are separate from the main application. Filters are used for data transformations such as date and currency formatting, reversing an array order, filter a grid data based on user input, implementing pagination. They can be used in view templates, controllers, and services.

DOM Manipulation

In traditional programming, all DOM manipulations are performed at view level. But as per AngularJS best practices DOM manipulation should be done inside directives and not in the views. Angular expects view as placeholders for the data. With this approach we can have parallel development for the view and directives without any distractions and deliver the application quickly.

Services

Much like filter and directives, services are also standalone components which are responsible for the heavy lifting. They contain all the core business logic and help in freeing up the controllers from fetching and manipulating the data. This design was made keeping separation of concerns.

Two-way data binding

AngularJS implements two-way data binding which connects the views and the models seamlessly. For example in case of jquery, we use events to update the view based on the changes made to the model. This methodology will eventually lead to cluttering of the code. But in case of AngularJS, whenever there is an update to the model object it will trigger an update to the view without any explicit need for DOM manipulation or event handling as we do in jquery.

Testing

AngularJS was designed keeping testing as no. 1 in the priority list. It uses dependency injection (henceforth will be referred as DI) which helps in managing all the dependencies like the controllers, scopes. Controllers use DI to pass the scope information which helps performing unit testing by mocking the data into the controllers and matching the expected output and behavior. Angular also has inbuilt mock HTTP provider which helps in injecting the fake server responses into the controllers. It also supports end-to-end testing. 

Well Suited for CRUD based applications

AngularJS is a great tool for applications which highly depend on CRUD operations. It is not good for Game and GUI editor type of applications which include intensive DOM manipulations.

Apart from all the features described above, it is an open source web application framework which is maintained by the Google developers and also well supported by community so, don’t worry about the fact that it will be stagnant. It is growing fast with a very good pace and is well adopted by many developers. Its current version is 1.3.0. 
One more important feature about AngularJS is its flexibility to work with any server side technology as long as it can serve the application through a RESTful web api. It can also work well with legacy applications and pages where already some other libraries are used (for example jquery). All the features provided by AngularJS can be modified as per our development demands.

Conclusion


Okay, by now we all are aware of what AngularJS is and what problems it can address. Hope you enjoyed reading the article

Thank you.



References



Page copy protected against web site content infringement by Copyscape

About the Author

Santosh.Impossible
Full Name: santosh patro
Member Level:
Member Status: Member
Member Since: 7/31/2010 7:22:29 AM
Country: India
santosh kumar patro
http://www.dotnetfunda.com
WebDeveloper

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)