AngularJS is popular and rightly so! People talk about the various features it has to offer with big terms like MVVM, dependency injection mechanism, two-way data binding, deep linking and services that AngularJS offers. That’s a fair amount of big things and seem to be complicated. Is it really? In this blog, the idea is to help you get an aerial view of AngularJS to see the big picture and how AngularJS’s basic building blocks fit in.
To put things simply, I can say that the foundation of the entire construct of AngularJS is based upon the idea of divide and rule! Yes, this is exactly what AngularJS does by executing MVVM framework. MVVM is another name for the popular server-side MVC framework. AngularJS and other Single Page Application software use MVC on the client-side and often refer to it as MVVM or as AngularJS says MV* meaning model, view and whatever, where ‘whatever’ actually means, whichever way one would like to refer to the controller.
What is MVVM?
As we know, MVC framework is an established concept popularly used for the server-side programming, where the programme is broken up into components – model, view and the controller. This architecture runs on the basic idea of separating the view from the logic. It divides a software application into these components for the ease of code development and maintenance. Broadly, in an MVC – model represents the state of the application and does the job of managing the data in the application. View does the job of presenting the model as UI to the user, usually done via HTML templates, CSS etc, and controller serves as the link between the model and the view and handles business logic by accepting inputs from the user and converting it into commands for either model or view.
From AngularJS’s perspective, model and the view are same as they have been in the traditional sense. Again, model refers to the data that represents the current state of the application.
The view contains our old HTML template, CSS etc. along with some key features introduced by AngularJS – directives and filters, which become a part of the view.
The ‘KRA’ as assigned to the controller on the client-side, is the same as that to the server-side controller, but they are structurally and also operationally different in many ways. They are thus referred to differently as model-view, and rightly so, as they still do the job of linking up the model and the view. These model-view components, make use of AngularJS’s factories and services to connect to the back-end and get data from the server and for other services, again driven by the idea to not have everything in one component, but broken up into various units.
What’s the need for MVVM?
With applications sporting powerful features, programmers saw more amount of the application’s logic moving to the client-side. They recognised the need to handle all the data from the server in a better way. This made way for client-side MVC / MVVM– model, view and controller / model-view. Thus, by using MVVM, AngularJS was able to better handle the following challenges –
- Managing data – by model components
- Managing DOM – by view components
- Managing logic – by view-model components
Breaking the programme into various components makes sense when they are also successfully linked up and brought together in a well-defined way to be able to produce the desired output as needed. AngularJS’s support-system, with all functions and services that it offers, is like the hands of the puppet show artist that shrewdly makes puppets dance.
So let’s take a look at these components or the building blocks of AngularJS and how AngularJS packages and links them up to make it a complete treat for a programmer.
As mentioned earlier, AngularJS uses directives which are custom HTML tags that are embedded in the HTML page. They are like commands that tell AngularJS to perform tasks as defined for them. They mainly contain the code for DOM manipulation. To list a few-
- ng-app: declares the use of AngularJS in the application and asks to scan the application for other AngularJS components as well.
- ng-model: links the data in the HTML form to the model, which in AngularJS’s case is done using the ‘$scope’ service, where the data can be bound to the scope objects as functions and properties.
- ng-controller: binds the view to the specific controller using this directive.
They do the task of manipulating or formatting the data to make it ready to be presented by the view.
They are the link between the model or the application’s data and the view, and contain the logic for binding the model and view together.
Factories / Services / Provider:
AngularJS encourages ‘separation of concerns’, which basically means to separate out the functionality that is common and can be reused into different reusable components. AngularJS has provided some of these as ready-made offerings, which the programmer can directly use. They are in the form of factories, services and providers, with all of them doing the job of executing a specific functionality, with differences being in their construct. AngularJS offers some built-in services which are of key importance and play a major role in accomplishing some of AngularJS’s core offerings that makes it stand out. For instance, to give an idea –
- $scope –This service from AngularJS, helps the controller in linking the model to the view in a way to be able to execute two-way data binding. Two-way data binding eliminates the need for writing code for getting and setting the data every time it changes as it is automated with the use of this service. Scope objects act as temporary storage for the application data and help execute two–way data binding by making use of the directive ng-model and data-binding expressions.
- $routeProvider – in the SPA (single page application) world, various views are available and so there is a basic need of help that can be a guide for routing the views and to also associate them to their controllers. This service by AngularJS helps in routing and deep linking of views.
By offering the many built-in services, AngularJS has immensely saved on the amount of time and money which has eventually brought in its popularity.
Modules are key to AngularJS and they can be thought of as a container inside which each of the above components – directives, filters, controllers, factory, service, provider are defined. Which means, all the components of AngularJS reside inside Modules. Having a defined place and name for each component of course helps in keeping the code clean and better managed, but AngularJS’s modules are key to a far more important responsibility than that. They help in connecting the components and making them available for each other as needed. How?
AngularJS uses dependency-injection (DI) mechanism which is a design-pattern or framework that helps a component locate its dependencies. To understand the term dependency, let’s understand that a component can be dependent upon or make use of the functionality of other components. This is referred to as a component having ‘dependencies’. AngularJS first segregates the code with specific functionalities into separate reusable units which are then made available by injecting them into the components that need them. The term ‘injection’ might sound a little overwhelming and this is where the role of the modules come in.
Dependency Injection mechanism is used throughout AngularJS and helps connect / locate components that are declared in the dependency list of the modules. Modules facilitate injection or passing of the dependencies for a component in the form of an array list at the time of creating the module. The dependencies of a component can be defined in the configuration block of the module and while the component is loaded, AngularJS knows what dependent components to load as well. This is done so that these dependencies can be made available and brought to use as required.
Hence all components in AngularJS need to be inside a module to be able to connect with the rest.
To draw an essence from the above, AngularJS has set the stage for developing SPA and with the use of its built-in services and packaging inside modules, it is a cake-walk for developers to build a powerful client side application.
So let’s put the pieces together and summarize with the help of the picture below. The image above of MVC architecture has been modified to depict the add-on features of AngularJS, with the directives, filters, controllers, factories and services all defined inside modules.