introduction to single page application with angular js
Post on 15-Jul-2015
176 Views
Preview:
TRANSCRIPT
Angular.JS
Presenter: Nakul Suneja, Mindfire Solutions
Date: 26/03/2015
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.
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
Presenter:Nakul, Mindfire Solutions
The Challenge with SPA
DOM Manipulation History Module Loading
Routing Caching Object Modeling
Data Binding Ajax/Promises View Loading
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)
Controller (Logic)
View (UI)Notifies
NotifiesChanges
Model (Data)
View (UI)
Controller (Logic)
MVC
View (UI) MVVM
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 Organizationl Lightweight ( < 36KB compressed and minified).l Free.l Separation of concern.l Modularity.l Extensibility & Maintainability.l Reusable Components.
Why AngularJS?
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.
Other Javascript MV* Frameworks
•BackboneJS•EmberJS
Presenter: Nakul, Mindfire Solutions
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
Presenter: Nakul, Mindfire Solutions
View Controller
FactoryDirectives
Routes
Module
Config
Modules are Containers
Service Provider
$scope
// Module Creation
var carApp = angular.module('CarApp', []);
// Dependencies Injection
var demoApp = angular.module('carApp', ['helperModule']);
Creating a Module
Presenter: Nakul, Mindfire Solutions
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 ModuleDefine a
Controller
Creating a Controller in a Module
Presenter: Nakul, Mindfire Solutions
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 directiveslThe 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?
Presenter: Nakul, Mindfire Solutions
AngularJS Help for Directives
<!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
Presenter: Nakul, Mindfire Solutions
View, Controllers & Scope
View Controller$scope
$scope is the "glue" (ViewModel) between a controller and a view
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>
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>
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
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.
Filters & Custom FiltersA 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;
};
});
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.
Presenter: Nakul, Mindfire Solutions
QUESTIONS?
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.
Presenter: Nakul, Mindfire Solutions
Thank you
top related