slam4:richclient:angularjs:td0

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:td0 [2015/01/20 19:49] – [3- AngularJS] jcheronslam4:richclient:angularjs:td0 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
Ligne 2: Ligne 2:
  
  
-AngularJS est un framework côté client atypique, permettant de construire des applications client riche avec une véritable séparation entre les couches (métier/interface/contrôle). +===== -- Exemple de sensibilisation... =====
- +
-Il introduit de nouveaux concepts (directives, services, modules...) avec lesquels il faut se familiariser dans un premier temps. +
- +
-Pour vous permettre une prise en main plus rapide du Framework, nous avons choisi d'utiliser le cours réalisé par Code school mis à disposition du public. +
- +
-  * Créer un compte gratuit sur [[https://www.codeschool.com/users/sign_up|Code school]] +
-  * Suivre en ligne le cours [[https://www.codeschool.com/courses/shaping-up-with-angular-js|Shaping up with Angular.js]] +
- +
-<html><img src="https://d1tijy5l7mg5kk.cloudfront.net/assets/logo-footer-fe42aac2977c8bc3383ce57b739a6c97.svg"></html> +
- +
- +
-===== Exemple de sensibilisation... =====+
  
 Pas toujours évident de voir l'intérêt d'utiliser un framework ; Surtout si on a jamais eu, auparavant, l'occasion de travailler sur les mêmes sujets, mais sans framework... Pas toujours évident de voir l'intérêt d'utiliser un framework ; Surtout si on a jamais eu, auparavant, l'occasion de travailler sur les mêmes sujets, mais sans framework...
Ligne 21: Ligne 9:
  
 Il s'agit de synchroniser un texte contenu dans la page avec une saisie effectuée dans une zone de texte : tout simple ! Il s'agit de synchroniser un texte contenu dans la page avec une saisie effectuée dans une zone de texte : tout simple !
 +
 +{{:slam4:richclient:angularjs:sensibilisation.png?nolink|}}
  
 ==== -- Javascript sans framework ==== ==== -- Javascript sans framework ====
Ligne 67: Ligne 57:
  
 Il nous faut : Il nous faut :
-  - Intercepter le chargement terminé du DOM de la page (c'est à l’événement **DOMContentLoaded** de nous le dire) : sans cette précaution (pas vraiment indispensable sur cette exemple), il se pourrait que l'on ajoute agisse sur des éléments non encore chargés...+  - Intercepter le chargement terminé du DOM de la page (c'est à l’événement **DOMContentLoaded** de nous le dire) : sans cette précaution (pas vraiment indispensable sur cette exemple), il se pourrait que l'on agisse sur des éléments non encore chargés...
   - une fonction pour modifier le texte contenu dans un élément HTML : **setTextContent**   - une fonction pour modifier le texte contenu dans un élément HTML : **setTextContent**
   - une fonction pour ajouter un listener sur un événement d'un élément DOM : **addEvent**   - une fonction pour ajouter un listener sur un événement d'un élément DOM : **addEvent**
   - une fonction pour synchroniser la zone de texte et l'élément HTML : **changeFunction**   - une fonction pour synchroniser la zone de texte et l'élément HTML : **changeFunction**
-  - Ajouter l'écoute des événements keyup et paste qui impliquent une modification de la zone de texte, et ajouter un temps d'attente sur le paste, pour qu'il se soit terminé avant l'appel de changeFunction  +  - Ajouter l'écoute des événements **keyup** et **paste** qui impliquent une modification de la zone de texte, et ajouter un temps d'attente sur le paste, pour qu'il se soit terminé avant l'appel de changeFunction  
  
-<html><div class="info">Certaines de ces fonctions pourraient être réutilisée ailleurs (et donc délocalisées), mais l'ensemble est tout de même laborieux, et technique.</div></html>+<html><div class="other">Certaines de ces fonctions pourraient être réutilisées ailleurs (et donc délocalisées), mais l'ensemble est tout de même laborieux, et technique.</div></html>
 ==== -- JQuery ==== ==== -- JQuery ====
 <sxh html;title:jquery.html> <sxh html;title:jquery.html>
Ligne 114: Ligne 104:
 Il faut : Il faut :
   - Agir lorsque le dom de la page est chargé : **$( document ).ready**   - Agir lorsque le dom de la page est chargé : **$( document ).ready**
-  - Créer un événement postpast, pour agir après que le "coller" d'un texte se soit produit (c'est ce qu'on appelle un trick : bricolage...) +  - Créer un événement **postpast**, pour agir après que le "coller" d'un texte se soit produit (c'est ce qu'on appelle un trick : bricolage ou astuce...) 
-  - Associer du code aux événements keyup et postpaste, pour synchroniser le contenu de la zone de texte et de l'élément HTML+  - Associer du code aux événements **keyup** et **postpaste**, pour synchroniser le contenu de la zone de texte et de l'élément HTML 
 + 
 +<html><div class="other"><span style="font-size:16px">Le code est propre, mais la technicité masque l'approche métier : difficile d'identifier au premier coup d’œil le rôle de ces lignes </span></div></html>
 ==== -- AngularJS==== ==== -- AngularJS====
 <sxh html;title:angularjs.html> <sxh html;title:angularjs.html>
Ligne 141: Ligne 133:
   - Invoquer message avec une expression dans l'élément HTML  : **<nowiki>{{message}}</nowiki>**   - Invoquer message avec une expression dans l'élément HTML  : **<nowiki>{{message}}</nowiki>**
  
-<html><div class="info"><span style="font-size:20px">Une approche très propre, orientée métier...<br>+<html><div class="other"><span style="font-size:20px">Une approche très propre, orientée métier...<br>
 Impressionnant non ?</span></div></html> Impressionnant non ?</span></div></html>
 +
 +===== -- Premiers pas =====
 +
 +
 +AngularJS est un framework côté client atypique, permettant de construire des applications client riche avec une véritable séparation entre les couches (métier/interface/contrôle).
 +
 +Il introduit de nouveaux concepts (directives, services, modules...) avec lesquels il faut se familiariser dans un premier temps.
 +
 +Pour vous permettre une prise en main plus rapide du Framework, nous avons choisi d'utiliser le cours réalisé par Code school mis à disposition du public.
 +
 +  * Créer un compte gratuit sur [[https://www.codeschool.com/users/sign_up|Code school]]
 +  * Suivre en ligne le cours [[https://www.codeschool.com/courses/shaping-up-with-angular-js|Shaping up with Angular.js]]
  • slam4/richclient/angularjs/td0.1421779787.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)