AngularJS (1.x) is a client-side framework for developing browser-based applications using model-view-whatever architecture. It was created by Google and is open source. AngularJS uses templates, modules, services, dependency injection and two-way data binding to build single page applications. Key features include bootstrapping, routing, directives and unit testing capabilities. Angular 2 is a complete rewrite of AngularJS and uses only class-based services rather than multiple options.

1. AngularJs (1.x)
By Google

2. What is AngularJS?
• Client Side Browser App Framework
• Sponsored by Google
• Open Source
• Augment browser-based applications with model–view–
controller (MVC) capability
Basically AngularJS is MVW Framework.
What is MVW?
model–view–whatever

3. Other Javascript MV* Frameworks
 BackboneJS
 EmberJS

4. MVC : Model View Controller
View
ControllerModel
View :
• Renders the Model data
• Send User actions/events to
controller
• UI
Controller:
• Define Application
Behavior
• Maps user actions to
Model
• Select view for response
Model:
• Business Logic
• Notify view changes
• Application
Functionality
• Data in general

5. What is single page application?
• a web application that fits on a single web page
• providing a more fluid user experience similar to a desktop application
Condition:
• all necessary code is retrieved with a single page load
• the page does not reload at any point in the process
• does not control transfer to another page

6. Why we choose AngularJS?
• Bootstrapping
• Templates
• Module based
• Services
• Dependency Injection
• 2-way data binding
• Routing
• Directives
• Unit Test

7. Bootstrapping
7
Automatic Initialization Manual Initialization

8. Templates
Below attributes are used in a template:
• Directive — An attribute or element that augments an existing DOM
element or represents a reusable DOM
• Markup — The double curly brace notation {{ }} to bind expressions to
elements is built-in angular markup.
• Filter — Formats your data for display to the user.
• Form controls — Lets you validate user input.

9. Module
A module is a collection of services, directives, controllers, filters, and
configuration information. angular.module is used to configure the
$injector

10. Services
AngularJS supports the concepts of "Separation of Concerns" using
services architecture
There are two ways to create a service.
• factory
• service
Factory
Service
Some in-built services are in AngularJs like $location, $http and $routeProvider etc.

11. Dependency Injection
Example - I
Example - II

12. 2-WAY DATA BINDING
Model View

13. Routing
The ngRoute module routes your application to different pages without reloading the entire
application.

14. Directives
Directives are markers (such as attributes, tags, and class names) that tell
AngularJS to attach a given behavior to a DOM element (or transform it,
replace it, etc.)
Some angular directives -:
ng-app - Bootstrapping your app and defining its scope.
ng-controller - defines which controller will be in charge of your view.
ng-init - directive initializes application data.
ng-model - directive binds the value of HTML controls to application data.
ng-bind - bind the innerHTML of the element to the specified model property
ng-show – It shows the content if already hidden.
ng-hide - It hides the content.
ng-view - ng-view is the directive that angular uses as a container to switch between
views.
ng-include - include HTML from an external file
ng-repeat - Allows for looping through collections
ng-click - Used to fire an click event.

15. Unit Testing
 Karma
 Jasmine
For testing AngularJS applications there are certain tools that you should
use that will make testing much easier to set up and run.

16. AngularJS Development IDE
• Visual Studio 2012/2013 Express or higher
• Eclipse
• WebStorm
• Sublime Text
• TextMate

17. Difference between AngularJs (1.x) and AngularJs 2
• First thing, Angular 2 is not the upgrade of angular 1. Angular 2 is
completely rewritten.
• AngularJS 1.x is easy to setup. All you need to do is to add reference of
the library and you are good to go.
• Angular 1.x has 2 ways to bootstrap angular. One using ng-app attribute
and other via code. In Angular 2, The only way to bootstrap angular is
via code.
• In Angular 1.x, we can define a service via 2 different ways.
1) Factory
2) Service
And in Angular 2, class is the only way to define a service.

18. Demo

19. THANK YOU !