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