SlideShare a Scribd company logo
1 of 59
Download to read offline
Introduction to
Javascriptevolution 
1996 
JavaScript, JScript 
1997 
JavaScript by ECMAScript 
~2002 
Ajax 
2005 
Jquery, Mootools, YUI, Prototype, … 
2006 
GWT, JSF, Ext JS 
2009 
(Node.js)
Javascriptevolution 
1996 
JavaScript, JScript 
1997 
JavaScript by ECMAScript 
~2002 
Ajax 
2005 
Jquery, Mootools, YUI, Prototype, … 
2006 
GWT, JSF, Ext JS 
2009 
(Node.js) 
… and other 
MV* frameworks
http://todomvc.com/
WhatisAngularJS? 
«HTML enhanced for web apps!»https://angularjs.org/ 
That’sall? … of course not!
About AngularJS 
•Createdin 2009 at BratTech LLC 
•Developedat Google 
•Open Source (Licence MIT) 
•Over 400 contributors 
•Currentversion 1.2.25 (1.3 soon& 2.0 later) 
•Compatibility IE8+ 
•100Ko
WhyAngularJS? 
MVW Framework with: 
•2-way data binding 
•Templating 
•Dependencyinjection 
•Routing 
•Testability 
•Modularity 
•Community 
•By Google (?)
Learning curve
AngularJStemplateconcept 
<html ng-app> 
<div> 
<input type="text" ng-model="name"> 
<p ng-show="name">Hello {{name}}</p> 
</div> 
<script src=“scripts/angular.js" > 
</html>
Template compilation
AngularJStemplatedemo 
Talk is cheapShow me the code
Expression definition 
Expressions are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }} 
<p> 
1+2={{1+2}} 
{{a+b}} 
{{'Hello '+name}} 
{{user.name}} 
{{items[index]}} 
</p>
Directive concept 
Directives are markers on a DOM element to attach a specified behavior to that DOM element or even transform the DOM element and its children 
Directives can be an attribute, element name, comment or CSS class. 
<html ng-app> 
<div> 
<input type="text" ng-model="name"> 
<p ng-show="name">Hello {{name}}</p> 
</div> 
<script src=“scripts/angular.js" > 
</html>
Directive usage 
•Avoid<!--directive: my-directive --> <div class="my-directive"></div> 
•Good<my-directive></my-directive> <div my-directive></div>
Directive build-in 
ngApp 
ngBind 
ngBindHtml 
ngBindTemplate 
ngBlur 
ngChange 
ngChecked 
ngClass 
ngClassEven 
ngClassOdd 
ngClick 
ngCloak 
ngController 
ngCopy 
ngCsp 
ngCut 
ngDblclick 
ngDisabled 
ngFocus 
ngForm 
ngHide 
ngHref 
ngIf 
ngInclude 
ngInit 
ngKeydown 
ngKeypress 
ngKeyup 
ngList 
ngModel 
ngModelOptions 
ngMousedown 
ngMouseenter 
ngMouseleave 
ngMousemove 
ngMouseover 
ngMouseup 
ngNonBindable 
ngOpen 
ngPaste 
ngPluralize 
ngReadonly 
ngRepeat 
ngSelected 
ngShow 
ngSrc 
ngSrcset 
ngStyle 
ngSubmit 
ngSwitch 
ngTransclude 
ngValue 
a 
form 
input 
input[checkbox] 
input[dateTimeLocal] 
input[date] 
input[email] 
input[month] 
input[number] 
input[radio] 
input[text] 
input[time] 
input[url] 
input[week] 
script 
select 
textarea
Scope definition 
Scopeis an object that refers to the application model. 
It is an execution context forexpressions.
Scope hierarchicalstructure 
Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. 
Scopes can watchexpressionsand propagate events.
Two-way data binding
One-time binding 
One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefinedvalue (v1.3+) 
<p>Normal binding: {{name}}</p> 
<p>One time binding: {{::name}}</p> 
<ul> 
<!--items are bind once --> 
<li ng-repeat="item in ::items">{{item.name}}</li> 
</ul>
Module definition 
You can think of a module as a container for the different parts of your app –controllers, services, filters, directives, etc
Module implementation 
•Createa new modulevar myModule= angular.module(‘myModule’, [ ]); 
•Geta modulevar myModule= angular.module(‘myModule’, [ ]); 
•Addmodule dependenciesvar otherModule= angular.module(‘otherModule’, [‘ngRoute’, ‘myModule’]);
Controller definition 
In Angular, a Controller is a JavaScriptconstructor functionthat is used to augment theScope 
Do notuse them to manipulateDOM.
Controller sample 
functionMyController($scope){ 
$scope.name = "Yoann"; 
$scope.doAction= function(name){ 
console.log("Hello world "+name); 
}; 
} 
angular.module('app').controller('MyCtrl', MyController); 
<div ng-controller="MyCtrl"> 
<input type="text" ng-model="name"> 
<button ng-click="doAction(name)">Show in console</button> 
</div>
Controller 
Talk is cheapShow me the code
Filter 
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.
Filterusage 
<span>{{ price | currency }}</span> <!--$10.00 --> 
<span>{{ now| date:'dd/MM/yyyy' }}</span> <!--01/10/2014 --> 
<li ng-repeat="article in articles | limitTo:10"> ... </li> 
<!--truncate the list to 10 articles -->
Filterbuildin 
currency 
date 
filter 
json 
limitTo 
lowercase 
number 
orderBy 
uppercase
Filtercreation 
functionCheckmarkFilter(){ 
returnfunction(input) { 
returninput ?'u2713':'u2718'; 
}; 
} 
angular.module('app').filter('checkmark', CheckmarkFilter); 
u2713-> ✓ 
u2718-> ✘
Filter 
Talk is cheapShow me the code
Service introduction 
You can use services to organize and share code across your app 
Angular services are substitutable objects that are wired together usingdependency injection (DI) 
Angularservices are lazilyinstantiatedand singletons.
Service buildin 
$anchorScroll 
$animate 
$cacheFactory 
$compile 
$controller 
$document 
$exceptionHandler 
$filter 
$http 
$httpBackend 
$interpolate 
$interval 
$locale 
$location 
$log 
$parse 
$q 
$rootElement 
$rootScope 
$sce 
$sceDelegate 
$templateCache 
$templateRequest 
$timeout 
$window 
$injector 
$provide 
$animate 
$aria 
$cookieStore 
$cookies 
$resource 
$route 
$routeParams 
$sanitize 
$swipe
Dependencyinjection definition 
Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies. 
The Angular injector subsystem is in charge of 
•creating components 
•resolving their dependencies 
•providing them to other components as requested
Dependencyinjection exemple 
functionMyController($scope, $http, $log) { 
$http.get('/api/articles') 
.success(function(data){ 
$log.debug('Articles received'); 
$scope.articles= data; 
}); 
} 
angular.module('myModule').controller('MyCtrl', MyController); 
Injections
Dependencyinjection minificationissue 
functiona (b, c, d) {b.get('/api/articles').success(function(e){d.debug('Articles received');a.articles= e;});} 
angular.module('myModule').controller('MyCtrl', a); 
Unknownservices : injections fail
Dependencyinjection minificationsolutions 
•Dependenciesarray 
•$inject 
•ng-annotatemodule 
functionMyController($scope, $http, $log) { … } 
angular.module('myModule').controller('MyCtrl', [‘$scope’, ‘$http’, ‘$log’, MyController]); 
functionMyController($scope, $http, $log) { … } 
MyController.$inject= [‘$scope’, ‘$http’, ‘$log’]; 
angular.module('myModule').controller('MyCtrl',MyController); 
/* @ngInject*/ 
functionMyController($scope, $http, $log) { … } 
angular.module('myModule').controller('MyCtrl',MyController);
Service and DI 
Talk is cheapShow me the code
Service configuration block 
Configuration blocks-get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. 
functionMyConfig($httpProvider,$logProvider){ 
$httpProvider.defaults.cache=false; 
$logProvider.debugEnabled(true); 
} 
angular.module(‘app’).config(MyConfig);
Service runblock 
Run blocks-get executed after the injector is created and are used to kickstartthe application. Only instances and constants can be injected into run blocks. 
functionMyRunBlock($log){ 
$log.debug(‘appmodule isrunning’); 
} 
angular.module(‘app’).run(MyRunBlock);
Service creationmethods 
5 methodsto createa AngularJSservice : 
•Provider 
•Factory 
•Service 
•Value 
•Constant
Service createwithprovider 
function MyProvider(){ 
this.step=24*60*60*1000;/* public. configurable */ 
varlength =4;/* private. not configurable */ 
/* public. configurable */ 
this.getLastDays=function (){ 
varnow =Date.now(); 
varstep =this.step; 
varlastDays=[]; 
for(vari=1;i<length;i++){ 
vardate =new Date(now-i*step); 
lastDays.push(date); 
} 
returnlastDays; 
}; 
/* create and return the service */ 
this.$get=/* @ngInject*/function ($log){ 
varlastDays=this.getLastDays(); 
$log.debug("last days computed !"); 
returnlastDays; 
}; 
} 
angular.module('app').provider ('LastDays', MyProvider); 
/* @ngInject*/ 
functionMyConfig(LastDaysProvider){ 
LastDaysProvider.step=2*LastDaysProvider.step; 
} 
angular.module('app').config(MyConfig); 
/* @ngInject*/ 
functionMyCtrl($scope,LastDays){ 
$scope.lastDays= LastDays; 
} 
angular.module('app').controller(‘MyCtrl’, MyCtrl);
Service createwithfactory 
/* @ngInject*/ 
functionMyCtrl($scope,LastDays){ 
$scope.lastDays= LastDays; 
} 
angular.module('app').controller(‘MyCtrl’, MyCtrl); 
/* @ngInject*/ 
functionMyFactory($log){ 
varlength =4; 
varstep =24*60*60*1000; 
varnow =Date.now(); 
varlastDays=[]; 
for(vari=1; i<length; i++){ 
vardate =newDate(now-i*step); 
lastDays.push(date); 
} 
$log.debug("last days computed !"); 
returnlastDays; 
} 
angular.module('app').factory ('LastDays', MyFactory);
Service createwithservice 
/* @ngInject*/ 
functionMyCtrl($scope,LastDays){ 
$scope.lastDays= LastDays.data; 
} 
angular.module('app').controller(‘MyCtrl’, MyCtrl); 
/* @ngInject*/ 
functionMyService($log){ 
varlastDays=this.getLastDays(); 
$log.debug("last days computed !"); 
this.data=lastDays; 
} 
MyService.prototype.getLastDays=functiongetLastDays(){ 
varlength =4; 
varstep =24*60*60*1000; 
varnow =Date.now(); 
varlastDays=[]; 
for(vari=1; i<length; i++){ 
vardate =newDate(now-i*step); 
lastDays.push(date); 
} 
returnlastDays; 
}; 
angular.module('app').service ('LastDays', MyService);
Constant & Value 
•No dependencyinjection 
•Constant canbeinjectin config blocks 
functionLastDaysFunction(){ 
varlength =4; 
varstep =24*60*60*1000; 
varnow =Date.now(); 
varlastDays=[]; 
for(vari=1; i<length; i++){ 
vardate =newDate(now-i*step); 
lastDays.push(date); 
} 
returnlastDays; 
} 
angular.module('app').constant('LastDaysAsConstant', LastDaysFunction); 
angular.module('app').value('LastDaysAsValue', LastDaysFunction);
Service creationsummary 
Method 
Configurable 
DI 
Service creation 
Providername 
module.provider() 
Yes 
Yes 
By callingthe provider method$get 
Service name+ 'Provider' 
module.factory() 
No 
Yes 
By callingthe providedmethod 
- 
module.service() 
No 
Yes 
By creatinga new instance of providedobject 
- 
module.value() 
No 
No 
Alreadyexist 
- 
module.constant() 
Yes 
No 
Alreadyexist 
Service name
Service 
Talk is cheapShow me the code
The bigAngularJSpicture
Routingdefinition 
Routing allows you to organize the parts of your interface thanks toURL routes. 
The routingfunctionnalityisdistributed separately from the core Angular framework.
/* @ngInject*/ 
functionRouteConfig($routeProvider){ 
$routeProvider. 
when('/articles', { 
templateUrl:'partials/articles-list.html', 
controller:'ArticlesListCtrl' 
}). 
when('/articles/:articleId', { 
templateUrl:'partials/article-detail.html', 
controller:'ArticleDetailCtrl', 
resolve:{ 
article :/* @ngInject*/function($routeParams, Articles){ 
returnArticles.get({id :$routeParams.articleId}); 
} 
} 
}). 
otherwise({ 
redirectTo:'/articles' 
}); 
} 
angular.module('app').config(RouteConfig); 
Routingconfiguration 
URL route 
Template name 
Controller name 
URL route withvariable 
Asynchronousdata loader
Routingapi 
•Configure a route$routeProvider.when(pathName, options) 
•Redirect unknown routes$routeProvider.otherwise(redirectPathName) 
•Get route variablesvar param= $routeParams.paramName 
•Getcurrentroutevar current= $route.current 
•Change route programmatically$location.path(path) 
•Observe route events$rootScope.$on(event, cb) Events : $routeChangeStart, $routeChangeSuccess, $routeChangeError, $routeUpdate
Routingui-router 
AngularUIRouter is a routing framework, which allows you to organize the parts of your interface into astatemachinehttp://angular-ui.github.io/ui-router/ 
Allow nested and multiple views
Routing 
Talk is cheapShow me the code
Formvalidation 1/3 
<formname=“userForm"ng-submit="update(user)"> 
Name: 
<inputtype="text"ng-model="user.name"name="uName"required/><br/> 
E-mail: 
<inputtype="email"ng-model="user.email"name="uEmail"required/><br/> 
<inputtype="checkbox"ng-model="user.agree"name="uAgree"required/> 
I agree <br/> 
<buttontype="submit">SAVE</button> 
</form>
Formvalidation 2/3 
userFormscope variable isa booleansmap: 
•$valid 
•$invalid 
•uEmail 
•$valid 
•$invalid 
•$dirty 
•$pristine 
•$touched(v1.3+) 
•$untouched(v1.3+) 
•$error 
•required 
•email 
•uName 
•$valid 
•$invalid 
•…
Formvalidation 3/3 
<formname="userForm" ng-submit="update(user)" novalidate> 
Name: 
<input type="text" ng-model="user.name" name="uName" required /><br/> 
<div class="error" ng-show="userForm.uName.$dirty&& userForm.uName.$invalid">Name invalid</div> 
E-mail: 
<input type="email" ng-model="user.email" name="uEmail" required/><br/> 
<div class="error" ng-show="userForm.uEmail.$dirty&& userForm.uEmail.$error.required">Requiredemail</div> 
<div class="error" ng-show="userForm.uEmail.$dirty&& userForm.uEmail.$error.email">Email invalid</div> 
<input type="checkbox" ng-model="user.agree" name="userAgree" required /> 
I agree<br/> 
<div class="error" ng-show="userForm.userAgree.$dirty && userForm.userAgree.$error.required">Be agree</div> 
<button type="submit" ng-disabled="userForm.$invalid">SAVE</button> 
</form>
Formvalidation styling 
To allow styling of form as well as controls, ngModeladds these CSS classes: 
•ng-valid: the model is valid 
•ng-invalid: the model is invalid 
•ng-valid-[key]: for each valid key added by $setValidity 
•ng-invalid-[key]: for each invalid key added by $setValidity 
•ng-pristine: the control hasn't been interacted with yet 
•ng-dirty: the control has been interacted with 
•ng-touched: the control has been blurred 
•ng-untouched: the control hasn't been blurred 
input.ng-invalid.ng-dirty{ 
background-color: #FF0000; 
}
Formvalidation 
Talk is cheapShow me the code
Createdirective 
To becontinued…
To becontinuted… 
•Directive creation 
•Publish/subscribewith$scope 
•Animation 
•ngMessages 
•Best practice 
•https://github.com/toddmotto/angularjs-styleguide 
•https://github.com/johnpapa/angularjs-styleguide 
•Errormanagement 
•IE Compatibilty 
•…
Questions?

