Published on Dec 18,2017
Email Post

The quest towards programming best practices such as readability, atomicity, extensibility and testability consistently result in developing new techniques and frameworks that ensure more code robustness and makes it “future-proof”.

AngularJS, maintained by Google, is one such popular framework. In the field of JavaScript, AngularJS brings in a lot of advantages that a web designer or a user experience designer can leverage. With the advent of JavaScript, the programmer was empowered with a dynamic client-side programming language with great power of expression (as against plain HTML) that helped to interact with the user asynchronously and display the desired content. Many new techniques have continuously empowered JavaScript and client-side technology. To name a few:

  • JSON – JavaScript is an object notation for storing and exchanging data and is also an easier alternative to XML.
  • Ajax – Asynchronous JavaScript and XML.
  • JQuery – A feature-rich JavaScript library that makes event handling, Ajax and data manipulation much simpler with an easy to use API that works across multiple browsers.

The big idea behind AngularJS

AngularJS brings in a revolution and takes up challenges to create what is called a “Single Page Application”, wherein the additional content is loaded on to the same page as required without the user really making out the difference of being on the same page! The objective behind only loading the part that is needed is obvious, as this clearly adds on to the speed, which ultimately points towards the huge advantage of less code that AngularJS offers.

AngularJS’s popularity from a business growth/application development standpoint

AngularJS’s structure and built-in features promote the following, which helps earn its popularity from a business standpoint.

  • Helps to create software while saving effort and time.
  • Uses best programming practices.
  • Helps to promote work and collaborate as a team.
  • Helps in maintaining software
  • Makes testability easy
  • Helps in packaging and deploying the application to mobile devices and the web

Angular’s popularity from a technology standpoint

AngularJS extends HTML and uses JavaScript language. So for those already familiar with JavaScript language, understanding AngularJS wouldn’t be a big deal. Further, the fundamentals of AngularJS will surely come easy to those who have an understanding of the MVC-Model View Controller Architecture. The list below highlights the stand-out features of AngularJS that makes it powerful as well as easy to use.

Client-side MVC

AngularJS brings in the power of MVC framework on to the client-side programming. This is what empowers AngularJS with the entire idea of single-page application (SPA) development resting on the MVC framework. The programmer can now segregate client-side business logic from the UI by breaking the programme into specific components – model, view and controller –  each being categorized to perform specific tasks. This brings in all the popular benefits of an MVC architecture. The components are now more flexible and are loosely coupled, further leading to the ease of code development as well as ease of code maintenance.

The MVC framework works on the basic idea of breaking down the programme into three different components. The model represents the current state of the application and encapsulates the application’s data; the view is the HTML pages with the data to be presented as UI; and controller contains the logic for the link between the view and the model.
On similar lines, in AngularJS, model components represent data in the form of a data structure or as JSON or from a database. This data is stored in something called as scope objects ($scope) which are used for temporary storage. Data is bound to these scope objects and made available to the view. The HTML templates, CSS and the AngularJS’s directives contribute as view components. The controller or view-model is a constructor function that takes scope objects as parameter to link the model and the view. It is written using JavaScript language, making it easy for the developers already familiar with the language. A view is generally linked to one or more controllers implementing different business logic. Also, the controllers are packed separately into modules which makes the code easy to maintain.

A declarative UI

The templates in the HTML page use directives form the basic building blocks in the AngularJS’s construct of view. They are like custom HTML tags and play a key role in the template. They are commands that tell AngularJS to do specific jobs. ng-app, ng-controller, ng- model, ng-view are a few main directives (ng is used by AngularJS to name spacing). The use of directives along with the HTML page offers the developers a declarative approach to UI. The use of directives give a more defined look to the HTML page and just by looking at the page it is easy to figure out where the data bindings and function calls are taking place.

Document Object Model (DOM) manipulation

DOM manipulation has originally been a part of the view, where it was with the view to modify the DOM to add behaviour or to update DOM to present the data. AngularJS offers the flexibility of putting all the DOM manipulation code into directives, thus easily separating that code out from the view and making it available as standalone reusable units. This helps the UI developer to concentrate fully on the user interface and the application developer to work separately on DOM manipulations and JQuery calls.

Two-way data binding with MVVM

In AngularJS, model / data is referenced using scope objects ($scope). Scope can be looked upon as temporary storage to put and get the data. Properties as well as functions can be attached to the scope to make them available to the view. The concept of “scope” in AngularJS is crucial as it helps the model, view and controller work in sync. It helps in updating corresponding changes in the model as per the changes in the view and vice versa by refreshing the appropriate binding points in the templates. The two-way data-binding and the nature of scope objects have led to the controller being referenced as view-model. Hence, the AngularJS architecture as MVVM (Model, View, View-Model) is popular.

So again, no explicit coding for wrapper classes etc. is required for checking event triggers and updates. Scope being the link between the model and the view, keeps both updated automatically with changes occurring in either. So the magic of two-way data binding greatly contributes in reduced code and time.

‘Services’ by AngularJS

With different model, view and controller / view-model components, programmers need to link or bind them to be able to execute the desired output. The link or binding of the components is taken care by AngularJS’s built-in services. Hence, separate code for binding the components together is not required as it is already taken care by AngularJS.

Apart from linking the MVC components, there are many useful built-in services that ease out the day for a programmer.

  • $http – to make an Ajax call
  • $routeProvider – The AngularJS’s design to execute single-page application works upon dividing the single page into multiple logical views for better management. We then require something to load the different parts as needed, which is where the routing service comes in. $routeProvider does routing and deep linking to organize the views and controllers.

Dependency injection sub-system

The basic programming concept of having dedicated functions to perform specific tasks and to have the required data for the functions to be passed as parameters into them instead of hardcoding it inside the function form the basis of the idea behind what we call dependencies in AngularJS.

Working on the same concept, AngularJS allows various components to use other components on which they are ‘dependent’ with the help of dependency injection sub-system. This is a design pattern that helps the component to locate its dependencies. For instance, a controller might be dependent on a service and hence by declaring its dependencies, AngularJS’s dependency injection system makes the service available for the controller’s use. Apart from making a programmer’s task easy, this software design pattern helps in keeping the components reusable, easy to maintain and ready for testing.

Great for unit testing

JavaScript that comes with almost no help from the compiler strongly needs to be tested and this set up in AngularJS, where we have different components dedicated to specific tasks, leaves the developer / tester with little scope for not testing it!

So to summarize, AngularJS with its powerful design pattern, saves big on reduced code and development time.

Got a question for us? Please mention them in the comments section and we will get back to you.

Related Post:

Share on

Browse Categories