Une petite introduction à AngularJS

1. Introduction à
@rossioddet

2. Miško Hevery
2009

3. Miško Hevery
Projet Google Feedback
6 mois de développement
17 000 lignes de codes front-end
Des difficultés à développer et à
réaliser du code testable

4. Miško Hevery
Le défi
Refaire l’équivalent des 6 mois de
travail en 2 semaines

5. Miško Hevery
Pari perdu !

6. Miško Hevery
3 semaines
1 500 lignes de codes

7. La machine Google
Refonte du projet Google Feedback
AngularJS devient open source
Des centaines de contributeurs
Promotion, Promotion, Promotion

8. Le 13/02/2014

9. SPA
(Single Page Application)

10. Librairie vs Framework

11. Librairie vs Framework

12. AngularJS = framework pour SPA

13. Concepts clés
Templating côté client
Pattern MVC*
Databinding
Injection de dépendances
Extension du HTML

14. Pattern MVC* côté client
Vue
HTML
Modèle
Contrôleur
Javascript
Javascript Front-end
Back-end
HTTP

15. Templating côté client
<div>
Bonjour {{unPrenom}}, javascript est ton ami :)
<div ng-include="views/footer.html"></div>
</div>
HTML

16. Databinding
Mise à jour automatique
<div>
Bonjour {{unPrenom}},
</div>
dans les 2 sens
var unPrenom = "Rossi";
HTML Javascript

17. Injection de dépendances
var monModule = angular.module("monModule",["module1",
"module2"]);
function ($scope, $window, monService) {
// Utilisation de composant sans les instancier
}

18. Extension HTML
<div>
<ma-balise></ma-balise>
<div mon-attribut="super"></div>
<div class="maClasseSpeciale"></div>
<!-- monCommentaireSpecial -->
</div>
HTML

19. Composants clés
Filter
Controller
Directive
Module
Service
Template
HTML
Javascript
Javascript
Javascript
Javascript
Javascript
|
$scope
HTML
Module
Module

20. Module
var monModule = angular.module("monModule", ["ngRoute",
"unAutreModule"]);
Javascript

21. Service*
monModule.factory("monService", function() {
return {
rechercher : function() {…},
enregistrer : function() {…}
}
}
function(monService) {
monService.rechercher();
}
Javascript
Javascript
* Il existe d’autres façons de créer des services

22. Quelques services AngularJS
$http
$log
$location
$window
$document
$rootScope
$rootElement
$exceptionHandler
$cacheFactory
$filter

23. Controller
monModule.controller(
'monController',
function($scope, $window, monService) {
$scope.monModel = {nom : 'Pierre'};
}
Javascript
HTML <div ng-controller="monController"></div>

24. Filter
app.filter('monFiltre', function () {
return function (input) {
return //résultat du traitement ;
}
});
Javascript
HTML {{ maVariable | monFiltre }}

25. Quelques filtres AngularJS
orderBy
number
upperCase
lowerCase
json
filter
date

26. Directives
app.directive('cbpDirective', function () {
return {
restrict: 'EA',
replace: true,
template : '<div>…</div>',
…
};
});
Javascript
<cbp-directive><cbp-directive>
<div cbp-directive="super"></div> HTML

27. Quelques directives AngularJS
Application
ng-app
ng-controller
Template Opération Formulaire
ng-pattern
ng-minlength
ng-maxlength
ng-required
ng-list
ng-true-value
ng-false-value
ng-option
ng-submit
ng-csp
ng-disabled
ng-hide
ng-show
ng-mouse
ng-repeat
ng-switch
ng-transclude
ng-view
ng-change
ng-checked
ng-click
ng-href
ng-selected
Binding
ng-bind
ng-model
ng-init
ng-src
ng-style

28. Directives & Validateurs HTML
Validateur Format Exemple (ngRepeat)
Aucun namespace-name ng-repeat=item in items
XML namespace:name ng:repeat=item in items
HTML5 data-namespace-name data-ng-repeat=item in items
xHTML x-namespace-name x-ng-repeat=item in items

29. AngularJS c’est aussi…
Des utilitaires Des modules
angular.copy
angular.equals
angular.forEach
angular.isArray
angular.isDate
angular.element
…
ngAnimate
ngCookies
ngMock
ngResource
ngRoute
ngSanitize
ngTouch
…
AngularUI
UI-Bootstrap
UI-Router
NG-Grid
UI-Alias
Calendar
Google Maps
…
Des tests
Unitaire
Intégration

30. La démo