More Related Content

What's hot

GR8Conf 2011: Grails, how to plug in
GR8Conf 2011: Grails, how to plug inGR8Conf 2011: Grails, how to plug in
GR8Conf 2011: Grails, how to plug in
GR8Conf
 
Apache Aries: A blueprint for developing with OSGi and JEE
Apache Aries: A blueprint for developing with OSGi and JEEApache Aries: A blueprint for developing with OSGi and JEE
Apache Aries: A blueprint for developing with OSGi and JEE
mahrwald
 
Kandroid for nhn_deview_20131013_v5_final
Kandroid for nhn_deview_20131013_v5_finalKandroid for nhn_deview_20131013_v5_final
Kandroid for nhn_deview_20131013_v5_final
NAVER D2
 

What's hot (20)

Unpacking .NET Core | EastBanc Technologies
Unpacking .NET Core | EastBanc TechnologiesUnpacking .NET Core | EastBanc Technologies
Unpacking .NET Core | EastBanc Technologies
 
OSGi and Java EE: A Hybrid Approach to Enterprise Java Application Development
OSGi and Java EE: A Hybrid Approach to Enterprise Java Application DevelopmentOSGi and Java EE: A Hybrid Approach to Enterprise Java Application Development
OSGi and Java EE: A Hybrid Approach to Enterprise Java Application Development
 
