Angular JS in some Plain English..

If you are on this page, I am sure you have got an idea about how excellent Angular JS framework is especially when it comes to comparing with the old legacy MVC frameworks, And also, the ease it brings to developers to develop loosely coupled testable components on the client side.

For newbies, the obvious questions comes is “Where to start?”

Frankly speaking, I have been gone through with this myself, being a backend developer for almost 9+ years now, It took me a while to realize the things which Angular JS brought on the table e.g controllers, services, directives, two-way data binding, scopes dependency injections, routing etc.

Question for me was not about, What a controllers is? or What a Service or Directive is?

The main question on my mind was, HOW ON EARTH Angular is doing that smartly, and how these concepts are applied on the client side to grasp away the MVC flavor from the popular MVC based backend frameworks.  As I kept reading and trying various things, It helped me understand the core functioning of Angular, In this Post I am going to explain few of those terms in pretty plain English.

So here goes the Angular JS Glossary in some pretty plain English.

What is Data Binding?

In actual computer general terms, it’s a process which basically provides a way to create a read/write link on the elements that are bound to the data. So in data binding, whenever the outer representation of the data changes, it also automatically changes the underlying data e.g on HTML page, The “InputBox” value and “Name” attribute(underlying data) of the “InputBox” are bound together, It means if user changes the value of “InputBox” with some input, The DOM controller updates that “Name” attribute variable on the DOM tree and if via some DOM function, if we change the “Name” attribute variable with some new value, It will change the display value  of the “InputBox“(outer representation) as well.

In the context of web programming, we might have done using javascript frameworks like jquery/prototypejs

$(‘p.someClass’).text(“New text”)

Here basically, We have asked the jquery to find the element with a class name “someClass” and change the inner value of that element to the “New Text”.

Now assume, If this “p” tag doesn’t have any class name, in that case, It would be very hard to traceback the behavior of this routine especially when it is somewhere in the bottom of a big function.  

So, This is where Angular brings something interesting (declarative programming and data binding),  we declare binding explicitly on elements, and it makes it very easier to see how the particular element will be affected by our code. It makes code understanding very easier.


What is a Controller?

A controller is basically responsible for managing the objects (views), events etc.

Now the question is what kinds of objects?
For example, Let’s think of a “Student”, a controller doesn’t know what a student name is, or which dept it belongs to or which course it is taking currently. All it knows, From where to get the name, dept or current course information and how to pass it to the view to display on the screen, also, it provides functions which we can attach to the events e.g onmousedown.


What is a Scope?

As we know so far that Angularjs is consist of below components e,g.

View (HTML
 page)
Model (Data Model object i.e data for the view)
Controller JS function which controls setter/getters/remove/controls the data.

so in this context, the 
$scope is a model object.

Now the  next question comes is, What is a Rootscope?
All applications have a $rootScope which is the scope created on the HTML element that contains the ng-app directive.
e.g. <body ng-app=”myapp” >


What is a Directive/Custom Directive?

A directive is a plain custom HTML attributes/tags that angular knows what to do with.

When we use directives on the HTML page and when the HTML page renders, The browser doesn’t take any action because it has no metadata about those custom tags/attributes but Angular knows how to renders those elements into the HTML view, Its like browser ignores and Angular use that, it’s as simple as that.

Having a custom directives allows us to enforce reusability of the code, as each custom directive is backed up by some HTML/Inline template (HTML Contents).
The following advantages comes with the usage directives:

  1. Code reusability: Using directives across multiple views.
  2. Easy maintenance: As the code is shared, any future modification is easy to handle.

few examples:
core custom directives: ng-app, ng-controller, ng-bind, ng-click etc
custom application specific could be any name: myapp-checkbox, myapp-display etc


What is a Service?

As we read about the role of controller above i.e which gets the data, access the scope and passes it to the view.
So the question is from where the controller is getting the data, This is where “
Services” comes into the picture, “Services” in angular acts like a layer which provide/resolve data request. There are some different flavors (recipes) of Services in Angular context e.g constant, value, factory, service. Each recipe has its own way of providing the data.


What is a Dependency Injection?

Dependency is a weak relationship where one object requires another object to perform some task. A dependency is an object that can be used (a service) and an injection is the passing of a dependency to a dependent object (a client) that would use it (wiki).

As a real world example, When I was a kid, my parents were my DI framework, I mean whenever “I need something to drink with my food,” and then they will make sure I have something ready whenever “I sit down to eat :)”. I couldn’t think of any other example to demonstrate the outstanding work DI framework does in real time applications. To conclude the Dependency Injection is a practice where objects are designed in a manner where they receive instances of the objects from other pieces of code, instead of constructing them internally. And it makes testing (junits) your code very easier.. trust me when I say “very easier..”

I hope this post clears your doubts if any and motivates you to start your journey on Angular. Suggestions/comments are most welcome to improve this post contents.

Happy Learning 🙂

Thanks

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s