| 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 20:05] – [1- Javascript sans framework] jcheron | slam4:richclient:angularjs:td0 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1 |
|---|
| |
| |
| 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... |
| - 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> |
| 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="info"><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> | <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> |
| - 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]] |