Angular unleashed

As mentioned already, in my last blog that Angular is really a full-featured SPA framework. It performs various operations underneath. Some of the basic operations like

Two-way data binding.
Model-View-Controller.
Routing of the Views.
Testing.
DOM manipulation jQLite is built-in which is kind of lighter version of jQuery. However, if you want to use more advanced stuff you can even use jQuery in here.
History’s built in. We can share code through factories and services and other things.

So, to get started we, will be starting the same from http://angularjs.org. From here, we will do download the required angular.js or minified version of the same file and use the same for later developments

The very 1st thing which we are going to discuss here is talk about

So, once we have grabbed the script as shown below in our web page. so, now we can start with Directives, Filters and Databinding

so, basically directives are a way to instruct about Angular or in short they teach HTML New tricks.

so, in the below snippet I have used basic built in Directives just to print whatever is getting typed in input text box.

we have used ng-app at the top of the page. we use ng- to instruct that it is Angular directive. It’s a built-on directive. we can also write custom directives.

This particular directive is very important because the script that’s now loaded at the bottom of the page which will initialize the Angular app.

So for example, this is an example of another directive called ng-model.
What ng-model does is behind the scenes it’s going to add a property up in the memory called “name” into what’s called “the scope”. This is like a ViewModel as in Knockout. what this is really doing behind the scenes is making an empty ViewModel but then filling it with a name property. Now if I want to write out that value then I can simply come over and add a data binding expression. Now, in angular databinding expression is always wrapped in between {{data-binding expression}} .

so, as you see in the above demo, whenever am typing in any input in the textbox that is coming as it is in the databinding expression. Let’s trick this a bit and let’s do one more demo with input type = password and then try what it takes out. again the same output will appear as shown below.

since, am using the Visual studio editor, so in order to get rid of little warning kind of thing on every ng- attribute, am going to prefix the same with data-ng- attribute and this will take out the little warning like shown below.

Now, lets try looping in a set of data or ViewModel with ng-repeat directive.

so, basically data-ng-init=”names=[‘Rahul’,’Sahay’,’Bob’,’Walter’,’Charles’]” is in memory collection of names and this one <li data-ng-repeat=”loop in names”>{{loop}}</li> is going to loop through each names container and take out and print one by one as shown below.

so, as you can notice that earlier binding is also working properly. Likewise, we can go ahead and test many other cases. same can be referred on the link http://docs.angularjs.org/api

Now, next thing is how to use filters. Filters are again very useful tool to get the output in a precised manner. we use this using “filter” keyword and separates the directives using symbol like “|” .