17 Apr 2015

Angular JS

Ok, so for a start, google “javascript frontend framework”, yes “Frmework” and NOT the library that is a term that we use when describing or refering to some javascript code serving a specific functional need in frontend, be it sending requests to the servers, dom manipulations and much more. that is not the topic of this article. The term Frameworks (AngularJS to be specific) is the highlight here.

So first of all lets discuss what is a framework (In common not specificx to javascript only). A framework is a structure of classes and code, by using which you can create an application.

Now comming back to javascript frontend frameworks, by googeling the terms mensioned at the very start of this article, you will get the results like AngularJS, Backbone.JS,Ember.JS and comparision between various suct js names, which you may have never heard, but they exist for some time now.

Let us focus on the subject of the article, that us AngularJS developed by a team working in google . The AngularJS is probably the most popular frontend javascript framework as of now, in fact it is a part of MEAN Stack: MongoDB, Express, AngularJS,Node.JS.

The AngularJS is a MVW(Model View Whatever) framework, which is used to create One (Single) Page Applications where, unlike most of the web applications, there are no redirections to go from one page to another, instead, angular js uses different templets rendered dynamically and replaces them with the existing content displayed in a decided area.

A usual AngularJS application comprises of the following parts:

App (Containing all the configurations like templates and controllers declared, dependencies used, etc.)
Controllers
Model (The components that are used for )
Services/Factories i.e. Whatever (You can use them for utilities which caters to a particular business logic of an angular app module)
Views/Partials (The Html files containing the representation of the controller data)

Features of the AngularJS

The AngularJS has some of the promising features that are very useful to make the frontend development a lot more easy. Lets see them one by one

1) Data Binging:
Data Binding in angularJs is auto metic data synchronization of data between the model and view components, when the model changes, the view reflects the change.

2) Tamplates:
The templates are just plain old html,slightly extended to contain the angularJS instructions.

The HTML templates are parsed by the browser in to DOM which becomes the input for the AngularJS compiler. The angularJS traverses the DOM to generate instructions called Directives, responsible for setting up the data-binding for your application-view.

Unline other Javascript Libraries, AngularJS does NOT manipulate the template as a string. The AngularJS uses DOM as an input and not the HTML string

The Greatest advantage of this approach is that it creates a tight workflow between designers and developers. Designers can mark up their HTML as they normally would, and then developers take the baton and hook in functionality, via bindings with very little effort.

3) MVC:
AngularJS incorporates the basic principles behind the original MVC software design pattern into how it builds client-side web applications.

The MVC or Model-View-Controller pattern means a lot of different things to different people. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel) OR MVW (Model View Whatever).

4) Dependency-Injection:
AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test.

Dependency Injection (DI) allows you to ask for your dependencies, rather than having to go look for them or make them yourself. Think of it as a way of saying “Hey I need X’, and the DI is responsible for creating and providing it for you.

You can also create and use your custom dependencies also.

5) Directives:
Directives can be used to create custom HTML tags that serve as new, custom widgets. They can also be used to “decorate” elements with behavior and manipulate DOM attributes in interesting ways.

You can also creare your custom directives, which will allow you to perform some tasks without using a single line of jsvascript code

For example: Create a list of data passed to a view by controller.

6) Testing:
AngularJS allows to write the unit tests to test the code. Given the fact that JavaScript is dynamic and interpreted, rather than compiled, it is extremely important for developers to adopt a disciplined mindset for writing tests.

You can write the tests for particulat functionality, that will save you the effort to testing the application or a unit manually.

Conclusion:

We have covered the 6 of the greatest Features and advantages of the angularJS which gives the AngularJs an edge over the other similar jsvascript framework.

In the end, we can use and trust this bacause it has been built by name who knows the internet, clearly, the AngularJS is going to stay with us for a long time.

Author: Harshal Shah

Harshal Shah is CEO & Founder of Xhtmljunkies, Located in Gujarat, India, XHTML Junkies is one of the best companies that offer unique eCommerce solutions by the virtue of its dedicated professionals. Our professionals are extremely proficient in offering development services pertaining to eCommerce. You can find Harshal on Google+ and Twitter.