Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Découvrir Angular 2

Créer un sous-module de composant

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Découpez le code et créez un module externe que vous relierez à votre module parent. À partir d'ici, vous allez commencer à structurer à la perfection vos projets.
02:58

Transcription

On va parler de la création de composants, on va aller un peu plus loin. Comment créer un composant qu'on rattacherait à un autre ? Pourquoi on ferait ça ? Je vais vous expliquer, regardez. Dans notre appcomponent.html , on a un template qui commence à devenir épais, et on aimerait bien pourquoi pas, sortir cette partie-là et le formulaire aussi. Enfin bref, avoir des sous-composants qu'on vient rajouter. C'est génial, ça permet aussi de faire de la ré-utilisabilité. C'est bien, maintenant comment on le fait ? On va le faire en plusieurs étapes. On va revenir en arrière, et je vais vous expliquer ce qui se passe dans l'application. On a bootstrapé, on a démarré le app component. Qu'est-ce qui fait que ça marche ? Ce que vous avez là, fait que ça marche : le sélecteur my app dans le index.html Ce sélecteur est câblé sur notre appcomponent.ts on lui a défini ici, qu'on voulez utiliser le sélecteur my app . Ca sert à faire fonctionner le composant, ça remplace ce qui se trouve sur html ici par le composant, le template html qu'on a référencé. Pour créer des sous-composants, ça marche de la même manière. Faisons-le en plusieurs étapes. D'abord, on le crée, c'est son composant et après je vous montre comment l'importer. Enfin je vous montrerai comment lui passer de l'information, car il y a trois étapes à respecter si on veut que tout fonctionne parfaitement. Donc première étape, on le crée, qu'est-ce que c'est ? C'est simplement un composant, on va l'appeler item.ts parce que item.ts c'est le composant item. Vous n'êtes pas obligés de l'appeler item.component, vous pouvez l'appeler item. Qu'est-ce qu'on a besoin d'importer ? C'est comme le app component donc on va devoir importer component sinon ça ne marchera pas. Ensuite on peut récupérer ce qu'on a là, le export est extrêmement important donc ne l'oubliez surtout pas. Et on va coller ici. Ça ne va pas être la même chose, on va enlever le style et renommer le template ; on va l'appeler item.html tout simplement. On va aussi changer le sélecteur, ça va être le sélecteur item. Et enfin, on va se créer notre composant, ca va être item avec ou sans majuscule. C'est très très bien. Vous avez remarqué quelque chose, on a export une classe item et on a déjà dans les modèles fait un export d'une classe item . Pas d'inquiétude, il n'y aura pas de conflit, je vous montre comment faire. Ce item.html , il va bien falloir le créer parce qu'on ne l'a pas, donc on ajoute un item.html et qu'est-ce qu'on va mettre dedans ? Dans ce item.html on va mettre la partie qui nous intéresse, c'est à dire toute celle qui est répétable qui se trouve ici, on va la couper, et puis on va venir dans item.html la coller. Pour le moment ça ne fonctionnera pas si vous rechargez le navigateur, mais vous avez crée le composant. Un composant est ni plus ni moins un sélecteur, que vous allez avoir ici, relié à un template que vous allez avoir ici. On a notre composant, voyons maintenant comment on va l'activer.

Découvrir Angular 2

Prenez en main toute la puissance du framework AngularJS. Exploitez ses fonctionnalités, et développez rapidement des applications web robustes et performantes !

2h50 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :6 sept. 2016
Durée :2h50 (40 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 !