| |
| slam4:richclient:angularjs:td1 [2016/01/26 02:25] – [TD n°1] jcheron | slam4:richclient:angularjs:td1 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1 |
|---|
| |
| |< 100% >| | |< 100% >| |
| | {{:slam4:richclient:angularjs:angularjs.png?100}} | Tous les exercices utilisent [[http://getbootstrap.com/css/#helper-classes|Bootstrap]] pour la partie CSS.\\ CDN URL : [[https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css]] | | | {{:slam4:richclient:angularjs:angularjs.png?100}} | Tous les exercices utilisent [[http://getbootstrap.com/css/#helper-classes|Bootstrap]] pour la partie CSS.\\ CDN URL : [[https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css]] | |
| <html></div></html> | <html></div></html> |
| |
| <html></div></html> | <html></div></html> |
| |
| Créer un dossier/projet différent pour chaque exercice | |
| | ==== -- Création du/des projet/s ==== |
| | |
| | - Créer un dossier **angular-tds** à partir du Root de votre serveur web ; |
| | - Publier **angular-tds** sur github en tant que nouveau repository ; |
| | - Ajouter **jcheron** à la liste des **colaborators** de ce projet ; |
| | - Créer ensuite un dossier/projet différent pour chaque exercice dans **angular-tds** ; |
| | - Publier (commit and push) régulièrement sur github. |
| ===== -- Exercice : application Note ===== | ===== -- Exercice : application Note ===== |
| |
| - Utiliser des directives Angular | - Utiliser des directives Angular |
| - Mettre en oeuvre le Data-binding | - Mettre en oeuvre le Data-binding |
| | - Utiliser un service ($cookies) |
| |
| ==== -- Fonctionnalités ==== | ==== -- Fonctionnalités ==== |
| ^::: | <html><span class="variable">messageNote</span></html>\\ variable stockant le contenu de la note | | ^::: | <html><span class="variable">messageNote</span></html>\\ variable stockant le contenu de la note | |
| ^::: | <html><span class="variable">info</span></html>\\ message affiché (modifié, sauvegardé...) | | ^::: | <html><span class="variable">info</span></html>\\ message affiché (modifié, sauvegardé...) | |
| ^::: | <html><span class="method">save()</span></html>\\ Met à jour le modèle (messageNote) | | ^::: | <html><span class="variable">status</span></html>\\ entier (facultatif) correspondant aux différents statuts possibles :\\ 0=>Note sauvegardée, 1=>statut initial, 2=>reste moins de 20, 3=>reste moins de 10 | |
| | ^::: | <html><span class="method">save()</span></html>\\ Enregistrement dans un cookie | |
| ^::: | <html><span class="method">clear()</span></html>\\ vide messageNote | | ^::: | <html><span class="method">clear()</span></html>\\ vide messageNote | |
| ^::: | <html><span class="method">count()</span></html>\\ Calcule le nombre de caractères restants (sur 100) | | ^::: | <html><span class="method">count()</span></html>\\ Calcule le nombre de caractères restants (sur 100) et le retourne | |
| |
| |
| === -- Test en ligne === | === -- Test en ligne === |
| |
| <html><!--<a target="_new" href="http://angular.kobject.net/note/"><button style="width:400px" class="btn">Tester l'appli <b>Note</b></button></a>--></html> | <html><a target="_new" href="http://angular.kobject.net/ex1" style="width:400px" class="btn">Tester l'appli <b>Note</b></a></html> |
| ===== -- Exercice : Choix de services ===== | ===== -- Exercice : Choix de services ===== |
| ==== -- Objectifs ==== | ==== -- Objectifs ==== |
| [ | [ |
| { | { |
| name: 'Web Development', | "name": "Web Development", |
| price: 300, | "price": 300, |
| active:true | "active":true |
| },{ | },{ |
| name: 'Design', | "name": "Design", |
| price: 400, | "price": 400, |
| active:false | "active":false |
| },{ | },{ |
| name: 'Integration', | "name": "Integration", |
| price: 250, | "price": 250, |
| active:false | "active":false |
| },{ | },{ |
| name: 'Formation', | "name": "Formation", |
| price: 220, | "price": 220, |
| active:false | "active":false |
| } | } |
| ] | ] |
| * ng-app | * ng-app |
| * ng-controller | * ng-controller |
| | * ng-click |
| * [[https://docs.angularjs.org/api/ng/directive/ngRepeat|ng-repeat]] | * [[https://docs.angularjs.org/api/ng/directive/ngRepeat|ng-repeat]] |
| * [[https://docs.angularjs.org/api/ng/directive/ngClass|ng-class]] | * [[https://docs.angularjs.org/api/ng/directive/ngClass|ng-class]] |
| === -- Test en ligne === | === -- Test en ligne === |
| |
| <html><!--<a target="_new" href="http://angular.kobject.net/services/"><div style="width:400px" class="btn">Tester l'appli <b>Services</b></div></a>--></html> | <html><a target="_new" href="http://angular.kobject.net/ex2" style="width:400px" class="btn">Tester l'appli <b>Services</b></a></html> |