Introduction à Angularjs

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

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

Miško Hevery 3 semaines 1 500 lignes de codes

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

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 Vue HTML Modèle Contrôleur Javascript Javascript Front-end Back-end HTTP

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

Databinding Mise à jour automatique <div> Bonjour {{unPrenom}}, </div> dans les 2 sens var unPrenom = "Rossi"; 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>  </div> HTML

Composants clés Filter Controller Directive Module Service Template HTML 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

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

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

Quelques filtres AngularJS orderBy number upperCase lowerCase json filter date

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

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

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… 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

Introduction à Angularjs

Contenu connexe

Tendances

Similaire à Introduction à Angularjs

Plus de Rossi Oddet

Introduction à Angularjs