Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Angular 2 : Dynamisation des applications

Définir le projet de développement

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez partir d'un projet simple qui pourra être amélioré. Parcourez-le afin d'en prendre connaissance.
04:56

Transcription

Ici on va avoir un projet de base. Un projet de départ évidemment. On va partir avec un projet qui existe déjà, sur lequel nous allons travailler. Pour que vous ne soyez pas perdus, je vais vous expliquer un petit peu ce projet et ce qu'on y trouve actuellement donc en l'état actuel. Évidemment on va le faire évoluer. Alors il y a des parties sur lesquelles je ne vais pas m'attarder parce qu'évidemment on va y revenir un petit peu plus tard, mais il faut que vous ayez un petit peu en main ce qui va se passer et ce qu'on va avoir actuellement. Alors on a un petit module de livraison très très simple, dans lequel je peux renseigner ici une référence, le nom et le prénom d'un client par exemple Julien, et un statut de livraison. J'ajoute l'objet, il s'ajoute à la collection directement. On peut très simplement changer ici le statut de la livraison jusqu'à aller à la commande livrée. Et on peut évidemment ici filtrer les différentes commandes avec un petit champ de recherche qui se trouve en haut. Alors c'est très très simple, ça a été divisé en quelques parties on a pas une très grosse application mais évidemment on va la faire évoluer ensemble, et on va ajouter des fonctionnalités. Alors qu'est ce qu'on trouve au niveau du code ? Alors un index pour html somme toute assez classique. Alors vous remarquerez que c'est décoré avec du bootstrap. Donc il y a eu une installation bootstrap via bower qui se trouve ici. Je pars du principe que vous connaissez un petit peu ces outils-là. Si vous ne les connaissez pas vous pouvez aller regarder sur internet ce que c'est que bower et comment on l'utilise. Sachez simplement que dans les sources ici vous avez un 'bower components' et vous avez la librairie bootstrap qui permet juste d'habiller. Ensuite, à l'intérieur du code on a simplement ici directement en fait une application, cette application elle a été compilée via system.js et vous utilisez en fait la console pour faire tourner le code. On a une commande qui s'appelle npm start qui permet de démarrer. Et on est donc en train d'utiliser le projet sur localhost:3000. Tout ça c'est fourni directement par system.js au travers d'un serveur node. On y reviendra un petit peu plus tard je vous montrerai comment on lance à un moment où on aura besoin de le faire ou de relancer l'application. Dans le dossier app on trouve ici, toutes les informations sur notre projet actuel. Alors il est découpé en quelques parties je vais pas m'attarder sur absolument tout on n'aura pas besoin de regarder absolument tout non plus pour le faire tourner, nous on va avoir besoin de modifier essentiellement certains modules. Alors on a ici un app.component. Alors à chaque fois vous prendrez les fichiers ts parce que c'est ceux qui vont nous intéresser. Les autres ne sont que la compilation via systeme.js. Dans le app.component.ts, on trouve une petite déclaration de component avec ici une template et du css attaché. On a également ici donc dans notre app.component, quelques privés qui sont déclarés. Donc on a un title, une version et une collection qui est une collection d'item. On a ensuite dans le constructeur un petit peu de configuration provenant du fichier de config : config.ts que l'on a créé également. Et ici, une petite fonctionnalité qui est reliée en fait sur le formulaire et qui permet d'ajouter l'item nouveau celui qu'on référence ici sur la collection. On a également ici un item.js avec un item.html qui s'occupent de gérer simplement ici, l'itération des items. Donc on récupère les items mais pour chaque item, donc ça s'est dans le template de l'itération. Concrètement il faudra aller regarder le app.component qu'on a là. On a une itération qui utilise simplement ce composant pour faire l'affichage. Cet affichage il est utilisé également avec une petite fonction que vous trouverez sur item.js. Cette fonctionnalité qu'est ce qu'elle permet ? Elle permet simplement de changer le statut. Donc dans item.ts, pas grand-chose, et dans item.html, simplement la décoration, à chaque fois, de chaque panel. Donc c'est cette partie-là qui va venir afficher à chaque fois chaque commande. Alors vous voyez qu'on a un petit peu de logique là-dedans. Évidemment on viendra, cette logique la réécrire parce que bah elle est quand même assez épaisse et on va parler à un moment donné, dans la formation, des composants et essentiellement des directives qui nous permettrons de faire un code plus petit. On a ensuite un formulaire, donc item.form.ts qui n'a pas énormément de méthode non plus. Simplement on a une méthode qui permet de faire un reset du form donc de remettre absolument tout à zéro. Il y a un modèle qui a été bindé sur le formulaire. Et puis ici on a un createItem qui s'occupera, avec le onCreateItem qui a été passé directement sur ce composant, de rajouter et donc de jouer la fonction qu'on a passée au composant qui se trouve sur le parent. Le parent c'est app.component.ts qui est le parent de tout, et c'est lui qui va passer le onCreateItem à ce composant-là pour qu'il puisse l'utiliser. Alors vous voyez qu'ici on n'a pas beaucoup de composants donc un composant global, un composant pour le formulaire et également un petit composant qui vient afficher les items. C'est un tout petit projet, mais c'est un projet qui est assez suffisant pour qu'on puisse notamment parler d'animation, qui sera le premier sujet de cette formation, puisqu'ici on a pas mal de choses que l'on pourrait animer. On pourrait s'amuser à faire de l'animation sur beaucoup, beaucoup d'éléments, notamment sur les collections, sur les items, sur les ajouts. Il y a pas mal de choses à voir. Accrochez vos ceintures, c'est parti.

Angular 2 : Dynamisation des applications

Apprenez à dynamiser vos applications avec AngularJS. Créez un module parent, utilisez le moteur d’animation intégré, découvrez les cycles de vie disponibles, etc.

2h03 (28 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :31 oct. 2016
Durée :2h03 (28 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !