Création de l'application

Vous commencez par créer une application initiale à l'aide de la CLI angulaire. Tout au long de ce didacticiel, vous allez modifier et étendre cette application de démarrage pour créer l'application Tour of Heroes.

Dans cette partie du didacticiel, vous allez effectuer les opérations suivantes :

• Configurez votre environnement.
• Créez un nouvel espace de travail et un projet d'application initial.
• Servez l'application.
• Apporter des modifications à l'application.

Créer un nouvel espace de travail et un initial d'application

Vous développez des applications dans le contexte d'un espace de travail angulaire. Un espace de travail contient les fichiers d'un ou plusieurs projets. Un projet est un ensemble de fichiers comprenant une application, une bibliothèque ou des tests de bout en bout (e2e). Pour ce tutoriel, vous allez créer un nouvel espace de travail.

Pour créer un nouvel espace de travail et un projet d'application initial:

• Assurez-vous que vous n'êtes pas déjà dans un dossier d'espace de travail angulaire. Par exemple, si vous avez déjà créé l'espace de travail Mise en route, passez au parent de ce dossier.
• Exécutez la commande CLI ng newet indiquez le nom angular-tour-of-heroes, comme indiqué ici:

• La ng newcommande vous demande des informations sur les fonctionnalités à inclure dans le projet d'application initial. Acceptez les valeurs par défaut en appuyant sur la touche Entrée ou Retour.

La CLI angulaire installe les npmpackages angulaires nécessaires et d'autres dépendances. Cela peut prendre quelques minutes.

Il crée également les fichiers de projet d'espace de travail et de démarrage suivants:

• Un nouvel espace de travail, avec un dossier racine nommé angular-tour-of-heroes.
• Un projet d'application squelette initial, également appelé angular-tour-of-heroes(dans le srcsous - dossier).
• Un projet de test de bout en bout (dans le sous-dossier e2e).
• Fichiers de configuration associés.

Le projet d'application initial contient une application de bienvenue simple, prête à fonctionner.

Lancer l'application

Accédez au répertoire de l'espace de travail et lancez l'application.

La commande ng serve crée l'application, démarre le serveur de développement, surveille les fichiers source et reconstruit l'application au fur et à mesure que vous modifiez ces fichiers.

Le --open ouvre un navigateur à http://localhost:4200/

Vous devriez voir l'application en cours d'exécution dans votre navigateur.

Apporter des modifications à l'application

Ouvrez le projet dans votre éditeur ou IDE favori et accédez au src/appdossier pour apporter des modifications à l'application de démarrage.

Vous trouverez l'implémentation du shell AppComponentrépartie sur trois fichiers :

• app.component.ts- le code de classe du composant, écrit en TypeScript.
• app.component.html- le modèle de composant, écrit en HTML.
• app.component.css- les styles CSS privés du composant.

Changer le titre de l'application

Ouvrez le fichier de classe de composant (app.component.ts) et modifiez la valeur de la variable title en 'Tour of Heroes'.

app.component.ts (propriété de titre de classe)
Ouvrez le fichier de modèle de composant ( app.component.html) et supprimez le modèle par défaut généré par la CLI angulaire. Remplacez-le par la ligne HTML suivante.

Les doubles accolades représentent la syntaxe de liaison d'interpolation d'Angular. Cette liaison d'interpolation présente la "title valeur" de la propriété du composant dans la balise d'en-tête HTML.

Le navigateur s'actualise et affiche le nouveau titre de l'application.

Ajouter un styles d'application

La plupart des applications s'efforcent d'obtenir une apparence cohérente dans l'ensemble de l'application. La CLI a généré un styles.css vide à cette fin. Voici un extrait de l'exemple d'application styles.css du Tour of Heroes .

src/styles.css (extrait)

Révision finale du code

Voici les fichiers de code discutés sur cette page.

• app.component.ts
• app.component.html
• styles.css (extrait)

Résumé

• Vous avez créé la structure d'application initiale à l'aide de la CLI angulaire.
• Vous avez appris que les composants angulaires affichent des données.
• Vous avez utilisé les doubles accolades d'interpolation pour afficher le titre de l'application.