React Vs AnagularJS
React Vs AnagularJSReact Vs AnagularJS
React Vs AnagularJS
 
Scala & Lift (JEEConf 2012)
Scala & Lift (JEEConf 2012)Scala & Lift (JEEConf 2012)
Scala & Lift (JEEConf 2012)
 
Type script
Type scriptType script
Type script
 
Spring cloud for microservices architecture
Spring cloud for microservices architectureSpring cloud for microservices architecture
Spring cloud for microservices architecture
 
Introduction to MongoDB
Introduction to MongoDBIntroduction to MongoDB
Introduction to MongoDB
 
Modular Java applications with OSGi on Apache Karaf
Modular Java applications with OSGi on Apache KarafModular Java applications with OSGi on Apache Karaf
Modular Java applications with OSGi on Apache Karaf
 
Building a Serverless company with Node.js, React and the Serverless Framewor...
Building a Serverless company with Node.js, React and the Serverless Framewor...Building a Serverless company with Node.js, React and the Serverless Framewor...
Building a Serverless company with Node.js, React and the Serverless Framewor...
 
GR8Conf 2011: Grails, how to plug in
GR8Conf 2011: Grails, how to plug inGR8Conf 2011: Grails, how to plug in
GR8Conf 2011: Grails, how to plug in
 
Microservices with Spring Cloud and Netflix OSS
Microservices with Spring Cloud and Netflix OSSMicroservices with Spring Cloud and Netflix OSS
Microservices with Spring Cloud and Netflix OSS
 
Angular 2.0
Angular  2.0Angular  2.0
Angular 2.0
 
The Making of the Oracle R2DBC Driver and How to Take Your Code from Synchron...
The Making of the Oracle R2DBC Driver and How to Take Your Code from Synchron...The Making of the Oracle R2DBC Driver and How to Take Your Code from Synchron...
The Making of the Oracle R2DBC Driver and How to Take Your Code from Synchron...
 
React october2017
React october2017React october2017
React october2017
 
Apache Aries: A blueprint for developing with OSGi and JEE
Apache Aries: A blueprint for developing with OSGi and JEEApache Aries: A blueprint for developing with OSGi and JEE
Apache Aries: A blueprint for developing with OSGi and JEE
 
Kandroid for nhn_deview_20131013_v5_final
Kandroid for nhn_deview_20131013_v5_finalKandroid for nhn_deview_20131013_v5_final
Kandroid for nhn_deview_20131013_v5_final
 
Cloud Native Spring - The role of Spring Cloud after Kubernetes became a main...
Cloud Native Spring - The role of Spring Cloud after Kubernetes became a main...Cloud Native Spring - The role of Spring Cloud after Kubernetes became a main...
Cloud Native Spring - The role of Spring Cloud after Kubernetes became a main...
 
Run-time of Node.js : V8 JavaScript Engine
Run-time of Node.js: V8 JavaScript EngineRun-time of Node.js: V8 JavaScript Engine
Run-time of Node.js : V8 JavaScript Engine
 
Head first asp.net mvc 2.0 rtt
Head first asp.net mvc 2.0 rttHead first asp.net mvc 2.0 rtt
Head first asp.net mvc 2.0 rtt
 
[APIdays Paris 2019] From Microservices to APIs: The API operator in Kubernetes
[APIdays Paris 2019] From Microservices to APIs: The API operator in Kubernetes[APIdays Paris 2019] From Microservices to APIs: The API operator in Kubernetes
[APIdays Paris 2019] From Microservices to APIs: The API operator in Kubernetes
 

Similar to Introduction to AngularJS

4 Anguadasdfasdasdfasdfsdfasdfaslar (1).pptx
4 Anguadasdfasdasdfasdfsdfasdfaslar (1).pptx4 Anguadasdfasdasdfasdfsdfasdfaslar (1).pptx
4 Anguadasdfasdasdfasdfsdfasdfaslar (1).pptx
tilejak773
 

Similar to Introduction to AngularJS (20)

Angular workshop - Full Development Guide
Angular workshop - Full Development GuideAngular workshop - Full Development Guide
Angular workshop - Full Development Guide
 
Angular Js Basics
Angular Js BasicsAngular Js Basics
Angular Js Basics
 
angularJs Workshop
angularJs WorkshopangularJs Workshop
angularJs Workshop
 
AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014
 
The Basics Angular JS
The Basics Angular JS The Basics Angular JS
The Basics Angular JS
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
 
Mean stack Magics
Mean stack MagicsMean stack Magics
Mean stack Magics
 
Angular js
Angular jsAngular js
Angular js
 
Angular js
Angular jsAngular js
Angular js
 
Introduction to single page application with angular js
Introduction to single page application with angular jsIntroduction to single page application with angular js
Introduction to single page application with angular js
 
Javascript-heavy Salesforce Applications
Javascript-heavy Salesforce ApplicationsJavascript-heavy Salesforce Applications
Javascript-heavy Salesforce Applications
 
Angular js
Angular jsAngular js
Angular js
 
Coffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JSCoffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JS
 
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to Angularjs
 
Top 10 Mistakes AngularJS Developers Make
Top 10 Mistakes AngularJS Developers MakeTop 10 Mistakes AngularJS Developers Make
Top 10 Mistakes AngularJS Developers Make
 
Js in quick books
Js in quick booksJs in quick books
Js in quick books
 
Valentine with AngularJS
Valentine with AngularJSValentine with AngularJS
Valentine with AngularJS
 
4 Anguadasdfasdasdfasdfsdfasdfaslar (1).pptx
4 Anguadasdfasdasdfasdfsdfasdfaslar (1).pptx4 Anguadasdfasdasdfasdfsdfasdfaslar (1).pptx
4 Anguadasdfasdasdfasdfsdfasdfaslar (1).pptx
 
AngularJS Workshop
AngularJS WorkshopAngularJS Workshop
AngularJS Workshop
 
Angular 2 for Java Developers
Angular 2 for Java DevelopersAngular 2 for Java Developers
Angular 2 for Java Developers
 

More from Yoann Gotthilf (6)

Most Common JavaScript Mistakes
Most Common JavaScript MistakesMost Common JavaScript Mistakes
Most Common JavaScript Mistakes
 
Introduction to REST API with Node.js
Introduction to REST API with Node.jsIntroduction to REST API with Node.js
Introduction to REST API with Node.js
 
Introduction to the MEAN stack
Introduction to the MEAN stackIntroduction to the MEAN stack
Introduction to the MEAN stack
 
Web development - technologies and tools
Web development - technologies and toolsWeb development - technologies and tools
Web development - technologies and tools
 
Introduction à Android
Introduction à AndroidIntroduction à Android
Introduction à Android
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
 

Recently uploaded

Jax, FL Admin Community Group 05.14.2024 Combined Deck
Jax, FL Admin Community Group 05.14.2024 Combined DeckJax, FL Admin Community Group 05.14.2024 Combined Deck
Jax, FL Admin Community Group 05.14.2024 Combined Deck
Marc Lester
 

Recently uploaded (20)

Weeding your micro service landscape.pdf
Weeding your micro service landscape.pdfWeeding your micro service landscape.pdf
Weeding your micro service landscape.pdf
 
Top Mobile App Development Companies 2024
Top Mobile App Development Companies 2024Top Mobile App Development Companies 2024
Top Mobile App Development Companies 2024
 
A Deep Dive into Secure Product Development Frameworks.pdf
A Deep Dive into Secure Product Development Frameworks.pdfA Deep Dive into Secure Product Development Frameworks.pdf
A Deep Dive into Secure Product Development Frameworks.pdf
 
KLARNA - Language Models and Knowledge Graphs: A Systems Approach
KLARNA -  Language Models and Knowledge Graphs: A Systems ApproachKLARNA -  Language Models and Knowledge Graphs: A Systems Approach
KLARNA - Language Models and Knowledge Graphs: A Systems Approach
 
5 Reasons Driving Warehouse Management Systems Demand
5 Reasons Driving Warehouse Management Systems Demand5 Reasons Driving Warehouse Management Systems Demand
5 Reasons Driving Warehouse Management Systems Demand
 
Workforce Efficiency with Employee Time Tracking Software.pdf
Workforce Efficiency with Employee Time Tracking Software.pdfWorkforce Efficiency with Employee Time Tracking Software.pdf
Workforce Efficiency with Employee Time Tracking Software.pdf
 
OpenChain @ LF Japan Executive Briefing - May 2024
OpenChain @ LF Japan Executive Briefing - May 2024OpenChain @ LF Japan Executive Briefing - May 2024
OpenChain @ LF Japan Executive Briefing - May 2024
 
Modern binary build systems - PyCon 2024
Modern binary build systems - PyCon 2024Modern binary build systems - PyCon 2024
Modern binary build systems - PyCon 2024
 
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
 
Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024
Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024
Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024
 
Sourcing Success - How to Find a Clothing Manufacturer
Sourcing Success - How to Find a Clothing ManufacturerSourcing Success - How to Find a Clothing Manufacturer
Sourcing Success - How to Find a Clothing Manufacturer
 
Community is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea GouletCommunity is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea Goulet
 
Jax, FL Admin Community Group 05.14.2024 Combined Deck
Jax, FL Admin Community Group 05.14.2024 Combined DeckJax, FL Admin Community Group 05.14.2024 Combined Deck
Jax, FL Admin Community Group 05.14.2024 Combined Deck
 
