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.

Découvrir Angular 2

Poursuivre avec son premier composant

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous avez commencé à aborder simplement votre premier composant. Julien Moulin vous propose d'aller encore un peu plus loin.
04:41

Transcription

On peut utiliser le Bootstrap. Il suffit simplement de faire une bootstrap. C'est une fonction, ça va prendre quelque chose. Là, vous remarquez que ça crie, parce qu'il a besoin, comme vous le voyez, d'un composant. Si on ne lui donne pas de composant à 'boostraper' il ne va pas démarrer. Comment va-t-on faire ça ? Rappelez-vous, notre add.component, on a fait un export ici. Donc, ça veut dire qu'il est disponible via add.component. Bah oui ! Ça veut donc dire qu'on va pouvoir faire import et on va faire app.component, from quoi ? Simplement from notre ficher qui se trouve à la racine, qui s'appelle donc app.component, tout simplement. Est-ce que ça s'appelle appcomponent comme ça ? Non, c'est app.component. Là, regardez, magie ! On est en train de pointer vers notre app.component. C'est très simple, on n'a pas besoin de grand chose. Ce qui veut dire qu'on va pouvoir le boostraper. Et hop ! Vous avez bootstrapé votre premier composant. Je récapitule : on créé un app.component.test avec simplement une petite annotation. C'est facile. Il n'y a pas grand chose dedans pour le moment. On l'exporte bien parce que sinon on ne pourra pas l'importer ailleurs, notre app.component qui pour le moment ne fait rien. Dans notre main.ts qui est notre fichier de bootstrap on va bootstraper. On apporte bootstrap depuis Ondular platform [inaudible] on importe notre app.component depuis le fichier simplement. Vous remarquerez que je n'ai pas besoin de mettre l'extension. ça se charge tout seul. Enfin, on bootstrape. On fait bootstrap on passe notre app.component dedans et normalement c'est magique. Vous avez remarqué quelque chose. Ici, dans votre package.json vous remontez un peu, vous avez des scripts. Regardez ce qu'ils font ces scripts. Le premier Start va nous permettre de transpiler avec TSC qui est en fait Typescript compilateur. Le TSC Typescript Compilateur permet de transformer votre code en JavaScript et ensuite il va lancer MPN run. Là, il va vous permettre de bénéficier d'une application. Vous remarquez que vous avez quelques commandes ici qui sont déjà référencées comme ambulance avec NPM. Tout simplement, on va faire ici, un mpm start et là vous allez voir qu'effectivement il va simplement transpiler, il va vous lancer ce qu'il faut. Vous allez vous retrouver avec une première application. Cette application ne fonctionnera pas dès le départ. Vous allez voir pourquoi, ici, il vous dit qu'il ne trouve pas votre main.js Il le cherche dans appmain.js Assez embêtant Ce n'est pas très grave, qu'est-ce qu'on va faire ? On va revenir ici, là vous voyez bien qu'il a transpilé ce qu'il a trouvé. On va supprimer les fichiers JS. On va supprimer le mainjs.map on en reparlera un petit peu plus tard. Très intéressant pour travailler. Faites de même avec le app.component.js et de même pour le app.componentjs.map et vous allez simplement créer un dossier app. Dedans, vous allez mettre le app.component et dedans, vous allez mettre le main.ts Là, vous allez simplement retourner dans votre console et vous relancez le mpmstart. Ça va recompiler ce que ça doit. Ça va vous trouver les différentes informations. Ça va relancer le quickstart et à ce moment-là vous devriez avoir quelque chose qui fonctionne. Attention, parce que regardez, on vous dit que ngapp ne marche pas comme selector, pourquoi ? Dans index.js qu'est-ce qu'on avait mis : myapp Ca ne peut pas fonctionner, ce n'est pas très grave. Il suffit de prendre ce selector-là et d'aller directement ici, remplacer le sélecteur. Vous remarquez quelque chose de très intéressant, c'est qu'on a beau être en js mine de rien on a de l'erreur, on a de l'information. On sait comment ça fonctionne. Si on se trompe, il n'y a pas de souci, on ne se trompe pas. Vous relancez un petit coup, à ce moment-là, ça va compiler, ça va relancer le navigateur, vous allez vous retrouver sur "Salut à tous". Là, vous êtes bons et ça fonctionne. Alors, attention quand même, allez-y doucement et essayez de bien comprendre ce qu'on vient de faire. Essayez de reprendre avec les fichiers. C'est une vidéo un petit peu longue, c'est normal, c'est notre premier composant. Mais ça nous permet de bien démarrer. Surtout, ça vous permet de voir les erreurs qu'on pourrait rencontrer. Si vous référencez une balise ici, pensez à bien la référencer à cet endroit-là. Voyez, en fait c'est relié. Il n'y a pas de secret. Ici, ce qu'on a là est forcément relié avec ce qu'on aura bootstrapé. Là, Angular va chercher le sélecteur que vous avez défini, va lui injecter tel template, de façon très simple. On ne se prend pas trop la tête. Et puis le même .ts permet simplement de boostraper. Trois fichiers pour une première application Angular.

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 !