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

Prendre en main un premier composant très simple

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
C'est parti pour coder ! Découvrez la notion de composant. Il s'agit de la pierre angulaire de votre framework nouvelle génération.
05:50

Transcription

Ça y est, on y est, on va enfin créer un premier composant et vous allez vraiment découvrir ce qui se passe derrière Angular. Bien sûr cela peut vous paraître un peu compliqué au début mais on va tout démystifier. Ce dont on va avoir besoin, je vais tout fermer ici, pour qu'on se retrouve avec une structure classique, les nodes modules. Ici, on a du Tippings, à l'intérieur, cela fait partie du système. Et puis après, on a de l'information, on a déjà tous les paquets, on a déjà le style et l'index, bon ! Maintenant, il va nous falloir d'autres fichiers. La première chose à créer, c'est un premier composant. Ce premier composant, ça va être notre composant de base. Alors attention ! à bien mettre à l'intérieur, ici, de votre dossier ; Positionnez-vous sur n'importe quel fichier, et faites plus. Ici, on va créer simplement, un App, point, Component, point, et Ts (attention ! pas Js, mais bien Ts). En TimeScript, on va jouer avec des Imports et des Exports. On va créer des Class qui vont pouvoir être exportées, et donc importées ailleurs. Et bien sûr, on va avoir besoin aussi de Class qui existent déjà dans Angular, que l'on va importer. On va simplement ici, faire Import, et puis comme ça, entre accolade, on va lui dire qu'on souhaite utiliser le Component qui donc est une Class provenant de quelque part. Donc, From toujours. Et là on va chercher ici, quelque chose. On va chercher Angular schlash Core Je vous dis ou cela se trouve évidemment. Là, on va simplement sauvegarder. Si vous n'avez pas l'auto complétion en appuyant sur Contrôle ou en appuyant sur Pomme, si vous êtes sur Mac, vous fermez le fichier simplement puis vous le rouvrez ; c'est une astuce. Mais parfois, tout simplement, le logiciel ne saisit pas ce qui se passe ou ne fait pas le Scan : n'hésitez pas ! Ici, vous remarquez bien qu'ici, c'est Component ; si vous l'ouvrez, vous allez voir que c'est un fichier qui provient directement d'Angular. Donc là, Angular Core, et vous allez directement le chercher. N'hésitez pas à vous balader comme ça, dans les Class, car cela vous permettra de comprendre un peu ce qui se passe. Bien sûr, on est en train de travailler avec ce qui se trouve dans notre module : At Angular et puis Core. Vous voyez bien qu'ici, le From, va bien me pointer vers un dossier, Il n'y a donc rien de magique. C'est simplement une liaison qui est faite. Maintenant qu'on a un Component, comme ça et qu'on a surtout importé la Class de Component, qu'est ce qu'on va faire avec ? On va définir un premier Component. Et pour définir un Component, on va utiliser une annotation : Arobase et Component. En faisant cela, vous allez ouvrir parce que c'est une fonction et à l'intérieur, vous allez ouvrir un Objet. Cet objet va avoir beaucoup de particularités. Vous allez pouvoir renseigner beaucoup d'informations. Bien sûr, ici, on va simplement lui donner comme information, deux informations de départ. Ici, on va lui donner un Selector, Selector, comme ça. Le Selector pour nous cela sera : NgAp, par exemple. Et en-dessous, on va aussi lui donner un Template et le Template, ici, ce sera quelque chose qu'on va référencer. Par exemple, cela pourrait être « 1H1, et salut à tous ». Une fois que vous aurez fait ça, bien sûr, vous aurez défini un Component. Attention ! cependant, vous pouvez allez regarder dans la documentation de départ puisque ce sont des exemples de base, base, base. Vous voyez bien que cela se définit comme ça, c'est très simple, il n'y a rien de plus à faire. Cette annotation ne fonctionnera qu'au-dessus d'une fonction. Il va falloir faire Export, comme ça, Fonction, et vous allez appeler votre première fonction comme vous le voulez, mais le mieux, c'est de l'appeler App Component Tout simplement, comme ça, et là vous aurez quelque chose, hein ! Export, alors attention ! excusez-moi, c'est une Class, pas une Fonction du tout. Et vous ouvrez, vous fermez. Comme toujours, c'est une Class. une Class cela porte un nom, des accolades derrière. Et bien sûr, vous imaginez bien qu'on va pouvoir faire des choses à l'intérieur. Voilà ! On a que çà à faire. Quand on démarre un composant, on importe Component depuis Angular Core. On définit l'annotation qui va avoir beaucoup de propriétés. Et pas que cela bien sûr, on va pouvoir référencer d'autres propriétés. Et enfin, on fait un Export. Bon, vous allez me dire, c'est bien joli tout ça, mais ça ne marche toujours pas ! C'est vrai que si vous lancez un HTLM dans le navigateur, cela ne marchera pas. Qu'est ce qui va nous manquer ? Il va nous manquer ce fameux fichier dont on a déjà parlé. Alors, attention à bien vous positionner à chaque fois ! Main.Ts, si vous n'avez pas votre Main.Ts, cela ne fonctionnera pas ! Pourquoi ? Parce qu' en fait, quand vous regardez dans votre Système.js, vous avez besoin de ce name pour pouvoir démarrer l'application. On va ici, maintenant le créer. Et comment on va le créer ? Qu'est ce qui va faire ? Le Main.Ts, pour nous, c'est notre fichier de bout de strap. On va devoir d'abord faire un Import ici, de quelque chose qui va s'appeler Bout de strap. Et qui va provenir de quoi ? Qui va provenir, toujours pareil d'Angular mais pas vraiment du Core. Non, il va venir du Brother Plate-forme Dynamique*. Ici, on va aller référencer la même chose : At Angular. Et là, on va pouvoir chercher (on va essayer de le recopier proprement). Cela va être : *Plate-forme, Brother, Dynamique. On va faire Plate...forme....Brother... ...et Dynamique. Voilà ! Et là vous allez avoir accès à Bout de strap. Attention ! parce que par contre, ici, il ne me me le trouve pas ! Donc, s'il ne me le trouve pas, Hop ! on va Enregistrer, Fermer, et puis simplement, Hop ! rouvrir le fichier pour être sûr que c'était bien comme ça qu'on devait l'écrire. Si c'est pas bien comme ça, c'est parce qu'il n'y a pas de majuscule, c'est une minuscule. Cela va dépendre, faites attention ! sur les annotations, généralement on a ça. Et puis ici, bon il n'y a pas !

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
Date de parution :6 sept. 2016

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 !