| 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:07] – [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... |
| - 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="other">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> |
| - 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]] |