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

Explorer l'interface pour les collections d'objets

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Structurer ses données est avant tout attacher des types aux variables, aux objets et aux retours de fonctions. TypeScript vous le permet et Julien Moulin vous invite à le faire dès que possible.
05:16

Transcription

On travaille sous Angular pour le moment avec des objets que l'on crée nous même. Il serait beaucoup plus intéressant d'avoir des vrais modèles objets. Vous allez voir pourquoi. Ca amène beaucoup de structuration dans le code, ca permet d'utiliser l'opérateur new, ca permet de ré-utiliser. La ré-utilisabilité va devenir très importante. Ce chapitre, on va aborder les choses intéressantes pour la ré-utilisabilité. Comment on fait pour créer des modèles ? D'abord on les classe, on va faire ça proprement, on va faire un nouveau dossier qui s'appelera models, dans lequel on va créer un modèle pour notre item. On va créer un nouveau fichier à l'intérieur du modèle qui va s'appeler item.ts Attention, on garde toujours cette extension ts pour TypeScript. Quand vous aurez fait ça, vous allez créer une classe. Une classe Item. Remarquez qu'ici j'utilise un i majuscule, c'est normal, c'est la convention qui veut ça. Les modèles ou n'importe quelle classe ont une majuscule au début, les noms de fichiers n'en ont pas. Maintenant je vais déplacer les propriétés de mon objet. On en a trois pour le moment, on va les couper et les mettre à cet endroit-là. Attention, c'est un peu différent. On va simplement les avoir comme ça, c'est des propriétés avec un ; à la fin, et puis, chacun sur une ligne. On pensera aussi à leur donner une visibilité. Pour le moment on ne fait pas d'extension, on ne fait rien, c'est pas une classe mère On va simplement tout mettre en privé, ça fait parti de la classe, ça ne bouge pas. Private. Pensez aussi à mettre par convention, un petit espace après les deux points pour référencer le type, c'est un peu plus propre. Qu'est-ce que va avoir d'autre, comme information, un objet ? Un constructeur, qui va permettre de construire l'objet. Ce constructeur, qu'est-ce qu'il va prendre à l'intérieur ici ? Généralement, il va prendre un objet. On peut lui donner des datas qui seront un objet, attention à l'auto complétion, c'est data: et puis on va lui donner un objet. On ne référence pas ce qui peut se trouver à l'intérieur, pourquoi ? Parce qu'on ne sait pas ce qu'on va passer par contre on sait ce qu'on s'attend à avoir pour créer l'objet. Donc on va le créer ; 10 reference va être égal à data.reference. Vous voyez que ça ne pose pas de problème de faire ça, parce qu'on ne sait pas ce qu'on va avoir à l'intérieur. Le mieux c'est de référencer un objet en disant que vous attendez quelque chose. Le problème c'est que si vous référencez un objet, vous êtes obligés de fixer les valeurs. Pour ne pas être embêtés avec les traits rouges, dites que vous attendez tout et n'importe quoi. Vous pouvez encore aller un peu plus loin, si vous attendez trois paramètres, vous pouvez référencer comme ça ; reference etc, name et state, ça marche aussi. Faites du any dans la plupart des cas ça passe, ça reste propre. data.name et enfin 10.state égale data.state Notre modèle est quasiment près, on va pouvoir maintenant l'utiliser. Comment on utilise un modèle ? Il va falloir l'importer. On va importer la classe Item avec un i majuscule, depuis avec from et on va devoir référencer l'emplacement. L'emplacement c'est quoi ? On part du dossier initial dans lequel on se trouve, app, donc on fait point slash , on va chercher models et enfin on va chercher item. Vous remarquerez que ça ne fonctionnera pas, pourquoi ? Car pour pouvoir importer quelque chose, vous devez d'abord l'exporter. On va devoir utiliser le mot-clé export pour créer le modèle et l'exporter. On a presque terminé de créer notre modèle il va falloir maintenant l'utiliser. On sait que la private new item va devoir correspondre à item, on peut référencer le modèle comme étant le type de new item. Enfin, à cet endroit là on va devoir créer un nouvel item. On va faire new item et les parenthèses, garder toutes les propriétés dont on a besoin pour créer l'item. C'est tout. Là on utilise vraiment l'item, il n'y a pas de problème. Dernière chose que vous pourriez faire, dites que vous attendez une collection d'items, le seul problème est qu'on avait quelques choses au début, on peut le fixer facilement, on peut dire que ça c'est un nouvel item , et ainsi de suite. On va dire ici que ça c'est un nouvel item aussi. On n'oubliera pas les parenthèses fermantes à la fin, et là tout va respecter l'intégralité de notre modèle, on va lui dire que cette collection est une collection d'items, que new item est un item et qu'à l'intérieur, pour les données de test, on a bien des items . Vous enregistrez, vous retournez sur votre page, aucun problème. Vous pouvez recharger pour être sûr que ça fonctionne, c'est bien affiché. On garde les mêmes pointeurs, on peut aller chercher les mêmes propriétés dans le template et on peut venir référencer. Référence d'abord, et puis, un state et on ajoute. Vous verrez bien qu'en bas vous aurez votre nouvel objet qui est créé. On est sur un modèle objet, c'est beaucoup plus propre et ça vous permet de fixer des vrais modèles qu'on va pouvoir réutiliser partout dans notre code. Il suffira juste de faire un import pour l'utiliser dans le corps de votre composant, ou dans un classe ou service

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 !