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 – It’s 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 viewsindex.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 Animationsbower.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.