http://slamwiki2.kobject.net/ 2026-05-02T01:31:34+00:00 http://slamwiki2.kobject.net/ http://slamwiki2.kobject.net/lib/tpl/bootstrap3/images/favicon.ico text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/accueil?rev=1567254094&do=diff AngularJS <img src="https://angularjs.org/img/AngularJS-large.png"/> <div class="important"> * QCM Clients riches 2017 * Evaluation Projects </div> AngularJs est un framework côté client créé et mis à disposition de la communauté par Google (né en 2009 mais V1 en 2011, dernière version stable : 1.6.1 en déc. 2016). L'une de ses particularités, par rapport aux Frameworks Javascript tels que Mootools ou JQuery<!----><!----> text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/bases?rev=1567254094&do=diff Concepts de base AngularJS -- Configuration de l'IDE Avec Eclipse : Installer AngularJS Eclipse Plugin (AngularJS Eclipse) Avec PhpStorm ou WebStorm: voir PhpStorm AngularJS -- Téléchargement Angular JS download -- Intégration Si le fichier est stocké en local : ou Quoi qu'en disent certains, il est préférable d'intégrer AngularJS le plus tôt possible dans la page, pour ne pas voir apparaître la page avant l'exécution des scripts Angular présents (même avec la directive <div class=… text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/boards-2?rev=1567254094&do=diff Boards Remise Zippée du projet sur <http://foad2.unicaen.fr/moodle/course/view.php?id=20911> Attention au nommage prenom.nom ! -- Contexte Dans le cadre de l'évaluation du potentiel d'Angular pour les projets de votre entreprise, vous travaillez sur un projet Exemple permettant de gérer les User stories de projets Scrum.<div class="info"></div><span class="variable">stories</span><span class="variable">steps</span><span class="variable">tags</span><span class="variable">devs</span><span clas… text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/boards?rev=1567254094&do=diff Boards Remise Zippée du projet sur <http://foad2.unicaen.fr/moodle/course/view.php?id=20911> Attention au nommage prenom.nom ! -- Contexte Dans le cadre de l'évaluation du potentiel d'Angular pour les projets de votre entreprise, vous travaillez sur un projet Exemple permettant de gérer les User stories de projets Scrum.<div class="info"></div><span class="variable">stories</span><span class="variable">tags</span><span class="variable">devs</span><span class="method">getStories()</span><span… text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/browserify?rev=1567254094&do=diff Browserify <table class="noborder" style="width:100%"><tr> <td> </td><td> Browserify est une bibliothèque javascript, utilisable en ligne de commande. Browserify permet le découpage d'une application javascript en modules : * Par la création d'un seul point d'entrée dans l'application en façade (bundle.js</td></tr></table> <table class="noborder"><tr> <td>Sans Browserify</td><td>Avec Browserify</td></tr> <tr> <td></td> <td></td> </tr> </table> <div class="todo">A faire, mais chez vous, o… text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/directives-creation?rev=1567254094&do=diff Création de directives Quels intérêts ? * Etendre le HTML et lui attribuer une logique métier * Factoriser le code, permettre la réutilisation Directive simple & template Utilisations possibles : Résultat : templateUrl Excepté pour les petits templates, il est préférable d'utiliser un fichier template séparé en affectant la propriété text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/directives?rev=1567254094&do=diff Directives Les directives Angular JS permettent de modifier le DOM et son comportement. Elles peuvent être invoquées sur différents éléments (éléments - E, attributs - A, classe Css - C, commentaire - M) : Directives fréquemment utilisées text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/elements?rev=1567254094&do=diff Javascript Elements pour Angular JS Closure Module Définir un module Définir un module et le stocker dans une variable Définir un module avec une dépendance Faire référence à un module existant Faire référence à un module dans une vue html <div class="note">Quelque soit la méthode utilisée, veillez à faire en sorte que les paramètres de la fonction controller soient définis dans le même ordre que les services injectés</div> text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/normes?rev=1567254094&do=diff Normalisation des projets AngularJS -- Directives Les notations suivantes permettent d'invoquer une directive : * <fc #008000> x-ng-directive-name</fc> (ok avec validation HTML) * <fc #008000>data-ng-directive-name</fc> (ok avec validation HTML text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/prerequis?rev=1567254094&do=diff Bases javascript Variables voir MDN Variables et litéraux Déclaration explicite (avec le mot clé var) : variable dont la portée dépend de l'emplacement de la déclaration (peut être locale) Déclaration implicite (sans le mot clé var => <fc #FF0000>déconseillé</fc>) : variable globale text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/projects?rev=1567254094&do=diff Projects Remise Zippée du projet sur <http://foad2.unicaen.fr/moodle/course/view.php?id=20911> Attention au nommage prenom.nom ! -- Contexte Vous travaillez sur un outil permettant de gérer des projets. Voici les principales caractéristiques du système d'information : * Chaque projet [project<div class="info"></div><span class="variable">_projects</span><span class="variable">_stories</span><span class="variable">_devs</span><span class="variable">_tags</span><span class="method">getProj… text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/routing?rev=1567254094&do=diff Routage Le module ngRoute d'angularJS permet d'associer le chargement de contenus à des URLs prédéfinies. -- Chargement du module Le module ngRoute n'est pas chargé par défaut avec AngularJS, il faut le faire explicitement : -- Intégration de ngRoute à un module <div class="note"></div> text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/services?rev=1567254094&do=diff Services Les services AngularJS permettent de partager du code dans une application, via l’injection de dépendances. AngularJS propose un grand nombre de services (et providers) prêts à l’emploi. Ils sont précédés du symbole $ ($scope, $http,$timeout text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/td0?rev=1567254094&do=diff TD n°0 -- 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... Voici un exemple minimaliste permettant de se rendre compte de l'intérêt d'AngularJS :<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><div class="other"><span st… text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/td1?rev=1567254094&do=diff TD n°1 <div class="noborder"> Tous les exercices utilisent Bootstrap pour la partie CSS. CDN URL : <https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css> </div> <div class="info"> Prérequis : * Réalisation du TD n°0 * Bases javascript * Concepts de base AngularJS </div> -- 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 ;<span class="variable">mess… text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/td2?rev=1567254094&do=diff TD n°2 <div class="info"> <table class="noborder" style="width:100%"><tr><td> Prérequis : * Réalisation du TD n°1 * Directives * Services * Filtres </td> <td style="text-align:right"> </td> </tr> </table></div> -- Exercice : choix multiples -- Objectifs * Créer un module et un contrôleur * Utiliser des directives Angular * Mettre en oeuvre le Data-binding -- Fonctionnalités * Lister les produits disponibles<span class="variable">dispoItems</span><span class="variable">in… text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/td3?rev=1567254094&do=diff TD n°3 <div class="info"> <table class="noborder" style="width:100%"><tr><td> Prérequis : * Réalisation du TD n°2 * Directives * Services dont http_service </td> <td style="text-align:right"> </td> </tr> </table></div> -- Exercice : Convertisseur de devises -- Objectifs * Utiliser des services Angular existants * Mettre en oeuvre l'injection de dépendance -- Fonctionnalités * Saisir un montant dans une devise source<div class="note"></div><div class="note"></div><span class=… text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/td4?rev=1567254094&do=diff TD n°4 : Directives <div class="info"> <table class="noborder" style="width:100%"><tr><td> Prérequis : * Réalisation du TD n°3 * Directives </td> <td style="text-align:right"> </td> </tr> </table></div> Tous les exercices utilisent Bootstrap : * CSS URL : <https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css> * JS URL : <https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js> -- Exercice : Buttons Il s'agit de reproduire les Buttons Bootstrap à parti… text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/td5?rev=1567254094&do=diff TD n°5 : Routage/ Gestion de projet <div class="info"> <table class="noborder" style="width:100%"><tr><td> Prérequis : * Réalisation du TD n°4 (non prioritaire) * Routage * Browserify </td> <td style="text-align:right"> </td> </tr> </table></div> -- Exercice : -- Objectifs * Mettre en oeuvre le routage * Créer un squelette de projet multi-modules -- Structure de l'application <div class="info"><strong>Seul le squelette de l'application est à créer dans un premier temps.</str… text/html 2019-08-31T14:21:34+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/slam4/richclient/angularjs/td6?rev=1567254094&do=diff TD n°6 - Boards <div class="info"> <table class="noborder" style="width:100%"><tr><td> Prérequis : * Réalisation du TD n°5 * Routage * Browserify * Services dont http_service </td> <td style="text-align:right"> </td> </tr> </table></div> -- Contexte Ce projet a été donné l'année dernière en évaluation. Dans le cadre de l'évaluation du potentiel d'Angular pour les projets de votre entreprise, vous travaillez sur un projet Exemple permettant de gérer les User stories de projets Scru…