Reinforcement Learning – a Rewards Based Approach to Machine Learning - Marko...
Reinforcement Learning – a Rewards Based Approach to Machine Learning - Marko...Reinforcement Learning – a Rewards Based Approach to Machine Learning - Marko...
Reinforcement Learning – a Rewards Based Approach to Machine Learning - Marko...
 
SQL Injection Introduction and Prevention
SQL Injection Introduction and PreventionSQL Injection Introduction and Prevention
SQL Injection Introduction and Prevention
 
The Impact of PLM Software on Fashion Production
The Impact of PLM Software on Fashion ProductionThe Impact of PLM Software on Fashion Production
The Impact of PLM Software on Fashion Production
 
A Guideline to Zendesk to Re:amaze Data Migration
A Guideline to Zendesk to Re:amaze Data MigrationA Guideline to Zendesk to Re:amaze Data Migration
A Guideline to Zendesk to Re:amaze Data Migration
 
Tree in the Forest - Managing Details in BDD Scenarios (live2test 2024)
Tree in the Forest - Managing Details in BDD Scenarios (live2test 2024)Tree in the Forest - Managing Details in BDD Scenarios (live2test 2024)
Tree in the Forest - Managing Details in BDD Scenarios (live2test 2024)
 
What is an API Development- Definition, Types, Specifications, Documentation.pdf
What is an API Development- Definition, Types, Specifications, Documentation.pdfWhat is an API Development- Definition, Types, Specifications, Documentation.pdf
What is an API Development- Definition, Types, Specifications, Documentation.pdf
 
Microsoft 365 Copilot; An AI tool changing the world of work _PDF.pdf
Microsoft 365 Copilot; An AI tool changing the world of work _PDF.pdfMicrosoft 365 Copilot; An AI tool changing the world of work _PDF.pdf
Microsoft 365 Copilot; An AI tool changing the world of work _PDF.pdf
 

