http://slamwiki2.kobject.net/ 2026-06-19T13:45:29+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 * QCM Clients riches 2017 * Evaluation Projects 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 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. 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. 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 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 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 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 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 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 : 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 Tous les exercices utilisent Bootstrap pour la partie CSS. CDN URL : <https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css> Prérequis : * Réalisation du TD n°0 * Bases javascript * Concepts de base AngularJS -- 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 ; 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 Prérequis : * Réalisation du TD n°1 * Directives * Services * Filtres -- 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 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 Prérequis : * Réalisation du TD n°2 * Directives * Services dont http_service -- 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 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 Prérequis : * Réalisation du TD n°3 * Directives 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 à partir d'AngularJS. -- Objectifs * Créer une directive avec template (dans une fonction) 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 Prérequis : * Réalisation du TD n°4 (non prioritaire) * Routage * Browserify -- Exercice : -- Objectifs * Mettre en oeuvre le routage * Créer un squelette de projet multi-modules -- Structure de l'application -- Créer les vues 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 Prérequis : * Réalisation du TD n°5 * Routage * Browserify * Services dont http_service -- 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 Scrum.