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

Angular Directives

I am sure if you are on this page, you must have already got an idea of how good Angular framework is.  This is my first post on Angular topic and I am trying for many in coming few days :), Lets start…

Angular provides many directive which are very helpful whenever it comes to manipulate DOM content tree, event routing, data binding etc. The framework contains a set of built-in directives which offers very helpful functionality to the applications. AngularJS also let us define our own custom directives. AngularJS directives are extended HTML attributes with the prefix “ng-”.

In this post I will talk about creating simple custom directive and how to read value from them or read from external template. Remember this is a very little overview of the functionality Angular directive provides but it will give some insights directives and their usage.

Step 1: Import the required Angular JS file in the HTML File.

<!DOCTYPE html>
<html>
&lt;script&gt;http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js&lt;/script&gt;

Step 2: Define the NG App (Angular App), Along with I am also initializing  one array with some dummy values for our example.

<body ng-app=”myApp” ng-init=”msgs=[‘hello’,’hi’,’its’,’me’]”>

Step 3:   Define our Directives, you can name them anything meaningful, Fo this post I am going with the below name.

<!– new directive using external template, very useful for code reusability.–>
<test-directive> </test-directive>
<!– another directive, in page scope–>
<notify>here</notify>

Step 4: Define the Angular App.

var app = angular.module(“myApp”, []);

Step 5: Define our Custom Directives.

We define directive using .directive function, which takes the directive name and returns its corresponding function.

In this directive, I am using an external html template to renders the dom tree. Look at the “templateUrl” field which takes the path of html resides in same location.

app.directive(“testDirective”, function() {

return {

restrict :  ‘E’,

   templateUrl : ‘msg.tpl..html’

};

});

Contents of “msg.tpl..html

<p ng-repeat=”msg in msgs”>{{msg}}</p>

This is the another example of Directive, Here I am reading the value associated with the directive, weather it’s an tag or attribute value.

app.directive(“notify”, function(){

return function(scope, elem, attr){

alert(elem.html() + ” Tag Value”); //reads the value from Tag
OR if tag is restricted to ‘A’, then use the the below.
alert(attr.notify + ” attribute Value”); //reads the value from Tag attribute

};

});

</body>
</html>

Important to Know:

Restrictions

We can easily restrict  directives to tightly get invoked under some of  the methods.
The legal restrict values are:

  • C for Class
  • E for Element name
  • M for Comment
  • A for Attribute

Default values are ‘E’ and ‘A’, It means we can use the directive as element(Tag) name or as an attribute name.

Well, that’s it.

I hope the post make sense to you, I have just started working on using Angular with main focus on Rest Side Development, But I will make sure to post some interesting stuff coming my way while integrating both.

Happy Learning 🙂