Introduction to 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.

 

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

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.

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.

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.

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. 

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.

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