ANGULARJS

Requirements
Node.js - Node.js is a server side implementation of
JavaScript and is single threaded.
(Normal Installation from - http://nodejs.org/)
NOTE: Environment variables is to be set as the installed
location of node.js

Sublime text editor Its not necessary but is
recommended because its UI is better than an other editors
and it provides some more functionalities.
(Normal Installation from - http://www.sublimetext.com/2)

Dependencies for AngularJS
Node.js To enable npm so that bower can be installed.
Git It is necessary because some bower packages are to be
fetched and installed.
Bower It is just a package manager. It offers a generic,
unopinionated solution to the problem of front-end package
management.
Sample Code (Example)
Bootstrapping AngularJS apps
automatically using
the ngApp directive is very easy
and suitable for most cases.
Bootstrapping
index.html
Sample Code (Example)
Angular Templates
index.html
controllers.js
controllersSpec.js
The data model (a simple array of phones in object literal
notation) is now instantiated within
the PhoneListCtrl controller. The controller is simply a
constructor function that takes a $scope parameter.
In practice, we will not want to have our
controller functions in the global
namespace. Instead, we can see that we
have registered it via an anonymous
constructor function on the
phonecatApp module.

In this case Angular provides a
service, $controller, which will retrieve your
controller by name. Here is the same test
using$controller

Two-way Data Binding
index.html
Angular creates a two way data-binding
between the select element and
the orderProp model. orderProp is then
used as the input for the orderBy filter.
controller.js
controllersSpec.js
We modified the phones model - the array of phones -
and added an age property to each phone record. This
property is used to order phones by age.
The changes we made should be verified
with both a unit test and an end-to-end
test. Let's look at the unit test first.
XHRs and Dependency Injection
controllers.js
We'll use Angular's $http service in our controller to make
an HTTP request to your web server to fetch the data in the
app/phones/phones.json file. $http is just one of several
built-in Angular services that handle common operations in
web apps.

Services are managed by Angular's Dependency Injection
subsystem. Dependency injection helps to make your web
apps both well-structured and loosely coupled.
Note that the names of arguments are
significant, because the injector uses
these to look up the dependencies.
Templating Links & Images
index.html
To dynamically generate links that will in the future lead to phone detail pages, we used the now-familiar double-curly
brace binding in the href attribute values. Then we added the {{phone.name}} binding as the element content. In this
step the {{phone.id}} binding is used in the element attribute.

We also added phone images next to each record using an image tag with the ngSrc directive. That directive prevents
the browser from treating the Angular {{ expression }} markup literally, and initiating a request to invalid url
http://localhost:8000/app/{{phone.imageUrl}}, which it would have done if we had only specified an attribute binding
in a regular src attribute (<img src="{{phone.imageUrl}}">). Using the ngSrc directive prevents the browser from making
an http request to an invalid location.
Routing & multiple views
index.html
We have added two new <script> tags in
our index file to load up extra JavaScript
files into our application:
angular-route.js : defines the
Angular ngRoute module, which
provides us with routing.
app.js : this file now holds the root
module of our application.

Note that we removed most of the code in the
index.html template and replaced it with a
single line containing a div with the ng-view
attribute. The code that we removed was placed
into the phone-list.html template.

Here, we added another controller for
routing.
Applying Animations
bower.json
The animation functionality is provided by Angular in
the ngAnimate module, which is distributed separately
from the core Angular framework. In addition we can
use JQuery to do extra JavaScript animations.
index.html
Animations can now be created within
the CSS code (animations.css) as well as
the JavaScript code (animations.js).

NOTE: Be sure to use jQuery version 1.10.x.
AngularJS does not yet support jQuery 2.x.
animations.js
Note that we're using jQuery to implement the animation. jQuery isn't required to do JavaScript animations with AngularJS, but we're
using it because writing our own JavaScript animation library is quite tedious. For more on jQuery.animate, see the jQuery documentation.