Angular JS Rocks and how!

Up until a few years ago, websites contained pages that were built in HTML and then converted to the specific framework to display dynamic content. These were frameworks like php, .Net, etc. hence there was a process to follow — first came the HTML, then the framework and then the logic. This process became too heavy and tedious to make any tweaks later. The page load times were also affected, as each individual page loaded. The Web needed a technology that kept things separated and light to overcome this.

AngularJs is a Framework built using Javascript to serve an MVC (Modal View Controller) structure. Modal is the Data acquired from API calls, View is the HTML View to render, Control is responsible to move the data between Model and View.

Usually, the server data is rendered as a JSON data and sent over API calls. AngularJs is a framework that purely renders in HTML. So, the server data is handled by the Controller.

Each HTML page is rendered as a View to which the data is served by controller from the Modal. So, there is just one index page which loads all the other pages using a controller without actually reloading a separate page entirely, which makes it faster and easier to handle.

AngularJs is not the first of its kind. There are many more frameworks available, but Angular is as User friendly as it is Developer friendly.

In the list of JS frameworks , AngularJS and EmberJs stand out. EmberJS is more or less used by large enterprise applications due to its complexity. Developers running smaller applications refrain from using it, hence they lean towards AngularJS. However, it does not directly support nested routing hence a module called the UI-router can be used, for it to make its mark.

Most frameworks nowadays are simply a bundle of existing tools. They are integrated tool sets, but are not very elegant. Angular is the next generation framework where each tool is designed to work with every other tool in an interconnected manner.

The following points make Angular a preferred choice for developers:

1) Easy MVC implementation

Angular implements MVC by asking to split the app into MVC components. The Angular then does the rest. It manages your components and also serves as the pipeline that connects them.

2) A Declarative UI

Angular uses HTML to define the user interface. HTML is a declarative language which is more intuitive and less convoluted than defining the interface procedurally in JavaScript. HTML is also less brittle to reorganize than an interface written in JavaScript, meaning things are less likely to break. Plus more UI developers can come in when the view is written in HTML.

3) Loop Models in Angular

Data models in Angular are plain old JavaScript objects (POJO) and they don’t require extraneous getter and setter functions. One can add and change properties directly on it and loop over objects and arrays at will. The code will look much cleaner and more intuitive.

4) Directives in Angular

Directives are Angular’s way of bringing additional functionality to HTML. Imagine a world where HTML has so many rich elements (for example <accordion></accordion>, <grid></grid>, <lightbox></lightbox>, etc.) that we never have to manipulate the DOM to simulate them. All that the app needs to do is to assign attributes to elements to get any functionality.

5) Flexible Filters

Filters refine the data before they reach the view and can involve something as simple as formatting decimal places on a number, reversing the order of an array, filtering an array based on a parameter, or implementing pagination. Filters are designed to be standalone functions that are separate from your app.

6) Write Less Code

All the points up till now means that you get to write less code. You don’t have to write your own MVC pipeline. The view is defined using HTML, which is more concise. Data models are simpler to write without getters/setters. Data-binding means you don’t have to put data into the view manually.

Dunst Consulting

Check out what Dunst has to offer in this space: