Angular - 1.5 Editer premiere application part 1

Lors de la dernière vidéo, nous avons créé notre première application Angular, mais nous n'y avons rien changé. Il est donc temps de le faire.

Pour cela, vous avez besoin d'un IDE ou d'un éditeur où vous pouvez écrire et éditer votre code. J'utilise ici Vscode qui est un excellent IDE, idéal pour le développement Angular et gratuit que pouvez trouver sur https://code.visualstudio.com/. Vous pouvez simplement télécharger et installer à la fois pour Mac et Windows, puis commencer à développer Angular avec cela. Quel que soit l'éditeur ou l'éditeur que vous installez, vous devrez toujours ouvrir un nouveau dossier, donc fichier ouvrir le dossier puis naviguer simplement vers le dossier que vous avez créé. Donc, dans mon cas ici, c'est ma première app. Sélectionnez ce dossier et ouvrez-le et maintenant il chargera ce dossier et tous les fichiers dans l'ID de votre système. Donc dans mon cas, ça ressemble maintenant à ça.

Voici donc le projet chargé dans l'ID. Il est toujours indexé ici, mais ce sera fait dans une seconde. Ce sont tous les dossiers et fichiers de la CLI angulaire créée pour vous. Ceci est votre projet entier angulaire. Comme je l'ai dit, cela peut sembler compliqué parce que vous avez beaucoup de fichiers là-dedans. La plupart de ces fichiers ne font que quelques travaux de configuration et vous n'avez pas vraiment besoin de les toucher. Un fichier intéressant est le fichier package.json. Alors ici, vous pouvez voir toutes les dépendances de votre projet comme Angular 6 et il s'agit de packages, tiers dont votre projet a besoin pour fonctionner correctement. Toutes les devDependencies sont uniquement nécessaires pour le développement, pour ce workflow de construction dont je parlais. Mais nous sommes ici pour modifier notre code ? Alors sautons dans le dossier src car c'est là que se trouve notre code. e2e est pour les tests de bout en bout (nous l'ignorerons) et node_modules est l'endroit où toutes ces dépendances que vous voyez dans le fichier package.json ont été installées. Mais nous sommes intéressés par le code source alors allons à src.

Ensuite, nous avons eu plusieurs autres fichiers de configuration, puis ici, nous avons ce dossier app et dans ce dossier app, nous voyons d'autres fichiers. Bien sûr, j'examinerai en détail leur rôle dans ce cours. Pour l'instant ouvrons le fichier app.component.html. Ici, nous voyons effectivement quelque chose qui ressemble de manière trompeuse à ce que nous avons vu dans le navigateur. Bienvenue sur l'application! etc. Nous voyons cela ici aussi. En passant, assurez-vous de garder le processus localhost:4200 en cours d'exécution (le processus ng serve que vous avez démarré ici dans le terminal). Assurez-vous de continuer à le faire, mais si vous avez terminé avec le développement de la journée, vous pouvez le quitter avec Ctrl-C et vous en sortirez, mais tant que vous développez, vous devriez le maintenir, car regarder automatiquement vos fichiers et reconstruire votre projet chaque fois que vous modifiez et enregistrez quelque chose.