Share
Dans le premier tutoriel de la série, nous avons appris à démarrer pour créer une application angulaire. Une fois ce didacticiel terminé avec succès, vous devriez maintenant disposer de votre première application angulaire opérationnelle intitulée "Faits intéressants sur les pays". Avant de créer des composants pouvant être affichés à l'écran, nous allons créer des classes et définir des fonctions qui rendent ces composants utiles..
Dans ce tutoriel, notre objectif sera de créer un Pays classe qui contiendra différentes propriétés dont nous voulons afficher la valeur à 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 sera nommé pays.service.ts. Le nom peut sembler sophistiqué, mais le fichier ne contiendra qu'un CountryService classe avec toutes les fonctionnalités nécessaires pour récupérer et trier les informations fournies par le fichier country-data.ts.
À l'intérieur de src / app dossier de votre application Angular, créez un fichier nommé pays.ts. Ajoutez le code suivant à l'intérieur.
classe d'exportation Pays nom: chaîne; capital: string; zone: nombre; population: nombre; monnaie: chaîne; pib: numéro;
Le code TypeScript ci-dessus définit le Pays classe avec six propriétés différentes pour stocker des informations sur différents pays. Le nom du pays, sa capitale et sa monnaie sont stockés sous forme de chaîne. Cependant, sa superficie, sa population et son PIB sont stockés sous forme de nombre. Nous allons importer le Pays classe dans beaucoup d’endroits, j’ai donc ajouté le exportation mot-clé avant la définition de la classe.
La prochaine étape comprend la création d’un country-data.ts fichier pour stocker les informations sur tous les pays comme un tableau de Pays objets. Nous allons importer le Pays classe dans ce fichier, puis l'exportation d'un const nommé DES PAYS qui stocke un tableau d'objets de pays.
Voici le code pour country-data.ts. Juste comme pays.ts, vous devez créer ce fichier à l'intérieur du src / app dossier.
importer Pays de './pays'; export const PAYS: Pays [] = [nom: 'Russie', capitale: 'Moscou', superficie: 17098246, population: 144463451, devise: 'Rouble russe', pg: 1283162, nom: 'Canada', capitale : 'Ottawa', superficie: 9984670, population: 35151728, monnaie: 'Dollar canadien', PIB: 159760, nom: 'Chine', capitale: 'Beijing', superficie: 9596961, population: 1403500365, monnaie: 'Renminbi (Yuan) ', pds: 11199145, nom:' États-Unis ', capitale:' Washington, DC ', superficie: 9525067, population: 325365189, monnaie:' dollar américain ', pdp: 18569100, nom: "Japon", capitale: "Tokyo", superficie: 377972, population: 12676200, monnaie: "Yen", pib: 4939384];
La première ligne de ce fichier importe le Pays classe de la pays.ts fichier situé dans le même répertoire. Si vous supprimez cette ligne du fichier, TypeScript vous affichera l'erreur suivante:
Impossible de trouver le nom 'Pays'.
Sans l'instruction import, TypeScript n'aura aucune idée de ce qu'un tableau de type Pays veux dire. Assurez-vous donc que vous avez importé la bonne classe et spécifié l’emplacement de pays.ts correctement.
Après avoir importé le Pays classe, nous allons de l'avant et créons un tableau de Pays objets. Nous allons importer ce tableau de pays pour les utiliser dans d’autres fichiers. Nous ajoutons donc un exportation mot clé à ce tableau aussi. Actuellement, il y a cinq différents Pays objets dans le tableau. Chacun de ces cinq objets fournit des paires clé-valeur qui répertorient le nom d'une propriété et sa valeur pour un objet ou un pays particulier..
Si vous essayez d’ajouter une propriété supplémentaire au tableau qui n’a pas été déclarée à l’intérieur du Pays définition de classe, vous obtiendrez l'erreur suivante:
Le littéral d'objet peut uniquement spécifier des propriétés connues, et le mot "président" n'existe pas dans le type "Pays"
Dans ce cas, j'essayais de stocker le nom du président en tant que chaîne à l'intérieur d'une propriété nommée Président. Comme aucune propriété de ce type n'a été déclarée, nous avons eu une erreur. Parfois, vous voudrez peut-être spécifier une propriété uniquement pour des objets particuliers et pas pour d’autres. Dans ce cas, vous pouvez marquer la propriété comme étant facultative dans la définition de la classe. Je l'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 à ceux de la définition de classe. Assurez-vous également que la valeur de chaque propriété a le même type que celui déclaré dans la définition de classe..
Après avoir créé notre Pays classe et DES PAYS tableau, nous pouvons enfin écrire certaines fonctions pour traiter les données du pays. Nous devrons importer les deux Pays la classe et la DES PAYS tableau à l'intérieur de notre fichier de service. Le fichier devra importer le DES PAYS tableau afin d'avoir accès aux données. De même, le fichier devra importer le Pays classe afin de donner un sens aux données à l'intérieur du DES PAYS tableau.
Nous allons également importer d'autres dépendances comme Injectable du noyau angulaire pour rendre notre CountryService classe disponible pour l'injecteur à injecter dans d'autres composants.
Une fois la taille de votre application augmentée, différents modules devront communiquer entre eux. Disons que ModuleA a besoin ModuleB afin de fonctionner correctement. Dans de tels cas, nous appellerions ModuleB une dépendance de ModuleA.
Importer simplement le module dont nous avons besoin dans un autre fichier fonctionne la plupart du temps. Cependant, nous devons parfois décider de créer une seule instance de classes à partir de ModuleB Cela sera utilisé par toute l'application ou si nous devrions créer une nouvelle instance chaque fois que le module est utilisé. Dans notre cas, nous allons injecter un seul cas de notre CountryService classe à travers l'application.
Voici le code pour pays.service.ts:
import Injectable from '@ angular / core'; importer Pays de './pays'; importer COUNTRIES de './country-data'; @Injectable () classe d'exportation 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 @injectable decorator est utilisé pour identifier une classe de service pouvant nécessiter des dépendances injectées. Cependant, en ajoutant le @injectable to service classes est un style de codage obligatoire, nous le faisons quand même.
Après cela, nous écrivons différentes méthodes pour la classe qui prennent la DES PAYS tableau et soit le retourner directement ou le trier en fonction de certains critères, puis renvoyer une partie du tableau.
le getCountries () méthode devrait renvoyer tous les Pays objets, et donc il renvoie l'ensemble DES PAYS tableau sans y apporter de modifications.
le getPopulatedCountries () prend le DES PAYS tableau et le trie par ordre décroissant en fonction de la population de différents pays. Nous utilisons ensuite la méthode Array.slice () afin de renvoyer les trois premiers pays (avec les indices 0, 1 et 2) du tableau. le getLargestCountries () et getGDPCountries () les méthodes fonctionnent de la même manière.
le getCountry () La méthode prend un nom comme argument et retourne l'objet country dont la propriété name a la même valeur que l'argument name fourni..
Un service que vous créez n'est qu'un cours dans Angular jusqu'à ce que vous l'ayez enregistré avec un injecteur de dépendance angulaire. Un injecteur angulaire sera chargé de créer les instances de service et de les injecter dans différentes classes ayant besoin de ce service. Nous devons enregistrer un service auprès d'un fournisseur avant que l'injecteur puisse créer ce service..
Il existe deux façons courantes d’enregistrer un service: utiliser un @Composant fournisseur ou en utilisant le @NgModule fournisseur. En utilisant le @Composant Le fournisseur est utile lorsque vous souhaitez limiter l'accès d'un service à un composant particulier et à tous ses composants imbriqués. En utilisant le @NgModule le fournisseur a du sens lorsque vous voulez que plusieurs composants aient accès au service.
Dans notre cas, nous utiliserons CountryService avec plusieurs composants de notre application. Cela signifie que nous devrions l'enregistrer auprès du @NgModule fournisseur une fois au lieu de l’enregistrer séparément avec le @Composant fournisseur de chaque composant.
Actuellement, votre app.module.ts Le fichier devrait ressembler à ceci:
importer BrowserModule de '@ angular / platform-browser'; importer NgModule de '@ angular / core'; importer AppComponent depuis './app.component'; @NgModule (declarations: [AppComponent], importations: [BrowserModule], fournisseurs: [], bootstrap: [AppComponent]) classe d'exportation AppModule
Ajouter une déclaration d'importation à la app.module.ts déposer et ajouter le service au @NgModule tableau de fournisseurs. Après avoir apporté ces modifications, votre app.module.ts Le fichier devrait ressembler à ceci:
importer BrowserModule de '@ angular / platform-browser'; importer NgModule de '@ angular / core'; importer AppComponent depuis './app.component'; importer CountryService de './country.service'; @NgModule (declarations: [AppComponent], importations: [BrowserModule], fournisseurs: [CountryService], bootstrap: [AppComponent]) classe d'exportation AppModule
le CountryService la classe sera maintenant disponible pour tous les composants que nous créons pour notre application.
Création réussie de trois fichiers nommés pays.ts, country-data.ts, et pays.service.ts conclut le deuxième tutoriel de cette série.
le pays.ts fichier est utilisé pour créer un Pays classe avec différentes propriétés comme le nom, la monnaie, la population, la région, etc. country-data.ts Le fichier est utilisé pour stocker un tableau d'objets pays qui ont des informations sur différents pays. le pays.service.ts fichier contient une classe de service avec différentes méthodes pour accéder aux données de pays à partir du DES PAYS tableau. L'écriture de toutes ces méthodes séparément dans une classe de service nous permet d'y accéder à partir de différents composants d'application à partir d'un emplacement central..
Dans la dernière section, nous avons enregistré notre service auprès du @NgModule fournisseur pour le rendre disponible pour une utilisation dans différents composants.
Le prochain tutoriel vous montrera comment créer trois composants différents dans votre application pour afficher les détails du pays et une liste de pays..
Accentsconagua