Téléchargé 779 fois
![Les modules
●
Utilisés pour organiser les objets dans l’application
Sur app.js :
Sur index.html :
app = angular.module('myApp',
[]);
<!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](https://image.slidesharecdn.com/enib2013-2014-coursc-131125135759-phpapp02/75/ENIB-2013-2014-CAI-Web-1-Cote-navigateur-3-3-21-2048.jpg)
![Les contrôleurs
●
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
Sur app.js :
Sur index.html :
app = angular.module('myApp', []);
<!doctype html>
app.controller('mainCtrl',
<html ng-app="myApp">
function($scope){
$scope.name = 'Default Name';
});
<head>
<script src="http://code.angularjs.org/1.0.5/angular.min.js"
></script>
<script src="./app.js"></script>
$scope contient les données à
la portée de l’élément IHM
$scope.name pour la variable name
côté HTML
</head>
<body ng-app='myApp'>
<div ng-controller='mainCtrl'>
<input type='text' ng-model='name' />
<h2>{{name}}</h2>
</div>
</body>](https://image.slidesharecdn.com/enib2013-2014-coursc-131125135759-phpapp02/75/ENIB-2013-2014-CAI-Web-1-Cote-navigateur-3-3-22-2048.jpg)
Téléchargé parHoracio Gonzalez
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
Le document présente un cours sur la conception d'applications interactives, en se concentrant sur les technologies web modernes comme HTML5, CSS3, et AngularJS. Il souligne l'importance du modèle MVC dans AngularJS pour développer des applications web dynamiques et réactives, ainsi que l'utilisation de nouvelles balises HTML. Finalement, il aborde des concepts tels que la liaison dynamique et l'organisation des objets dans une application AngularJS.
Contenu connexe
![[AJCT] Profession : Community manager du secteur public](https://cdn.slidesharecdn.com/ss_thumbnails/ajct-reseaux-150520155644-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
Similaire à ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
- 1. Conception d'Applications Interactives : ApplicationsWeb et JEE Séance #1 Côté navigateur HTML5 / CSS / JS / AngularJS
- 2. Côté navigateur ● Lesbases 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
- 3. AngularJS ● Pourquoi AngularJS? ● Les bases
- 4. AngularJS HTML enhanced forweb apps!
- 5. Pourquoi AngularJS ? Parcequ’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 webapplications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
- 6. Mise en garde: Je suis un développeur web ● Et lorsque je raconte des histoires, je le fais du point de vue d’un développeur web Image : TylkoMrok.pl Si vous faites des applications client lourd, vous pourrez trouver que je caricature un peu
- 7. Au début ily avait le client lourd ● Le bloc de base des IHM était le composant : ○ Encapsulation ○ Réutilisation Image : Wikipedia On créait les IHM en ensamblant des composants
- 8. Mais le développementweb n’avait rien à voir... ● HTML/CSS/JS ne supportaient pas les composants ○ Le bloc de base était la page Image : IBM Les applications web étaient des ensembles de pages
- 9. Des outils commeGWT ont introduit les composants dans les webapps ● GWT utilise un paradigme semblable au client lourd ○ Composants, propriétés, événements... Image : GWT Mail sample app Les webapps GWT sont orientées composant : Single-page apps
- 10. Aujourd’hui les single-pageapps ont le vent en poupe ● Proposent une expérience utilisateur (UX) riche ○ Mais les construire n’est pas si simple Image : Ken Schultz comedy juggler HTML/CSS/JS toujours pas orientés composants
- 11. Le futur standardWeb 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
- 12. En attendant onfait 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
- 13.
- 14.
- 15. Déclaratif plutôt qu’impératif ● Deuxfaç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
- 16. Étendre HTML ● Pas réinventerun 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
- 17. Hello Angular Déclaration d’applicationAngularJS <!doctype html> <html ng-app> Chargement de la bibliothèque <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> Liaison dynamique (data binding) </html> Comment feriez-vous la même chose avec d’autres technologies ?
- 18. Syntaxe {{ }} ● Permetla création de templates HTML ○ Le code à l’intérieur des accolades est interprété <!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>
- 19. Data binding ● 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
- 20. Let’s click <!doctype html> <htmlng-app> Déclaration d’application AngularJS Chargement de la bibliothèque <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> Directive déclarant une expression permettant d’incrémenter un compteur </html> Affichage du compteur
- 21. Les modules ● Utilisés pourorganiser les objets dans l’application Sur app.js : Sur index.html : app = angular.module('myApp', []); <!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
- 22. Les contrôleurs ● 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 Sur app.js : Sur index.html : app = angular.module('myApp', []); <!doctype html> app.controller('mainCtrl', <html ng-app="myApp"> function($scope){ $scope.name = 'Default Name'; }); <head> <script src="http://code.angularjs.org/1.0.5/angular.min.js" ></script> <script src="./app.js"></script> $scope contient les données à la portée de l’élément IHM $scope.name pour la variable name côté HTML </head> <body ng-app='myApp'> <div ng-controller='mainCtrl'> <input type='text' ng-model='name' /> <h2>{{name}}</h2> </div> </body>
- 23. Et maintenant ? ● Maintenanton plonge dans le côté pratique ! Livecoding à partir du site AngularJS.org