What is AngularJS? ... And why AngularJS?

What is AngularJS?
AngularJS is a modern JavaScript framework to build SPA (Single-Page Applications). It is a hybrid of MVC (Model-View-Controller) and MVVM (Model View ViewModel) architecture. They (AngularJS team) sometimes proudly call themselves as MV* (Model View Whatever) framework. Before we go in depth about Angular, lets understand what is SPA?

What is SPA?
Single Page Application (aka SPA) is taking the web application world by the storm. The goal of the SPA is to provide user with a very responsive and user friendly UI interface.  These applications uses web page as a shell and content of the page is refreshed completely or partially without causing complete reload of the page. The three building blocks of the SPA are HTML, CSS and JavaScript on the client side and any server language of desire.

Challenges of creating SPA?
In SPA applications, updating the content of the page through AJAX calls and not reloading complete page causes its own issues. Here are the some of the issues

• JavaScript Heavy application: SPA application uses lot of JavaScript to manipulate HTML DOM on the client side. Normally all SPA are heavy client side applications. This means, writing lot of JavaScript. With the traditional way of writing JavaScript code, we (and not all of us) normally bind everything to the global namespace when we declare variables which can result lot of conflicts and hard to manage code as it is not modularized. Defects become hard to be traced at the compile time as all variables share the same namespace and might conflict with each other. With growing application, JavaScript code becomes bigger and harder to manage. 
• Lot of DOM manipulation: SPA heavily rely on JavaScript to manipulate DOM tree to update the content of the page. This brings its own challenges as jQuery has really made selecting and manipulating DOM tree very easy but failed to convey the message that probably the re painting HTML page is the most expensive task. Developer tend to read directly from the DOM tree and make changes back to it in the increments. This, probably is not the most efficient way of doing it as in one event, we might read and update the same element several times.
• Read and Update: JavaScript code is used to set the values in the HTML controls and save the changes back to server by reading back the values from the controls introduces lots of JavaScript code lines. In vanilla JavaScript there are always two or more lines of code associated with each HTML control for the same action and if the number of controls are more, it increases the JavaScript code making it harder to manage the code base.
• Testability: One of the easy way of managing code base is by dividing the code into small manageable modules by functionality and test it thoroughly. But it is difficult to unit test modules if they have any dependencies on any other modules. Since JavaScript by default does not support dependency injection and we use concrete objects, it means they should be up and running too. Also dependencies like AJAX calls are hard to mock. This causes lot of untested code in the main app. This also reduces our traceability with no way to track any changes in the code blocks. 
•  Browser Navigation: For SPA, AJAX calls are used to interact with the server, which does not trigger any URL change. This way user can change the main content of the HTML application using AJAX and pretend that next section is loaded with responsive behavior. But this causes issue as it breaks the traditional behavior of the browser navigation. Ajax calls don't update the URL history, so in attempt to go back to last page using browser navigation, this might take user to previous register page in browser history which might not what user is expecting. To over come this issue, "#" are used in the URL to depict URL change ( as any change in the URL after "#" does not trigger browser to reload the page. but it gets registered in the browser history) and design some pattern to make AJAX call on/with/after URL change. This is also know as deep linking, but to master deep linking and make it in all browser, its very difficult. Also hard to test all types of scenarios.

There are many good libraries which have changed the way applications are written using JavaScript like

• jQuery (famous for DOM manipulation)
• KnockOut (famous for MVVM pattern)
• RequireJS (famous for module loading and dependencies injection)
• etc 

which solves one particular problem of building web application in a excellent way but not as one framework. They all can be clubbed together to work with each other but they were not designed to do so. And there is always duplicate functionality b/w there libraries as they all try to go little extra mile to sell themselves.

Why AngularJS?
Like I described earlier, Angular is complete framework which takes care of all the features required for the development of the SPA application, plus its extendable. Here are the feature list

• Directives: In AngularJS terms, directives are making HTML smarter. Directives can be specified as tags, attributes or classes like ng-view, ng-repeact etc which makes HTML declarative. It also makes HTML code reusable. We can extend default set directives provided in core Angular for our application. During compile time, it looks for directive keys and executes the code to update the HTML as specified in the link function. This will update the specified HTML in template as required by the directive. This helps the keep the DOM manipulation separated from business rules.
• Supports DI: This is one of the biggest selling point of the AngularJS, supporting Dependency Injection. In Angular, we can create small modules aka services, which can be injected in the controllers, directives or other services. This allows us to mock the services during unit testing and test the actual unit of work without any dependency. By creating services, code can be reused in different modules and it does not interfere with the main business logic of the application.
• Supports MVC: Angular supports MVC pattern in the development of the application. We need to register controllers either in the config associated with the URL (which is appended after "#" in URL) or we can specify it in the HTML with supported attribute (called directives) i.e. "ng-controller". Controller is the place where we set the scope which is the view model angular uses to update the HTML template to create the view. By this approach we separate the business logic in the controller or service (which can be injected in the controller and then consumed) and DOM manipulation. Angular updates the view for us in the end with the final value of the object after all business rules implemented which avoids continuous redrawing caused by frequent changes.
• Supports Routing: AngularJS route module helps in browser navigation. It manages the deep linking for us. We can pull the values like id etc from the URL and use in our code.
• Testability: Since angular uses DI to inject different services in the controller to be used along the business logic, this approach helps us to keep the code mode testable as we can mock these services to test our business logic behavior. 

The best part of AngularJS is that all these feature are extendable based on our project requirements. We can choose which module to be used in the application. This helps us to keep the 3rd party code light weight and to only include pieces we need for development.

Happy coding ...