Mettre une application en production avec Angular 2

Organiser le code source

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Apprenez à définir vos modules correctement avec Angular. Ainsi, vous serez plus efficace dans la préparation de la mise en production.
03:50

Transcription

Je vais vous parler d'organisation de sources. Avant même de vous parler de l'automatisation parce que c'est extrêmement important de savoir organiser un projet. Ça nous permettra d'aller plus vite et de mettre en production un peu plus vite. Ça améliore pas mal de choses, évidemment dans le travail avec d'autres développeurs, mais aussi dans l'automatisation et surtout la compilation. Vous verrez que tout ça est extrêmement utile, un peu plus tard. Alors, comment ça fonctionne une bonne organisation de sources pour un projet Angular 2 ? Vous aurez un dossier app qui est ici, et c'est bien. Il faut un dossier app obligatoire dans le dossier src, c'est mieux. Tout ce qui va être assets, c'est-à-dire les css, les images, etc., dans un dossier prévu pour ça, tout ce qui va être meta, c'est-à-dire les méta informations, si vous voulez mettre un robots.txt, par exemple. Tout ça, vous allez le mettre, pareil, dans un dossier meta. Comme ça, vous organisez proprement vos différentes sources. Et puis, bien évidemment, ici, à l'intérieur de notre dossier, on va organiser proprement aussi. Alors, c'est toujours, vous allez voir dans chacun de mes dossiers, le fichier index.ts qui sera pointé le premier. Qu'est-ce que c'est que ce fichier ? Peut-être que vous ne l'avez jamais vu. L'index.ts, ça nous permet de définir un export global. Donc, concrètement ici, je vais mettre « * », et je vais lui dire que l'export de ce dossier, dossier app, donc mon point d'entrée, ça va être app.module, ce qui est logique puisque c'est celui qui sera chargé en premier. Dans mon app.module, si on va regarder un petit peu comment est organisé le projet, on voit que pour chaque composant, on a un dossier à chaque fois, et on voit surtout que pour charger les composants, regardez, je n'utilise que le dossier. Par exemple, je lui dis de me charger le home component, pas depuis /home/HomeComponent, mais depuis directement le dossier home. Ça, c'est extrêmement bien de le faire comme ça. Pourquoi ? Parce que vous allez définir le point d'entrée à l'intérieur d'un dossier, et l'organisation en sera grandement améliorée. Si on regarde maintenant comment ça se passe à l'intérieur de home, on voit qu'effectivement, j'ai également ici un index.ts. L'index.ts, c'est ce qui va être utilisé par l'import quand vous allez donner un dossier. Il va aller chercher l'index.ts, et ce sera le premier fichier qu'il va lire, et il va permettre de faire l'exportation de tout ce qui se trouve dedans depuis quelque chose. Donc là, en l'occurrence, c'est depuis home.component qui est un fichier. Donc mon home.component va être chargeable quand je vais faire un import de /home. Et vous verrez que dans le projet, c'est pareil partout. Dans detail, on a index.ts également qui lui va définir encore un petit peu plus de choses puisque là, comme vous le voyez, vous pouvez aussi dans votre index.ts directement définir un module. C'est jouable de faire comme ça aussi. Soit concrètement vous venez répertorier ici sur l'export « * » effectivement un composant particulier qui sera pointé, soit vous pouvez tout à fait, comme dans detail, venir définir tout de suite le module, c'est jouable aussi, ce n'est pas un problème, on a le droit de faire comme ça. Après, c'est à vous de voir, vous faites comme vous en avez envie. Des fois, ce sera des modules, des fois ce sera juste des composants qui seront exportés. Là, c'est vraiment votre choix d'organisation. Je vous conseille quand même la plupart du temps d'essayer de faire des modules. Pourquoi ? Parce que des modules, ça rend le code modulaire et du coup, vous pourrez utiliser par exemple ce module-là dans n'importe quel projet autre que vous allez développer. Donc, développer un module est beaucoup plus intéressant que de développer un composant. Donc, n'hésitez pas à faire comme ça, c'est tout pour l'organisation. Bien sûr, on ne va pas pousser plus que ça parce que là on va vraiment parler du déploiement, mais sachez que vous devez toujours avoir une organisation correcte avec les informations aux bons endroits, des modules qui se chargent généralement dans les dossiers, et surtout cette petite technique de l'index.ts qui est extrêmement importante parce qu'elle va faciliter grandement la tâche ensuite des moteurs de compilation. Il en existe beaucoup, on va en parler un petit peu des outils de compilation, et ça va permettre d'améliorer les choses. Donc, essayez au maximum de développer comme ça.

Mettre une application en production avec Angular 2

Optimisez la mise en production de votre application AngularJS. Réduisez le temps de chargement et d’affichage, gérez les tâches répétitives avec des scripts, etc.

1h05 (20 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Spécial abonnés
Date de parution :13 déc. 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 !