Le deuxième tutoriel de cette série vous a appris à stocker des données dans l'application Angular et à y accéder à l'aide d'une classe de service. Dans ce tutoriel, nous allons créer le AccueilComposant pour notre application angulaire.

La page d'accueil ou le AccueilComposant que nous sommes en train de créer listera les trois premiers pays dans différentes catégories telles que la population et la superficie. Les données permettant de déterminer l’ordre de tri seront extraites du DES PAYS tableau que nous avons créé dans le tutoriel précédent.

Création de la classe HomeComponent

Pour créer le AccueilComposant, modifiez le répertoire de la console dans votre dossier d'application et exécutez la commande suivante:

ng générer le composant home

Cela créera un dossier appelé home à l'intérieur du src / app dossier avec quatre fichiers à l'intérieur. Pour cette application, nous devons seulement nous préoccuper de trois fichiers nommés home.component.ts, home.component.css, et home.component.html. le home.component.ts le fichier contiendra toute la logique du composant, et les fichiers CSS et HTML contrôleront l'apparence et la structure du composant.

Commençons par éditer le home.component.ts fichier. le AccueilComposant est censé montrer les trois pays les plus peuplés, les trois plus grands et les trois pays ayant le PIB le plus élevé enregistré DES PAYS tableau. 

Nous allons importer les deux Pays la classe et la CountryService classe que nous avons créée dans le dernier tutoriel. Nous allons aussi importer Composant et OnInit de @ angulaire / noyau. le OnInit la dépendance fournit un hook de cycle de vie appelé juste après l'initialisation des propriétés d'une directive liées aux données.

Après avoir importé toutes les dépendances nécessaires, nous définirons notre décorateur de composants. Le décorateur de composants est utilisé pour fournir les informations de métadonnées nécessaires relatives à notre composant. Nous allons définir une valeur pour le sélecteur, templateUrl, et styleUrls à l'intérieur du décorateur. 

Le sélecteur est utilisé pour spécifier la balise qui sera utilisée pour identifier notre composant. le templateUrl est utilisé pour fournir l'URL du modèle à restituer lorsque Angular rencontre le sélecteur fourni. le styleUrls Cette propriété est utilisée pour spécifier différentes feuilles de style à appliquer au modèle donné. Voici le code à l'intérieur home.component.ts jusqu'à ce point:

