Créez votre première application Angular : Stockage et accès aux données

() translation by (you can also view the original English article)

Dans le premier tutoriel de la série, nous avons appris comment démarrer afin de créer une application Angular. Après avoir réussi ce tutorial, vous devriez maintenant avoir votre première application Angular qui fonctionne avec la rubrique « Fun Facts About Countries ». Avant de créer des composants qui peuvent être restitués à l’écran, nous créerons des classes et définir certaines fonctions qui font de ces composants utiles.

Dans ce tutoriel, notre focus sera mis sur la création d’une classe Country qui contiendra les différentes propriétés à afficher à l’utilisateur. Nous allons ensuite créer un autre fichier nommé country-data.ts. Ce fichier contiendra des informations sur tous les pays de notre application. Notre troisième fichier s’appellera country.service.ts. Le nom peut sembler fantaisie, mais le fichier contiendra juste une classe CountryService avec toutes les fonctionnalités nécessaires pour récupérer et trier les informations fournies par les country-data.ts de fichier.

Création de la classe Country

Dans le dossier src/app de votre application Angular, créez un fichier nommé country.ts. Ajoutez le code suivant à l’intérieur.

export class Country {
    name: string;
    capital: string;
    area: number;
    population: number;
    currency: string;
    gdp: number;
}

Le code TypeScript ci-dessus définit la classe Country avec six propriétés différentes pour stocker des informations sur les différents pays. Le nom du pays, sa capitale et sa devise sont stockés sous forme de chaîne. Toutefois, sa superficie, population et PIB sont stockés sous forme de nombre. Nous importeront la classe Country dans beaucoup d’endroits, j’ai ajouté le mot-clé export avant la définition de classe.

Création d’un tableau de pays

La prochaine étape comprend la création d’un fichier de country-data.ts pour stocker les informations sur tous les pays comme un tableau d’objets Country. Nous allons importer la classe Country dans ce fichier et puis exporter un const nommé COUNTRIES qui stocke un tableau d’objets country.

Voici le code de country-data.ts. À l’instar de country.ts, vous devez créer ce fichier dans le dossier src/app.

import { Country } from './country';

export const COUNTRIES: Country[] = [
  {
    name: 'Russia',
    capital: 'Moscow',
    area: 17098246,
    population: 144463451,
    currency: 'Russian Ruble',
    gdp: 1283162
  },
  {
    name: 'Canada',
    capital: 'Ottawa',
    area: 9984670,
    population: 35151728,
    currency: 'Canadian Dollar',
    gdp: 159760
  },
  {
    name: 'China',
    capital: 'Beijing',
    area: 9596961,
    population: 1403500365,
    currency: 'Renminbi (Yuan)',
    gdp: 11199145
  },
  {
    name: 'United States',
    capital: 'Washington, D.C.',
    area: 9525067,
    population: 325365189,
    currency: 'United States Dollar',
    gdp: 18569100
  },
  {
    name: 'Japan',
    capital: 'Tokyo',
    area: 377972,
    population: 12676200,
    currency: 'Yen',
    gdp: 4939384
  }
];

La première ligne dans ce fichier importe la classe Country depuis le fichier country.ts situé dans le même répertoire. Si vous supprimez cette ligne du fichier, texte dactylographié vous donnera l’erreur suivante :

1	Cannot find name 'Country'.

Sans l’instruction import, TypeScript n’a aucune idée ce qu’un tableau de type Country signifie: Alors assurez-vous que vous avez importé la bonne classe et correctement indiqué l’emplacement de country.ts.

Après avoir importé la classe Country, nous aller de l’avant et créer un tableau d’objets Country. Nous importeront ce tableau du pays pour une utilisation dans d’autres fichiers, donc nous ajouter un mot-clé export à ce tableau ainsi. Actuellement, il y a cinq objets Country différents dans le tableau. Chacun de ces cinq objets fournit des paires clé-valeur qui listent le nom d’une propriété et sa valeur pour un objet particulier ou un pays.

Si vous tentez d’ajouter une propriété supplémentaire dans le tableau qui n’a pas été déclaré à l’intérieur de la définition de classe Country, vous obtiendrez l’erreur suivante :

1	Object literal may only specify known properties, and 'president' does not exist in type 'Country'

Dans ce cas, j’ai essayé de stocker le nom du Président sous forme de string à l’intérieur d’une propriété nommée president. Puisque aucun de ces biens a été déclarée, nous avons eu une erreur. Parfois, vous pouvez spécifier une propriété uniquement pour les objets particuliers et pas pour d’autres. Dans ce cas, vous pouvez marquer la propriété facultative à l’intérieur de la définition de classe. J’ai discuté plus en détail dans un tutoriel qui couvre les Interfaces TypeScript.

Pour l’instant, assurez-vous que les noms de toutes les propriétés correspondent aux noms à l’intérieur de la définition de classe. Assurez-vous également que la valeur de chaque propriété a le même type qui est déclarée dans la définition de classe.

Création de la classe CountryService

Après avoir créé notre classe Country et le tableau COUNTRIES, nous pouvons maintenant enfin écrire certaines fonctions pour traiter les données de pays. Nous aurons besoin d’importer la classe Country et le tableau COUNTRIES à l’intérieur de notre fichier de service. Le fichier devra importer le tableau COUNTRIES afin d’avoir accès aux données. De même, le fichier devra importer la classe Country afin de donner un sens aux données dans le tableau COUNTRIES.

