Why AngularJS ?

Posted: August 9, 2018 in Angular JS

AngularJS takes a different stance on how it delivers data-binding and other engineering concepts than frameworks such as Backbone.js and Ember.js. We stick with the HTML we already know and love, letting Angular hijack it and enhances it. Angular keeps the DOM updated with any Model changes, which live in pure JavaScript Objects for data-binding purposes. Once a Model value is updated, Angular updates its Objects which become a source of truth for the application’s state.

  • MVC and MVVM

If you’re used to building static websites, you’re probably familiar with manually creating HTML piece by piece, integrating your “data” and printing the same HTML over and over again. This could be columns for a grid, a navigation structure, a list of links or images and so on. In this instance, you’re used to the pain of manually updating HTML for a template when one little thing changes, you’ve got to update all further uses of the template to keep things consistent. You’ve also got to stamp the same chunk of HTML for each navigation item, for example.

With Angular we have proper separation of concerns, as well as dynamic HTML. This means our data lives in a Model, our HTML lives as a tiny template to be rendered as a View, and we use a Controller to connect the two, driving Model and View value changes. This means a navigation could be dynamically rendered from a single list element, and automatically repeated for each item in the Model.

The difference between MVC and MVVM, is that MVVM is specifically targeted at user interface development. The View consists of the presentation layer, the ViewModel contains the presentation logic and the Model contains our business logic and data. MVVM was designed to make two-way data binding easier, and frameworks such as AngularJS thrive from it.

  • Two way data-binding

Two way data-binding is a very simple concept which provides synchronisation between Model and View layers. Model changes propagate to the View, and View changes are instantly reflected back to the Model. This makes the Model the “single source of truth” for maintaining the applications state.

Angular use plain old JavaScript Objects for synchronising Model and View data-bindings, which makes updating both a breeze. Angular parses back to JSON and communicates best with a REST endpoint. This approach makes building front-end applications seamless as all the application state is held on the browser, not delivered in pieces from a server and state becomes lost.

The way we bind these values is through Angular expressions, which take shape as handlebar templates. We can also bind Models using an attribute called ng-model. Angular uses custom attributes for various APIs that feed back into the Angular core, we’ll learn more about these ng-* prefixed attributes as we continue.

  • Dependency Injection (DI)

Dependency Injection is a software design pattern that deals with how components get hold of their dependencies. An injection is the passing of a dependency to a dependent Object, these dependencies are often referred to as Services.

In AngularJS, we cleverly use the arguments of a function to declare the dependencies we want, and Angular gives them to us. If we forget to pass in a dependency but reference it where we expect it, the Service will be undefined and result in a compile error inside Angular. But don’t worry, Angular throws its own errors and makes them very useful to debug.

  • Application structure

Amongst Angular’s many APIs, we’re given application structure in a consistent fashion, which means generally our applications are all built in a similar way and developers can quickly jump onto projects if necessary. It also creates predictable APIs and expected debugging processes which can enhance development time and rapid prototyping. Angular is structured around “testability” to be as easy to test and develop with as possible.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s