importer Component, OnInit à partir de '@ angular / core'; importer Pays de '… / pays'; importer CountryService de '… /country.service'; @Component (sélecteur: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'])

Maintenant, nous allons commencer à définir le AccueilComposant classe avec différentes propriétés et méthodes pour nous aider à montrer les données du pays aux utilisateurs. le AccueilComposant La classe aura trois propriétés différentes, qui accepteront un tableau de pays comme valeur. Nous pouvons injecter une dépendance dans le constructeur du composant en spécifiant un paramètre de constructeur avec le type de dépendance. Voilà comment nous allons injecter le CountryService classe à l'intérieur de notre AccueilComposant. 

Voici le reste du code pour le home.component.ts fichier:

La classe d'exportation HomeComponent implémente OnInit populatedCountries: Country [] = []; Les plus grands pays: Pays [] = []; gdpCountries: Country [] = []; constructeur (private countryService: CountryService)  ngOnInit () this.setPopulatedCountries (); this.setLargestCountries (); this.setGDPCountries ();  setPopulatedCountries (): void this.populatedCountries = this.countryService.getPopulatedCountries ();  setLargestCountries (): void this.largestCountries = this.countryService.getLargestCountries ();  setGDPCountries (): void this.gdpCountries = this.countryService.getGDPCountries (); 

Nous avons créé trois méthodes qui utilisent le CountryService classe pour obtenir les pays ayant la plus grande superficie, la plus forte population et le PIB le plus élevé. Les tableaux retournés par différents CountryService les méthodes sont ensuite affectées aux propriétés correspondantes du AccueilComposant classe.

Notez que toutes ces méthodes qui définissent la valeur de Pays peuplés, les plus grands pays, et gdpPays sont appelés à l'intérieur du ngOnInit () méthode afin que leurs valeurs puissent être utilisées dès la création du composant.

Création du modèle HomeComponent

Après avoir écrit le code pour le AccueilComposant classe, il est temps de créer le modèle HTML pour le composant. Depuis le code à l'intérieur home.component.html est principalement HTML, je ne ferai qu'expliquer les parties spécifiques à Angular. Voici le code pour le fichier entier:

 
Trois pays les plus peuplés
 
  
 
nom du pays
 
pays.population | nombre
 
Personnes
 
  
 
 
Trois plus grands pays (région)
 
  
 
nom du pays
 
country.area | nombre km 2 
 
  
 
 
Pays avec le PIB le plus élevé
 
  
 
nom du pays
 
pays.gdp | numéro USD
 
  
 
 

Comme je l'ai expliqué plus tôt, le Pays peuplés, les plus grands pays, et gdpPays ont été assignés un tableau de Pays objets comme leur valeur. Nous utilisons le NgFor directive de parcourir en boucle tous les pays d'un tableau et d'afficher leurs noms et propriétés respectives. Par exemple, * ngFor = "laissez le pays des pays peuplés" des boucles sur tous les objets de pays à l'intérieur du Pays peuplés tableau et attribue cette valeur à la variable locale pays. Cette directive rend également la une balise, ainsi que toutes les autres balises à l'intérieur pour chaque objet de pays à l'intérieur du Pays peuplés tableau. La même explication vaut pour tous les blocs de pays rendus en itérant sur les plus grands pays et gdpPays.

Nous utilisons des pipes angulaires pour formater correctement les valeurs de population, de superficie et de PIB de différents pays afin de les rendre plus lisibles. Une chose que vous pourriez trouver déroutant est le routerLink directive que j'ai utilisée avec tous les une Mots clés. Nous en discuterons plus en détail dans le dernier tutoriel de la série lorsque nous écrirons du code à parcourir entre différents composants ou sections de l'application. La valeur de la routerLink directive agit comme un lien régulier que nous rencontrons sur les sites Web que nous visitons. La différence importante est qu'au lieu de charger des pages, nous allons charger des composants.

Création du fichier CSS pour HomeComponent

Enfin, vous pouvez écrire du code CSS pour rendre le modèle HTML plus présentable. Voici le CSS que j'ai utilisé pour le AccueilComposant. Gardez à l’esprit que ce CSS doit aller à l’intérieur du home.component.css fichier.

body font-family: 'Lato';  h2, h3, h4, p font-family: 'Lato'; marge: 10px;  .country-block p marge-top: 0; marge inférieure: 0;  .country-block h4 margin-bottom: 10px;  h4 position: relative; taille de la police: 1.25rem;  .container margin: 0 50px; text-align: center;  .country-unit width: 200px; affichage: inline-block; marge: 10px;  br clear: les deux;  .country-block padding: 30px 0; text-align: center; Couleur blanche; hauteur: 150px; couleur de fond: # 795548; border-radius: 2px;  .country-block: survoler background-color: # 9C27B0; curseur: pointeur; Couleur blanche;  

Il est important que le CSS à l'intérieur home.component.css est uniquement appliqué aux éléments à l'intérieur du home.component.html fichier.

Vous voudrez peut-être rendre AccueilComposant à l'intérieur du shell de l'application en modifiant le contenu de la app.component.html fichier à la suivante:

Titre
 

Malheureusement, vous obtiendrez l'erreur suivante en essayant de le faire:

Impossible de se lier à 'routerLink' car ce n'est pas une propriété connue de 'a'.

Nous parlerons plus de la routerLink directive et comment se débarrasser de cette erreur dans le cinquième tutoriel de cette série. En ce moment, vous pouvez supprimer toutes les mentions de routerLink du home.component.html fichier pour exécuter votre application angulaire sans erreur. Assurez-vous simplement de tout rajouter dans le fichier..

Dernières pensées

Si vous n'avez jamais créé d'application angulaire auparavant, il vous faudra un certain temps pour vous familiariser avec les composants. Pour faciliter la compréhension, vous pouvez envisager des composants similaires à différents iframes chargés dans une page Web. le .ts les fichiers contiennent la logique du composant, tout comme .js les fichiers contiennent la logique pour les iframes. 

le .html Les fichiers contiennent les éléments que vous souhaitez rendre dans une iframe ou à l'intérieur d'un composant. .css les fichiers contiennent des règles de style différentes pour ces éléments. J'avoue que la comparaison n'est pas très précise, mais qu'elle devrait aider les débutants à comprendre les composants et la relation entre les différents fichiers d'un composant..

Dans le prochain tutoriel, nous allons créer deux composants supplémentaires qui vous aideront à comprendre les composants plus clairement. Si vous avez des questions sur le code lié à AccueilComposant, s'il vous plaît laissez-moi savoir dans les commentaires.