Nous importeront aussi autres dépendances comme la forme Injectable du core Angular pour rendre notre classe CountryService disponibles pour l’injecteur et pour l'injecter dans les autres composants.

Une fois que votre application grandit en taille, différents modules devront communiquer entre eux. Disons que ModuleA requiert ModuleB pour fonctionner correctement. Dans ce cas, nous appellerions ModuleB une dépendance de ModuleA.

Tout simplement importer le module, que nous avons besoin dans un autre fichier fonctionne la plupart du temps. Cependant, parfois nous devons décider si nous devons créer une seule instance des classes de ModuleB qui sera utilisé par l’application entière ou si nous devons créer une nouvelle instance chaque fois que le module est utilisé. Dans notre cas, nous va injecter une seule instance de notre classe de CountryService tout au long de l’application.

Voici le code pour country.service.ts :

import { Injectable } from '@angular/core';

import { Country } from './country';
import { COUNTRIES } from './country-data';

@Injectable()
export class CountryService {

  constructor() { }

  getCountries(): Country[] {
    return COUNTRIES;
  }

  getPopulatedCountries(): Country[] {
    return COUNTRIES.sort((a, b) => b.population - a.population).slice(0, 3);
  }

  getLargestCountries(): Country[] {
    return COUNTRIES.sort((a, b) => b.area - a.area).slice(0, 3);
  }

  getGDPCountries(): Country[] {
    return COUNTRIES.sort((a, b) => b.gdp - a.gdp).slice(0, 3);
  }

  getCountry(name: string): Country {
    return COUNTRIES.find(country => country.name === name);
  }
}

Un décorateur @injectable est utilisé pour identifier une classe de service pouvant nécessiter une injection de dépendances. Cependant, ajoutant que @injectable pour les classes de service est un style de codage requis, alors nous faire quand même.

Après cela, nous écrire différentes méthodes de la classe qui tiennent le tableau COUNTRIES, puis envoyez-le directement ou le tri à l’aide de certains critères et puis retourner une partie du tableau.

La méthode getCountries() est censée reprendre tous les objets Country, et alors elle retourne l’ensemble COUNTRIES sans apporter des modifications à elle.

Le getPopulatedCountries() prend le tableau COUNTRIES et il trie dans l’ordre décroissant selon la population des différents pays. Puis, nous utilisons la méthode Array.slice() pour retourner les trois premiers pays (avec les indices 0, 1 et 2) du tableau. Les méthodes getLargestCountries() et getGDPCountries() fonctionnent de manière similaire.

La méthode getCountry() prend un nom comme argument et retourne l’objet de pays dont la propriété name a la même valeur que l’argument de nom fourni.

Inclure CountryService dans app.module.ts

Un service que vous créez est simplement une classe Angular jusqu'à ce que vous l'ayez enregistré avec un injecteur de dépendance Angular. Un injecteur angulaire sera celui responsable de la création d’instances de service et injecter dans différentes classes qui ont besoin que de services. Nous avons besoin inscrire un service auprès d’un fournisseur avant l’injecteur peut créer ce service.

Il existe deux manières courantes d’enregistrer n’importe quel service : à l’aide d’un fournisseur @Component ou le fournisseur @NgModule. L’utilisation du fournisseur @Component logique lorsque vous souhaitez restreindre l’accès d’un service à un composant particulier et tous ses composants imbriqués. L’utilisation du provider @NgModule a du sens lorsque vous souhaitez que plusieurs composants ont accès au service.

Dans notre cas, nous allons utiliser CountryService avec plusieurs composants de notre application. Cela signifie que nous devrions enregistrer avec le provider @NgModule une fois, au lieu d’enregistrer séparément avec le provider @Component de chaque composant.

Actuellement, votre fichier app.module.ts devrait ressembler à ceci :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Ajoutez une instruction import au fichier app.module.ts et ajouter le service au tableau des fournisseurs @NgModule. Après avoir effectué ces modifications, votre fichier app.module.ts devrait ressembler à ceci :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CountryService } from './country.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [CountryService],
  bootstrap: [AppComponent]
})
export class AppModule { }

La classe CountryService sera maintenant disponible à tous les composants que nous créons pour notre application.

Dernières Réflexions

Créé avec succès trois fichiers nommés country.ts, country-data.ts et country.service.ts conclut le deuxième tutoriel de cette série.

Le fichier country.ts est utilisé pour créer une classe de Country avec des propriétés différentes comme nom, devise, population, superficie, etc.. Le fichier de country-data.ts est utilisé pour stocker un tableau d’objets de pays qui ont des informations sur les différents pays. Le fichier country.service.ts contient une classe de service avec les différentes méthodes d’accès aux données du tableau COUNTRIES. Écriture de toutes ces méthodes séparément à l’intérieur d’une classe de service nous permet d’y accéder à l’intérieur de l’app différentes composantes d’une situation centrale.

Dans la dernière section, nous avons enregistré notre service avec le fournisseur @NgModule pour le rendre disponible pour une utilisation à l’intérieur des différents composants.

Le didacticiel suivant vous montrera comment créer trois différents composants dans votre application pour afficher les détails du pays ainsi qu’une liste de pays.