Why this AngularJS “CRAZE”

Generation of the web page layout and Insertion of the content inside that layout is no-more the job of server side code

JavaScript can do the above job very well, especially with AngularJS. (i.e generation of layouts and insertion of the contents)

AngularJS framework helps the JavaScript developers to write well structured code in a very short time.

Why only AngularJS ?

to write Maintainable, Testable

and Reusable JavaScript Code

What is “special”

about AngularJS

1. Follows MVC/MVVM/MVW

2. Built in components for better code

a. Module

i. Controller

ii. Directive

iii.Service

iv. filters

3. Features

a. Dependency Injection

b. Data Binding

c. Dirty checking

d. Single Page Application

e. Routing

f. Filtering

g. HTML extension

h. Templating

i. Ready for the RESTful Services

j. Unit Testing

SPA (Single Page

Applications)

?

Single Page Application (SPA) is a web application or website that loads all of the resources required to navigate throughout the site on the first page load.

As the user clicks links and interacts with the page, subsequent content is loaded dynamically.

The application will often update the URL in the address bar to emulate traditional page navigation, but another full page request is never made.

AngularJS is one of the popular framework to develop SPA

Examples for SPA

FacebookGmailFlipkartTwitter

How to Develop

AngularJS Application

1. Create an AngularJS module

2. Add a controller to the module

3. Link the module and controller to HTML page

4. Perform data binding/templating whatever you want

(Example in the live code)

Data Binding

1. One way Data BindingData binding is the automatic synchronization of data between view and the model.

2. Two way Data Bindingthe synchronization process of data between view and model in the both ways.

Dependency Injection

A software design pattern that deals with how components get hold of their dependencies.

Directives

A directive is an extension of the HTML vocabulary that allows us to create new behaviors.

Ex: ng-repeat,ng-show,ng-hide ...

Directives are markers on DOM elements such as elements, attributes, css, and more. These can be used to create custom HTML tags that serve as new, custom widgets.

Filters

Filters transform the data before it is processed by a directive and displayed in a view without modifying the original data in the scope, allowing the same data to be displayed in different ways in different parts of the application.

Example: Apply ‘orderBy’ filter for ng-repeat directive

ServicesEncapsulate functionality(business logic) that you want to reuse in an application

1. Built-in Services

2. Custom Services

RoutingRoutes are the secret sauces that let us write Single Page Applications (SPAs) with ease.

We configure which views are to be shown for which URLs using the$routeProvider service.

conclusion

This is a simple introduction to AngularJS and its features.

In the coming session we will see all these features in detailed way.

Thank You!!!! Keep Smiling