slam4:richclient:angularjs:td4

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
slam4:richclient:angularjs:td4 [2015/02/21 11:43] – [1.2- Fonctionnalité] jcheronslam4:richclient:angularjs:td4 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
Ligne 24: Ligne 24:
   * Créer une directive avec template (dans une fonction)   * Créer une directive avec template (dans une fonction)
   * Définir le scope d'une directive   * Définir le scope d'une directive
 +  * Utiliser la transclusion
 +  * Implémenter la méthode link
 +  * Utiliser $observe
  
 ==== -- Fonctionnalités ==== ==== -- Fonctionnalités ====
Ligne 31: Ligne 34:
  
 <sxh html;gutter:false> <sxh html;gutter:false>
-<bs-button data-ng-click="console.log('click')" style="{{style}}">Bouton cliquable</bs-button>+<bs-button data-ng-click="console.log('click')" style="{{style}}"> 
 +    Bouton cliquable 
 +</bs-button>
 </sxh> </sxh>
  
 <sxh html;gutter:false> <sxh html;gutter:false>
-<bs-button style="{{style}}" glyphicon="{{glyph}}" data-active="{{active}}" data-disabled="{{disabled}}">{{value}}</bs-button>+<bs-button style="{{style}}" glyphicon="{{glyph}}" data-active="{{active}}" data-disabled="{{disabled}}"> 
 +    {{value}} 
 +</bs-button>
 </sxh> </sxh>
  
Ligne 43: Ligne 50:
  
  
-{{:slam4:richclient:angularjs:exdirbuttons.png?700|}}+{{:slam4:richclient:angularjs:exdirbuttons.png?800|}}
  
 +
 +=== -- Test en ligne ===
 +
 +<html><a target="_new" href="http://angular.kobject.net/ex7"><button style="width:400px" class="btn">Tester les boutons</button></a></html>
 ===== -- Exercice : Alert ===== ===== -- Exercice : Alert =====
 Il s'agit de reproduire les [[http://getbootstrap.com/components/#alerts|Alerts Bootstrap]] Il s'agit de reproduire les [[http://getbootstrap.com/components/#alerts|Alerts Bootstrap]]
Ligne 53: Ligne 64:
   * Définir le scope d'une directive   * Définir le scope d'une directive
   * Utiliser la méthode link   * Utiliser la méthode link
 +  * Traiter des événements sur le DOM (**close.bs.alert**)
 +  * Passer des méthodes dans le scope
  
 ==== -- Fonctionnalité ==== ==== -- Fonctionnalité ====
Ligne 60: Ligne 73:
  
 <sxh html;gutter:false> <sxh html;gutter:false>
-<div bs-alert data-bs-style="warning"><strong>Well done!</strong> You successfully read this important alert message.</div> +<bs-alert style="{{style}}" close-button="{{closeButton}}" on-close="close()"> 
-</sxh> +    <strong>Well done!</strong> You successfully read this important alert message. 
- +</bs-alert>
-<sxh html;gutter:false> +
-<bs-alert data-bs-style="danger" data-close="true"><strong>Warning!</strong> Better check yourself, you're not looking too good.</bs-alert>+
 </sxh> </sxh>
  
Ligne 70: Ligne 81:
  
 Créer une interface de test de la directive, permettant de modifier ses attributs à l'exécution. Créer une interface de test de la directive, permettant de modifier ses attributs à l'exécution.
 +
 +{{:slam4:richclient:angularjs:exdiralert.png?700|}}
 +
 +<html><a target="_new" href="http://angular.kobject.net/ex8"><button style="width:400px" class="btn">Tester les Alerts</button></a></html>
  
 ===== -- Exercice : Progressbar ===== ===== -- Exercice : Progressbar =====
Ligne 80: Ligne 95:
   * Définir le scope d'une directive   * Définir le scope d'une directive
   * Utiliser la méthode link   * Utiliser la méthode link
 +  * Observer les modifications sur ngModel
  
 ==== -- Fonctionnalité ==== ==== -- Fonctionnalité ====
Ligne 97: Ligne 113:
  
 {{:slam4:richclient:angularjs:exdirprogressbar.png?800|}} {{:slam4:richclient:angularjs:exdirprogressbar.png?800|}}
 +
 +<html><a target="_new" href="http://angular.kobject.net/ex9"><button style="width:400px" class="btn">Tester les Progressbars</button></a></html>
  • slam4/richclient/angularjs/td4.1424515422.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)