Introduction to AngularJS

  • 2. Javascriptevolution 1996 JavaScript, JScript 1997 JavaScript by ECMAScript ~2002 Ajax 2005 Jquery, Mootools, YUI, Prototype, … 2006 GWT, JSF, Ext JS 2009 (Node.js)
  • 3. Javascriptevolution 1996 JavaScript, JScript 1997 JavaScript by ECMAScript ~2002 Ajax 2005 Jquery, Mootools, YUI, Prototype, … 2006 GWT, JSF, Ext JS 2009 (Node.js) … and other MV* frameworks
  • 5. WhatisAngularJS? «HTML enhanced for web apps!»https://angularjs.org/ That’sall? … of course not!
  • 6. About AngularJS •Createdin 2009 at BratTech LLC •Developedat Google •Open Source (Licence MIT) •Over 400 contributors •Currentversion 1.2.25 (1.3 soon& 2.0 later) •Compatibility IE8+ •100Ko
  • 7. WhyAngularJS? MVW Framework with: •2-way data binding •Templating •Dependencyinjection •Routing •Testability •Modularity •Community •By Google (?)
  • 9. AngularJStemplateconcept <html ng-app> <div> <input type="text" ng-model="name"> <p ng-show="name">Hello {{name}}</p> </div> <script src=“scripts/angular.js" > </html>
  • 11. AngularJStemplatedemo Talk is cheapShow me the code
  • 12. Expression definition Expressions are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }} <p> 1+2={{1+2}} {{a+b}} {{'Hello '+name}} {{user.name}} {{items[index]}} </p>
  • 13. Directive concept Directives are markers on a DOM element to attach a specified behavior to that DOM element or even transform the DOM element and its children Directives can be an attribute, element name, comment or CSS class. <html ng-app> <div> <input type="text" ng-model="name"> <p ng-show="name">Hello {{name}}</p> </div> <script src=“scripts/angular.js" > </html>
  • 14. Directive usage •Avoid<!--directive: my-directive --> <div class="my-directive"></div> •Good<my-directive></my-directive> <div my-directive></div>
  • 15. Directive build-in ngApp ngBind ngBindHtml ngBindTemplate ngBlur ngChange ngChecked ngClass ngClassEven ngClassOdd ngClick ngCloak ngController ngCopy ngCsp ngCut ngDblclick ngDisabled ngFocus ngForm ngHide ngHref ngIf ngInclude ngInit ngKeydown ngKeypress ngKeyup ngList ngModel ngModelOptions ngMousedown ngMouseenter ngMouseleave ngMousemove ngMouseover ngMouseup ngNonBindable ngOpen ngPaste ngPluralize ngReadonly ngRepeat ngSelected ngShow ngSrc ngSrcset ngStyle ngSubmit ngSwitch ngTransclude ngValue a form input input[checkbox] input[dateTimeLocal] input[date] input[email] input[month] input[number] input[radio] input[text] input[time] input[url] input[week] script select textarea
  • 16. Scope definition Scopeis an object that refers to the application model. It is an execution context forexpressions.
  • 17. Scope hierarchicalstructure Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watchexpressionsand propagate events.
  • 19. One-time binding One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefinedvalue (v1.3+) <p>Normal binding: {{name}}</p> <p>One time binding: {{::name}}</p> <ul> <!--items are bind once --> <li ng-repeat="item in ::items">{{item.name}}</li> </ul>
  • 20. Module definition You can think of a module as a container for the different parts of your app –controllers, services, filters, directives, etc
  • 21. Module implementation •Createa new modulevar myModule= angular.module(‘myModule’, [ ]); •Geta modulevar myModule= angular.module(‘myModule’, [ ]); •Addmodule dependenciesvar otherModule= angular.module(‘otherModule’, [‘ngRoute’, ‘myModule’]);
  • 22. Controller definition In Angular, a Controller is a JavaScriptconstructor functionthat is used to augment theScope Do notuse them to manipulateDOM.
  • 23. Controller sample functionMyController($scope){ $scope.name = "Yoann"; $scope.doAction= function(name){ console.log("Hello world "+name); }; } angular.module('app').controller('MyCtrl', MyController); <div ng-controller="MyCtrl"> <input type="text" ng-model="name"> <button ng-click="doAction(name)">Show in console</button> </div>
  • 24. Controller Talk is cheapShow me the code
  • 25. Filter 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.
  • 26. Filterusage <span>{{ price | currency }}</span> <!--$10.00 --> <span>{{ now| date:'dd/MM/yyyy' }}</span> <!--01/10/2014 --> <li ng-repeat="article in articles | limitTo:10"> ... </li> <!--truncate the list to 10 articles -->
  • 27. Filterbuildin currency date filter json limitTo lowercase number orderBy uppercase
  • 28. Filtercreation functionCheckmarkFilter(){ returnfunction(input) { returninput ?'u2713':'u2718'; }; } angular.module('app').filter('checkmark', CheckmarkFilter); u2713-> ✓ u2718-> ✘
  • 29. Filter Talk is cheapShow me the code
  • 30. Service introduction You can use services to organize and share code across your app Angular services are substitutable objects that are wired together usingdependency injection (DI) Angularservices are lazilyinstantiatedand singletons.
  • 31. Service buildin $anchorScroll $animate $cacheFactory $compile $controller $document $exceptionHandler $filter $http $httpBackend $interpolate $interval $locale $location $log $parse $q $rootElement $rootScope $sce $sceDelegate $templateCache $templateRequest $timeout $window $injector $provide $animate $aria $cookieStore $cookies $resource $route $routeParams $sanitize $swipe
  • 32. Dependencyinjection definition Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies. The Angular injector subsystem is in charge of •creating components •resolving their dependencies •providing them to other components as requested
  • 33. Dependencyinjection exemple functionMyController($scope, $http, $log) { $http.get('/api/articles') .success(function(data){ $log.debug('Articles received'); $scope.articles= data; }); } angular.module('myModule').controller('MyCtrl', MyController); Injections
  • 34. Dependencyinjection minificationissue functiona (b, c, d) {b.get('/api/articles').success(function(e){d.debug('Articles received');a.articles= e;});} angular.module('myModule').controller('MyCtrl', a); Unknownservices : injections fail
  • 35. Dependencyinjection minificationsolutions •Dependenciesarray •$inject •ng-annotatemodule functionMyController($scope, $http, $log) { … } angular.module('myModule').controller('MyCtrl', [‘$scope’, ‘$http’, ‘$log’, MyController]); functionMyController($scope, $http, $log) { … } MyController.$inject= [‘$scope’, ‘$http’, ‘$log’]; angular.module('myModule').controller('MyCtrl',MyController); /* @ngInject*/ functionMyController($scope, $http, $log) { … } angular.module('myModule').controller('MyCtrl',MyController);
  • 36. Service and DI Talk is cheapShow me the code
  • 37. Service configuration block Configuration blocks-get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. functionMyConfig($httpProvider,$logProvider){ $httpProvider.defaults.cache=false; $logProvider.debugEnabled(true); } angular.module(‘app’).config(MyConfig);
  • 38. Service runblock Run blocks-get executed after the injector is created and are used to kickstartthe application. Only instances and constants can be injected into run blocks. functionMyRunBlock($log){ $log.debug(‘appmodule isrunning’); } angular.module(‘app’).run(MyRunBlock);
  • 39. Service creationmethods 5 methodsto createa AngularJSservice : •Provider •Factory •Service •Value •Constant
  • 40. Service createwithprovider function MyProvider(){ this.step=24*60*60*1000;/* public. configurable */ varlength =4;/* private. not configurable */ /* public. configurable */ this.getLastDays=function (){ varnow =Date.now(); varstep =this.step; varlastDays=[]; for(vari=1;i<length;i++){ vardate =new Date(now-i*step); lastDays.push(date); } returnlastDays; }; /* create and return the service */ this.$get=/* @ngInject*/function ($log){ varlastDays=this.getLastDays(); $log.debug("last days computed !"); returnlastDays; }; } angular.module('app').provider ('LastDays', MyProvider); /* @ngInject*/ functionMyConfig(LastDaysProvider){ LastDaysProvider.step=2*LastDaysProvider.step; } angular.module('app').config(MyConfig); /* @ngInject*/ functionMyCtrl($scope,LastDays){ $scope.lastDays= LastDays; } angular.module('app').controller(‘MyCtrl’, MyCtrl);
  • 41. Service createwithfactory /* @ngInject*/ functionMyCtrl($scope,LastDays){ $scope.lastDays= LastDays; } angular.module('app').controller(‘MyCtrl’, MyCtrl); /* @ngInject*/ functionMyFactory($log){ varlength =4; varstep =24*60*60*1000; varnow =Date.now(); varlastDays=[]; for(vari=1; i<length; i++){ vardate =newDate(now-i*step); lastDays.push(date); } $log.debug("last days computed !"); returnlastDays; } angular.module('app').factory ('LastDays', MyFactory);
  • 42. Service createwithservice /* @ngInject*/ functionMyCtrl($scope,LastDays){ $scope.lastDays= LastDays.data; } angular.module('app').controller(‘MyCtrl’, MyCtrl); /* @ngInject*/ functionMyService($log){ varlastDays=this.getLastDays(); $log.debug("last days computed !"); this.data=lastDays; } MyService.prototype.getLastDays=functiongetLastDays(){ varlength =4; varstep =24*60*60*1000; varnow =Date.now(); varlastDays=[]; for(vari=1; i<length; i++){ vardate =newDate(now-i*step); lastDays.push(date); } returnlastDays; }; angular.module('app').service ('LastDays', MyService);
  • 43. Constant & Value •No dependencyinjection •Constant canbeinjectin config blocks functionLastDaysFunction(){ varlength =4; varstep =24*60*60*1000; varnow =Date.now(); varlastDays=[]; for(vari=1; i<length; i++){ vardate =newDate(now-i*step); lastDays.push(date); } returnlastDays; } angular.module('app').constant('LastDaysAsConstant', LastDaysFunction); angular.module('app').value('LastDaysAsValue', LastDaysFunction);
  • 44. Service creationsummary Method Configurable DI Service creation Providername module.provider() Yes Yes By callingthe provider method$get Service name+ 'Provider' module.factory() No Yes By callingthe providedmethod - module.service() No Yes By creatinga new instance of providedobject - module.value() No No Alreadyexist - module.constant() Yes No Alreadyexist Service name
  • 45. Service Talk is cheapShow me the code
  • 47. Routingdefinition Routing allows you to organize the parts of your interface thanks toURL routes. The routingfunctionnalityisdistributed separately from the core Angular framework.
  • 48. /* @ngInject*/ functionRouteConfig($routeProvider){ $routeProvider. when('/articles', { templateUrl:'partials/articles-list.html', controller:'ArticlesListCtrl' }). when('/articles/:articleId', { templateUrl:'partials/article-detail.html', controller:'ArticleDetailCtrl', resolve:{ article :/* @ngInject*/function($routeParams, Articles){ returnArticles.get({id :$routeParams.articleId}); } } }). otherwise({ redirectTo:'/articles' }); } angular.module('app').config(RouteConfig); Routingconfiguration URL route Template name Controller name URL route withvariable Asynchronousdata loader
  • 49. Routingapi •Configure a route$routeProvider.when(pathName, options) •Redirect unknown routes$routeProvider.otherwise(redirectPathName) •Get route variablesvar param= $routeParams.paramName •Getcurrentroutevar current= $route.current •Change route programmatically$location.path(path) •Observe route events$rootScope.$on(event, cb) Events : $routeChangeStart, $routeChangeSuccess, $routeChangeError, $routeUpdate
  • 50. Routingui-router AngularUIRouter is a routing framework, which allows you to organize the parts of your interface into astatemachinehttp://angular-ui.github.io/ui-router/ Allow nested and multiple views
  • 51. Routing Talk is cheapShow me the code
  • 52. Formvalidation 1/3 <formname=“userForm"ng-submit="update(user)"> Name: <inputtype="text"ng-model="user.name"name="uName"required/><br/> E-mail: <inputtype="email"ng-model="user.email"name="uEmail"required/><br/> <inputtype="checkbox"ng-model="user.agree"name="uAgree"required/> I agree <br/> <buttontype="submit">SAVE</button> </form>
  • 53. Formvalidation 2/3 userFormscope variable isa booleansmap: •$valid •$invalid •uEmail •$valid •$invalid •$dirty •$pristine •$touched(v1.3+) •$untouched(v1.3+) •$error •required •email •uName •$valid •$invalid •…
  • 54. Formvalidation 3/3 <formname="userForm" ng-submit="update(user)" novalidate> Name: <input type="text" ng-model="user.name" name="uName" required /><br/> <div class="error" ng-show="userForm.uName.$dirty&& userForm.uName.$invalid">Name invalid</div> E-mail: <input type="email" ng-model="user.email" name="uEmail" required/><br/> <div class="error" ng-show="userForm.uEmail.$dirty&& userForm.uEmail.$error.required">Requiredemail</div> <div class="error" ng-show="userForm.uEmail.$dirty&& userForm.uEmail.$error.email">Email invalid</div> <input type="checkbox" ng-model="user.agree" name="userAgree" required /> I agree<br/> <div class="error" ng-show="userForm.userAgree.$dirty && userForm.userAgree.$error.required">Be agree</div> <button type="submit" ng-disabled="userForm.$invalid">SAVE</button> </form>
  • 55. Formvalidation styling To allow styling of form as well as controls, ngModeladds these CSS classes: •ng-valid: the model is valid •ng-invalid: the model is invalid •ng-valid-[key]: for each valid key added by $setValidity •ng-invalid-[key]: for each invalid key added by $setValidity •ng-pristine: the control hasn't been interacted with yet •ng-dirty: the control has been interacted with •ng-touched: the control has been blurred •ng-untouched: the control hasn't been blurred input.ng-invalid.ng-dirty{ background-color: #FF0000; }
  • 56. Formvalidation Talk is cheapShow me the code
  • 58. To becontinuted… •Directive creation •Publish/subscribewith$scope •Animation •ngMessages •Best practice •https://github.com/toddmotto/angularjs-styleguide •https://github.com/johnpapa/angularjs-styleguide •Errormanagement •IE Compatibilty •…