This document summarizes a presentation on AngularJS. It introduces AngularJS as a JavaScript framework for building single-page applications. It covers key AngularJS concepts like modules, controllers, views, directives, routing, services, filters and custom directives. It also provides examples of creating modules, controllers and views, using directives for data binding, implementing routing and dependency injection. The presentation concludes by discussing upcoming topics like custom directives, isolated scopes, services and testing with AngularJS.

1. Angular.JS
Presenter: Nakul Suneja, Mindfire Solutions
Date: 26/03/2015

2. Introduction To AngularJS.
1. Single Page Application.
2.What is Angular.js?
3.Why Angular.j
4.Modules.
5.Controllers
6.Views
7.Directives
8.Angular Routes
9.Custom Directives
10. Angular Services & Custom Services Demo
11. Filters & Custom Filters Demo.

3. Presenter:Nakul, Mindfire Solutions
Single Page Application
View View
ViewView
The Future Of Tomorrow's Web with SOA( Service Oriented Architecture). To provide User a Native
web-app Experience.
SPA

4. Presenter:Nakul, Mindfire Solutions
The Challenge with SPA
DOM Manipulation History Module Loading
Routing Caching Object Modeling
Data Binding Ajax/Promises View Loading

5. Presenter: Nakul, Mindfire Solutions
What is AngularJS?
This is a MV*(MVC OR MVVM) Javascript Framework by Google for Rich Web
Application Development & Provide User a Native App by following SPA Design
Pattern.
Model
(Data)
Controlle
r (Logic)
View (UI)Notifies
NotifiesChanges
Model
(Data)
View (UI)
Controller
(Logic)
MVC
View (UI) MVVM

6. Presenter: Nakul, Mindfire Solutions
“Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript
or by providing an imperative way for manipulating the DOM. Neither of these address the root problem
that HTML was not designed for dynamic views”.
Angular JS Power:
l Structure, Quality and Organization
l Lightweight ( < 36KB compressed and minified).
l Free.
l Separation of concern.
l Modularity.
l Extensibility & Maintainability.
l Reusable Components.
Why AngularJS?

7. Presenter: Nakul, Mindfire Solutions
Why AngularJS?
This means that any changes to the data need to be re-merged with the
template and then innerHTMLed into the DOM. Some of the issues with
this approach are:
 Reading user input and merging it with data
 Clobbering user input by overwriting it
 Managing the whole update process
The Angular compiler consumes the DOM, not string templates.
The result is a linking function, which when combined with a
scope model results in a live view. The view and scope model
bindings are transparent.

8. Other Javascript MV* Frameworks
•BackboneJS
•EmberJS
Presenter: Nakul, Mindfire Solutions

9. Two-way Data Binding – ViewModel as single source of truth (Glue).
MV*(MVC OR MVVM) – Provides Two-way Data Binding.
Modules.
Directives & Custom Directives – Extend HTML.
Services & Factories.
Dependency Injection.
Watcher.
Digest.
Testing.
Deep Linking (Map URL to route Definition).
Server-Side Communication.
Features of AngularJS
Presenter: Nakul, Mindfire Solutions

10. Presenter: Nakul, Mindfire Solutions
View Controller
FactoryDirectives
Routes
Module
Config
Modules are Containers
Service Provider
$scope

11. // Module Creation
var carApp = angular.module('CarApp', []);
// Dependencies Injection
var demoApp = angular.module('carApp', ['helperModule']);
Creating a Module
Presenter: Nakul, Mindfire Solutions

12. var carApp = angular.module('CarApp', []);
carApp.controller('HyundaiController', function ($scope) {
$scope.articles = [
{'name' : 'i20 Elite'},
{'name' : 'Fludic Verna'},
{'name': 'Xcent'},
{'name' : 'Eon'},
{'name' : 'i10 Grand'}
];
});
Define a Module
Define a
Controller
Creating a Controller in a Module
Presenter: Nakul, Mindfire Solutions

13. Presenter: Nakul, Mindfire Solutions
Directives are markers on Dom Elements(such as attributes, tags, and class
names) that tell HTML compiler ($compile) to attach a given behavior to a
DOM element (or transform it, replace it, etc.),When Angular bootstraps
your application, the HTML compiler traverses the DOM matching
directives against the DOM elements.
Some angular built-in directives
lThe ng-app - Bootstrapping your app and defining its scope. (<html ng-
app>).
lThe ng-controller - defines which controller will be in charge of your view.
(<input ng-controller=”xyz”>).
lThe ng-repeat - Allows for looping through collections.
lThe ng-init – Allows to Initialize any Data Model Object.
What is a Directive?

