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
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
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
Facebook
Gmail
Flipkart
Twitter
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 Binding
Data binding is the automatic
synchronization of data between
view and the model.
1. Two way Data Binding
the 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
Services
Encapsulate functionality(business logic)
that you want to reuse in an application
1. Built-in Services
2. Custom Services
Routing
Routes 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

Angular js introduction

  • 1.
    Why this AngularJS “CRAZE” Generation ofthe 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.
  • 2.
    Why only AngularJS ? towrite Maintainable, Testable and Reusable JavaScript Code
  • 3.
    What is “special” about AngularJS 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
  • 4.
    SPA (Single Page Applications) ? Single PageApplication (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
  • 5.
  • 6.
    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)
  • 7.
    Data Binding 1. Oneway Data Binding Data binding is the automatic synchronization of data between view and the model. 1. Two way Data Binding the synchronization process of data between view and model in the both ways.
  • 8.
    Dependency Injection A software designpattern that deals with how components get hold of their dependencies.
  • 9.
    Directives A directive isan 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.
  • 10.
    Filters Filters transform thedata 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
  • 11.
    Services Encapsulate functionality(business logic) thatyou want to reuse in an application 1. Built-in Services 2. Custom Services
  • 12.
    Routing Routes are thesecret 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.
  • 13.
    conclusion This is asimple introduction to AngularJS and its features. In the coming session we will see all these features in detailed way. Thank You!!!! Keep Smiling