Introduction à
@rossioddet
Miško Hevery
2009
Miško HeveryProjet 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
Miško Hevery
Le défi
Refaire l’équivalent des 6 mois de travail en 2 semaines
Miško Hevery
Pari perdu !
Miško Hevery
3 semaines
1 500 lignes de codes
La machine GoogleRefonte du projet Google Feedback
AngularJS devient open source
Des centaines de contributeurs
Promotion, Promotion, Promotion
Le 13/02/2014
SPA(Single Page Application)
Librairie vs Framework
Librairie vs Framework
AngularJS = framework pour SPA
Concepts clés
Templating côté client
Pattern MVC*
Databinding
Injection de dépendances
Extension du HTML
Pattern MVC* côté client
HTML
Vue
Modèle
Contrôleur Javascript
Front-end Javascript Back-end
HTTP
Templating côté client<div> Bonjour {{unPrenom}}, javascript est ton ami :)
<div ng-include="views/footer.html"></div> </div>
HTML
Databinding
<div> Bonjour {{unPrenom}}, </div>
var unPrenom = "Rossi";
Mise à jour automatiquedans les 2 sens
HTML Javascript
Injection de dépendances
var monModule = angular.module("monModule",["module1", "module2"]);
function ($scope, $window, monService) { // Utilisation de composant sans les instancier }
Extension HTML<div> <ma-balise></ma-balise>
<div mon-attribut="super"></div>
<div class="maClasseSpeciale"></div> <!-- monCommentaireSpecial --> </div>
HTML
Composants clés
Controller
Directive
Filter
Service
Module
HTML
Template
Javascript
Javascript
Javascript
Javascript
Javascript
|
$scope
HTML
Module
Module
Module
var monModule = angular.module("monModule", ["ngRoute", "unAutreModule"]);
Javascript
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
Quelques services AngularJS
$http
$log
$location
$window
$document
$rootScope
$rootElement
$exceptionHandler
$cacheFactory
$filter
ControllermonModule.controller( 'monController', function($scope, $window, monService) { $scope.monModel = {nom : 'Pierre'};
}
<div ng-controller="monController"></div>HTML
Javascript
Filter
app.filter('monFiltre', function () { return function (input) { return //résultat du traitement ; } });
{{ maVariable | monFiltre }}HTML
Javascript
Quelques filtres AngularJS
orderBy
number
upperCase
lowerCase
json
filter
date
Directivesapp.directive('cbpDirective', function () { return { restrict: 'EA', replace: true, template : '<div>…</div>', … }; });
<cbp-directive><cbp-directive> <div cbp-directive="super"></div>HTML
Javascript
Quelques directives AngularJSApplicationng-appng-controller
FormulaireTemplate Opérationng-patternng-minlengthng-maxlengthng-requiredng-listng-true-valueng-false-valueng-optionng-submit
ng-cspng-disabledng-hideng-showng-mouseng-repeatng-switchng-transcludeng-view
ng-changeng-checkedng-clickng-hrefng-selected
Bindingng-bindng-modelng-initng-srcng-style
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
AngularJS c’est aussi…
angular.copyangular.equalsangular.forEachangular.isArrayangular.isDateangular.element…
Des utilitaires Des modulesngAnimatengCookiesngMockngResourcengRoutengSanitizengTouch…
AngularUIUI-BootstrapUI-RouterNG-GridUI-AliasCalendarGoogle Maps…
Des testsUnitaireIntégration
La démo