enib 2013-2014 - cai web #1: côté navigateur 3/3
DESCRIPTION
ENIB 2013-2014 - CAI Web - Séance #1 : Côté navigateur 3/3 - AngularJSTRANSCRIPT
Conception d'Applications Interactives :
Applications Web et JEESéance #1
Côté navigateurHTML5 / CSS / JS / AngularJS
● Les bases du web○ HTTP, URL, HTML, CSS, JS, AJAX...
● HTML5 ○ HTML5, CSS3, le casse-tête des navigateurs...○ Le web en 2013, le responsive design
● Twitter Bootstrap○ Outils, échafaudage, LessCSS, JQuery
● Le développeur web en 2013○ Rôles, technologies, langages, veille technologique
● AngularJS○ Modèle MVC côté navigateur
Côté navigateur
● Pourquoi AngularJS ?● Les bases
AngularJS
AngularJSHTML enhanced for web apps!
Pourquoi AngularJS ?
Parce qu’on veut faire des vraies applications web
● AngularJS fonctionne sur le principe MVC ○ Apporte aux applications web côté client des services
traditionnellement apportés côté serveur○ Permet des applications web plus legères et dynamiques
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
● Et lorsque je raconte des histoires, je le fais du point de vue d’un développeur web
Si vous faites des applications client lourd,vous pourrez trouver que je caricature un peu
Mise en garde : Je suis un développeur web
Image : TylkoMrok.pl
Au début il y avait le client lourd
● Le bloc de base des IHM était le composant :○ Encapsulation○ Réutilisation
On créait les IHM en ensamblant des composantsImage : Wikipedia
Mais le développement web n’avait rien à voir...
● HTML/CSS/JS ne supportaient pas les composants○ Le bloc de base était la page
Les applications web étaient des ensembles de pages
Image : IBM
Des outils comme GWT ont introduit les composants dans les webapps
● GWT utilise un paradigme semblable au client lourd○ Composants, propriétés, événements...
Les webapps GWT sont orientées composant :Single-page apps
Image : GWT Mail sample app
Aujourd’hui les single-page apps ont le vent en poupe
● Proposent une expérience utilisateur (UX) riche○ Mais les construire n’est pas si simple
HTML/CSS/JS toujours pas orientés composants
Image : Ken Schultz comedy juggler
Le futur standard Web Components
● Le W3C travaille dans un standard Web Components○ Et on sait bien ce que ça veut dire
■ Piste : HTML5
Ils vont y travailler pendant des années, chipotant et pinaillant sans se mettre d’accord
En attendant on fait quoi ?
● On utilise des technologies qui permettent d’avoir cette approche single-page app avec les standard d’aujourd’hui
● Beaucoup d’alternatives : ○ BackboneJS, EmberJS, Polymer…
● Une solution simple, puissante, plébiscité et mure :
AngularJS
C’est quoi AngularJS ?
AngularJSLes bases
● Deux façons de définir un IHM : ○ impératif : enchaînee programmatiquement les ordres pour
construire l’IHM○ déclaratif : utiliser un langage pour décrire comment l’IHM se
présente à l’utilisateur
● Le web à la base est déclaratif : HTML○ Ses lacunes sont comblées par JS en impératif
■ Avec jQuery et d’autres, de plus en plus impératif
○ Difficile de faire des IHM riches en impératif
● AngularJS : approche déclarative
Déclaratif plutôt qu’impératif
● Pas réinventer un langage, utiliser celui qui est déjà là : HTML ○ AngularJS propose un mécanisme d’extension :
■ Des nouvelles balises et attributs HTML○ AngularJS va repasser sur le DOM
■ pour interpréter ces balises et ces attributs supplémentaires■ pour les instrumenter
● Objectif : du code HTML augmenté○ Répondant aux attentes de la description d’une IHM riche
moderne
● Approche différente des templates○ On ne genère pas du code HTML○ On écrit du HTML étendu
Angular JS is HTML enhanced for web apps! AngularJS is HTML6
Angular is what HTML would have been had it been designed for applications
Étendre HTML
Hello Angular
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"
></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Déclaration d’application AngularJS
Chargement de la bibliothèque
Liaison dynamique (data binding)
Comment feriez-vous la même chose avec d’autres technologies ?
● Permet la création de templates HTML○ Le code à l’intérieur des accolades est interprété
Syntaxe {{ }}
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"
></script>
</head>
<body>
<div>
<h1>2+2 = {{2+2}}</h1>
</div>
</body>
</html>
● Data binding : ○ mise à jour automatique de la vue quand le modèle change ○ mise à jour automatique du modèle quand la vue change
● Pas besoin de manipulations du DOM ni des événements
Data binding
Let’s click
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
</head>
<body>
<button ng-click="count = count + 1" ng-init="count=0">
Increment
</button>
count: {{count}}
</body>
</html>
Déclaration d’application AngularJS
Chargement de la bibliothèque
Directive déclarant une expression permettant d’incrémenter un compteur
Affichage du compteur
● Utilisés pour organiser les objets dans l’application
Les modules
Sur app.js :app = angular.module('myApp', []);
Sur index.html :<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
<script src="./app.js"></script>
</head>
<body>
[...]
</body>
</html>
● Dans l’appel à angular.module() :○ Premier argument : nom du module○ Deuxième argument : Dépendances du module
● Liés à des élément de l’IHM○ Contiennent les données et les fonctions
■ Avec lesquels les éléments de l’IHM interagissent ○ Intéragissent avec les services
■ Qui se chargent des choses comme les appels serveur
Les contrôleurs
Sur app.js :app = angular.module('myApp', []);
app.controller('mainCtrl',
function($scope){
$scope.name = 'Default Name';
});
Sur index.html :<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.0.5/angular.min.js"
></script>
<script src="./app.js"></script>
</head>
<body ng-app='myApp'>
<div ng-controller='mainCtrl'>
<input type='text' ng-model='name' />
<h2>{{name}}</h2>
</div>
</body>
</html>
$scope contient les données à la portée de l’élément IHM
$scope.name pour la variable name côté HTML
● Maintenant on plonge dans le côté pratique !
Livecoding à partir du site AngularJS.org
Et maintenant ?