14. Presenter: Nakul, Mindfire Solutions
AngularJS Help for Directives

15. <!DOCTYPE html>
<html ng-app>
<head>
<title>Examples</title>
</head>
<body>
<div class="container">
Name: <input type="text" ng-model="name" /> {{ name }}
</div>
<script src="Scripts/angular.js"></script>
</body>
</html>
Using Directives and Data Binding
Presenter: Nakul, Mindfire Solutions
Data Binding Expression
Directive

16. Presenter: Nakul, Mindfire Solutions
View, Controllers & Scope
View Controller$scope
$scope is the "glue" (ViewModel) between a controller and a view

17. Presenter: Nakul, Mindfire Solutions
Creating a View and Controller
<div class="examples" data-ng-controller="HyundaiController">
<h3>Adding a Simple Controller</h3>
<ul>
<li data-ng-repeat="car in articles">
{{ car.name }}
</li>
</ul>
</div>
<script>
var carApp = angular.module('CarAPP', []);
carApp.controller('HyundaiController', function ($scope) {
$scope.articles = [
{'name' : 'i20 Elite'},
{'name' : 'Fludic Verna'},
{'name': 'Xcent'},
{'name' : 'Eon'},
{'name' : 'i10 Grand'}
];
});
</script>

18. Angular Routes & DI
<html ng-app=”AutomobileApp”>
<div class=”container”>
<nav><a href=”#/hyundai”>Hyundai</a><a href=”#/maruti”>Maruti</a></nav>
<div ng-view></div>
</div>
</html>
<script>
angular.module('AutomobileApp', [ 'ngRoute', 'CarApp']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/hyundai', {
templateUrl: 'hyundai.html', // To manage Hyundai Module.
controller: 'HyundaiController'
}).
when('/maruti', { // To manage Maruti Module.
templateUrl: 'maruti.html',
controller: 'MarutiController'
}). otherwise({ // Default Action.
RedirectTo: '/hyundai'
});
</script>

19. Custom Directives
'use strict';
var app = angular.module('CarApp', []);
// Car Controller
app.controller('HyundaiController', function($scope){
$scope.properties = {
'make' : '2015',
'wheels' : 4,
};
$scope.cars = [
{'name' : 'i20 Elite'},
{'name' : 'Fludic Verna'},
{'name': 'Xcent'},
{'name' : 'Eon'},
{'name' : 'i10 Grand'}
];
}).directive('car', function(){
return {
restrict: 'E',
templateUrl: 'cars.html'
};
});
Presenter: Nakul, Mindfire Solutions

20. Angular Services.
Angular services are substitutable objects that are wired together using dependency injection (DI). You
can use services to organize and share code across your app.
Angular services are:
Lazily instantiated – Angular only instantiates a service when an application component depends on it.
Singletons – Each component dependent on a service gets a reference to the single instance
generated by the service factory.
Angular offers several useful services (like $http), but for most applications you'll also want to create
your own.

21. Filters & Custom Filters
A filter formats the value of an expression for display to the user. They can be used in view
templates, controllers or services and it is easy to define your own filter.
{{ expression | filter1 | filter2 | ... }}
We have in-built Filters Available as
Number : {{ 1234 | number:2 }}
Currency : {{ 12 | currency }}
Date: {{ date_expression | date : format : timezone}}
Lowercase : {{ lowercase_expression | lowercase}}
Uppercase : {{ lowercase_expression | uppercase}}
Filter : <tr ng-repeat="friend in friends | filter:'a'">
OrderBy : <tr ng-repeat="friend in friends | orderBy:'-age'">
LimitTo : {{ numbers | limitTo:numLimit }}
Custom Filter :
app.filter('reverse', function() { // Custom Filter
Reverse
return function(input) {
var out = input.split('').reverse().join();
return out;
};
});

22. Presenter: Nakul, Mindfire Solutions
Next Seminar : Angular in Depth.
Angular Custom Directives in Depth.
Isolated Scopes.
Reusable Custom Directives.
Communication in Custom Directives.
Services, Factories Providers & Value in Depth.
Custom Services & Factories in Depth.
Event Binding in the Templates.
Unit Testing with AngularJS.

23. Presenter: Nakul, Mindfire Solutions
QUESTIONS?

24. Presenter: Nakul, Mindfire Solutions
References
I. Angular Docs → https://angularjs.org/
I. Tutorial Point → http://www.tutorialspoint.com/angularjs/
I. Head First Diving into Angularjs.

25. Presenter: Nakul, Mindfire Solutions
Thank you