slam4:richclient:angularjs:td1

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

slam4:richclient:angularjs:td1 [2016/01/26 02:17] – [1.4- Vue] jcheronslam4:richclient:angularjs:td1 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
Ligne 3: Ligne 3:
  
 |< 100% >| |< 100% >|
-| {{:slam4:richclient:angularjs:angularjs.png?100}} | Tous les exercices utilisent [[http://getbootstrap.com/css/#helper-classes|Bootstrap]] pour la partie CSS.\\ 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>
  
Ligne 13: Ligne 13:
 <html></div></html> <html></div></html>
  
-Créer un dossier différent pour chaque exercice, dans le même projet+ 
 +==== -- 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 =====
  
Ligne 20: Ligne 27:
   - 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 ====
Ligne 35: Ligne 43:
 ^::: | <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 |
  
  
Ligne 56: Ligne 65:
 === -- Logique applicative / comportement de l'interface === === -- Logique applicative / comportement de l'interface ===
  
-  * sur saisie dans la zone **messageNote** (textarea), le nombre de caractères restants est indiqué+  * sur saisie dans la zone **messageNote** (textarea), le nombre de caractères restants est indiqué dans la zone **status**
     * la zone **info** apparaît et indique "note modifiée" dès que **messageNote** est modifié     * la zone **info** apparaît et indique "note modifiée" dès que **messageNote** est modifié
-    * Le style de la zone **info** passe à **<fc orange>alert-warning</fc>** si le nombre de caractères restant est inférieur à 50, et à **<fc red>alert-danger</fc>** s'il est inférieur à 20+    * Le style de la zone **status** passe à **<fc orange>alert-warning</fc>** si le nombre de caractères restant est inférieur à 50, et à **<fc red>alert-danger</fc>** s'il est inférieur à 20
  
   * Sur enregistrement (à condition que le message ne soit pas vide) :   * Sur enregistrement (à condition que le message ne soit pas vide) :
Ligne 67: Ligne 76:
 === -- 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 ====
Ligne 95: Ligne 103:
 [ [
  {  {
- 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
  }  }
 ] ]
Ligne 121: Ligne 129:
   * 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]]
Ligne 152: Ligne 161:
 === -- 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>
  • slam4/richclient/angularjs/td1.1453771027.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)