| |
| slam4:richclient:angularjs:td1 [2017/01/23 18:59] – [2.4- Vue] jcheron | slam4:richclient:angularjs:td1 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1 |
|---|
| <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 ==== |
| * 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/ex2"><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> |