Septembre 2017
Volume 32, numéro 9
Cet article a fait l'objet d'une traduction automatique.
Le programmeur au travail - Comment être MEAN : service Angular
Par Ted Neward | Septembre 2017
.jpg "Ted Neward")
Bienvenue à nouveau, MEANers.
Un des besoins courants d’une application angulaire consiste à obtenir ou de mettre à jour des données à partir d’emplacements pas dans le navigateur, ce qui est habituellement partout. En règle générale, une application angulaire devez échanger des données (et généralement sous la forme de paquets JSON) avec une implémentation de l’API basée sur HTTP quelque part sur Internet.
Malheureusement, cela ne vraiment « ajustement » avec la notion d’un composant. Plusieurs composants souvent doit communiquer avec le même serveur via la même implémentation de l’API, et pour que le code de chaque composant de dupliquer serait très complexe. Certainement, comme vous l’avez vu avec le composant Upvote (msdn.com/magazine/mt784667), il est possible de créer une classe de TypeScript autonome et simplement mettre qui utilisent, essentiellement mettre le concept de « module bibliothèque » dans Angulaire. Mais comme si souvent se produit, l’équipe angulaire anticipé ce besoin et a donné en nous... services.
Un service, en termes d’angulaire, est un module injectable : « module », car vous allez créer un module TypeScript qui encapsule du service mise en œuvre et « INJECTABLES », car grâce à l’utilisation de certains éléments décoratifs, vous allez que le service connu à angulaire, afin que les composants que vous souhaitent l’utiliser suffit de déclarer en tant que paramètre (semblable à la façon dont les éléments décoratifs @Input/@Output travaillé précédemment) et lo, ils recevront un.
(Notez : Un service angulaire n’est pas implicitement dans une relation 1 à 1 avec un « service API » ou « microservice » ou l’une des autres utilisations surchargées du terme. Si le terme est toujours à confusion, n’oubliez pas qu’un service angulaire est simplement un module TypeScript dont les utilisateurs sont toujours des autres composants angulaires : l’homme jamais interagisse avec un service angulaire directement.)
Nous allons ont un coup de œil.
SpeakerService
Le début de chaque service commence généralement par demandant le CLI angulaire pour créer la structure de base pour vous, nous allons donc commencer par qui : À partir d’une invite de commandes, tapez « ng générer le service haut-parleur ». Cette opération génère deux files—speaker.service.ts et speaker.service.spec.ts—and les sera la structure de base pour la classe SpeakerService (le « Service » est un suffixe supposé-souhaité pour le nom spécifié sur la ligne de commande) et le code de test, respectivement.
Toutefois, à compter de ce moment, vous n’avez pas un type haut-parleur à retourner à partir du service ! (En caractères de dessin animé reposant Homère Simpson serait que... « D'oh ! ») Là encore, cela est facilement résolu en demandant l’interface CLI pour créer un type de haut-parleur à utiliser : « ng générer la classe haut-parleur. » Cette fois-ci, l’interface CLI génère un seul fichier, speaker.ts, qui contient uniquement la haut-parleur de la classe. Il est important de noter : Recherche l’interface CLI pour appliquer les conventions angulaires en plaçant automatiquement le suffixe approprié sur les différents types en cours de génération. Il existe un paramètre de ligne de commande pour contrôler l’affectation des noms, mais franchement, passez simplement les valeurs par défaut ici, il effectue beaucoup de choses beaucoup plus facile au fil du temps.
Conférencier
Je vais pour conserver le type de l’orateur assez simple pour l’instant. Évidemment, cela pu obtenir aussi volumineux et aussi complexes que nécessaire, mais il ne vous apprend rien sur angulaire à le faire de cette façon. Les haut-parleurs ont des propriétés simples, et que vous allez prendre la perspective simple (par exemple naïve) constituant une évaluation de l’intervenant et non de la conversation. Ceci est une application de production, vous obligerait probablement une relation de « Entretiens d’avoir plusieurs haut-parleurs », puis « Upvotes d’avoir plusieurs entretiens » relation, mais qui n’affiche à nouveau, vraiment désactiver angulaire. Par conséquent, le haut-parleur ressemble à ceci :
import { Upvote } from './upvote';
export class Speaker {
id: number;
firstName: string;
lastName: string;
votes: Upvote;
}
Il est une classe simple, suffisante pour que je vais ignorer montrant les tests pour celle-ci. (Notez que si vous allez utiliser pour le fichier speaker.spec.ts, il n’existe pas, par défaut, l’interface CLI ne génère pas un fichier de test pour une classe simple comme suit. Si vous souhaitez un fichier de test : et vraiment, vraiment doit un, puis, vous devez passer » : true spec » sur la ligne de commande lorsque effectuant la ng générer la commande.)
SpeakerService
Maintenant que vous avez un type pour représenter des haut-parleurs, vous pouvez créer un service qui agira essentiellement comme référentiel (c'est-à-dire, suivant le concept de base du modèle de référentiel) pour les instances de haut-parleurs. Pour le moment, il se trouvera dans la mémoire et son implémentation (jusqu’ici, en lecture seule) doit être assez claire, comme vous pouvez le voir dans la Figure 1.
Figure 1 implémentant le SpeakerService
import { Injectable } from '@angular/core';
import { Speaker } from './speaker';
import { Upvote } from './upvote';
@Injectable()
export class SpeakerService {
constructor() { }
getSpeakers() : Array<Speaker> {
return SPEAKERS;
}
getSpeaker(id: number) : Speaker {
return SPEAKERS.find(speaker => speaker.id === id);
}
}
Le SpeakerService ressemble à pretty de toute autre TypeScript classe, à l’exception du decorator @Injectable dessus, voici ce qui va indiquer angulaire que le SpeakerService peut être injectée dans les composants que vous souhaitez l’utiliser de dépendance. Le reste de l’implémentation est assez simple. Droit à présent, tout fonctionne sur un tableau fixe d’instances haut-parleur gérée comme un « private global » dans le fichier speaker.service.ts, appelée « Haut-parleurs » indiqués dans la Figure 2.
Figure 2 du tableau de constante d’Instances de l’orateur
const SPEAKERS : Array<Speaker> = [
{
id: 0,
firstName: "Ted",
lastName: "Neward",
votes: new Upvote(30)
},
{
id: 1,
firstName: "Rachel",
lastName: "Appel",
votes: new Upvote(35)
},
{
id: 2,
firstName: "Nick",
lastName: "Landry",
votes: new Upvote(3)
},
];
En effet, ce tableau de trois éléments est votre base de données, au moins pour le moment. Lorsque vous parler de l’utilisation d’angulaire pour envoyer et recevoir des requêtes HTTP, ce tableau est rempli à partir de JSON à utiliser dans l’implémentation de l’API du serveur et toutes les modifications que vous apportez d’abord être dans le tableau retourné. Mais pour l’instant, tout en maintenant il comme un tableau fixe.
Notez que le composant Upvote est utilisé directement dans les instances de l’orateur : cela autorise le UpvoteComponent générer les instances Upvote autour d’et essentiellement conserver l’approche MVC même à un niveau de fractale à l’intérieur des modèles. Spiffy.
À l’aide de SpeakerService
L’interface utilisateur n’est actuellement assez parler de (jeu de mots), mais nous allons voir comment rendre quand même utiliser le service. Supposons que la page d’accueil souhaite simplement de saisir le haut-parleur de la première hors du SpeakerService (à l’aide de l’appel de getSpeaker avec un paramètre de « 0 ») et puis extraire le Upvote sortie pour une utilisation dans le UpvoteComponent sur cette page. Concrètement, que signifie que le fichier app.component devrez obtenir une référence à un SpeakerService, utilisez-la pour obtenir un intervenant, puis obtenir une référence à la Upvote hors de l’orateur et passez-le à la UpvoteComponent. La dernière partie est assez facile, vous modifiez simplement le modèle app.component.html pour faire référence à un champ AppComponent appelé intervenant, à partir duquel vous obtenez l’instance Upvote, comme suit :
<h1>
{{title}}
</h1>
<app-upvote votes="{{speaker.votes}}"><b>Current Upvotes:</b></app-upvote>
Jusque-là, tout va bien. Mais cela signifie que vous avez besoin d’un champ de l’orateur local à l’intérieur de la AppComponent de, où vous allez également utiliser le SpeakerService, comme indiqué dans la Figure 3.
Figure 3 à l’aide de la SpeakerService
import { Component } from '@angular/core';
import { Speaker } from './speaker';
import { SpeakerService } from './speaker.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'SpeakerApp';
speaker: Speaker;
constructor(private speakerSvc: SpeakerService)
{
this.speaker = this.speakerSvc.getSpeaker(0);
}
}
WOW, cette stuff angulaire est relativement simple. Enregistrer tous les éléments, effectuez un « serve ng » et... écran vide. Qu'est-ce que cela signifie ?
Fournissant SpeakerServices
Ouverture de la console Outils de développement dans votre navigateur donne une indication : En haut de la pile de trace angulaire n’indique « Aucun fournisseur pour SpeakerService ! » dans une voix forte au lieu de cela. Il s’agit comme un bit de type glue a besoin d’angulaire pour effectuer l’astuce @Injectable. Il doit savoir que le code dans ce fichier est en fait quelque chose qu’il a supposé savoir sur. Par défaut, angulaire ignore simplement que chaque fichier .ts dans le répertoire fait partie de l’application, vous devez configurer un « fournisseur » pour le SpeakerService. Cette opération est effectuée dans le AppModule (app.module.ts), et il ne nécessite pas un spécialiste fusée où. Il existe un droit de tableau vide « fournisseurs » dans décorateur NgModule du AppModule pourvoir simplement avoir SpeakerService proposée (ensuite l’importation appropriée pour référencer le fichier speaker.service.ts, bien sûr). La figure 4 a les marchandises.
Figure 4 configurer SpeakerService dans le tableau de fournisseurs
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { UpvoteComponent } from './upvote/upvote.component';
import { SpeakerService } from './speaker.service';
@NgModule({
declarations: [
AppComponent,
UpvoteComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [ SpeakerService ],
bootstrap: [AppComponent]
})
export class AppModule { }
Enregistrer, exécuter (ou attendez que le navigateur Actualiser si vous avez toujours « ng servir » est en cours d’exécution dans la fenêtre de ligne de commande) et observez le loveliness.
Liaisons de propriété
À l’exception... il n’est pas beau. Quel que soit le fait, si vous exécutez le code, vous êtes probablement notant qu’au lieu d’un nombre (30), la page affiche quelque chose comme Upvotes actuel : [object, objet]. C’est quoi le problème ?
Si vous regardez le modèle UpvoteComponent, vous remarquerez qu’il utilise la syntaxe {{}} pour obtenir une valeur pour le code HTML :
<app-upvote model="{{speaker.votes}}"><b>Current Upvotes:</b></app-upvote>
Votre pourrait faire pendant un certain temps, mais dans ce cas particulier, parce que vous êtes maintenant passer dans un objet réel (en-type de la constante numérique le plus haut), cette expression évalue à un objet, puis convertie en chaîne avant d’être passées dans comme entrée pour le UpvoteComponent. Auteur de la colonne incorrecte ! Aucune pizza !
Ce que le code doit avoir été fait tout le long utilise une déclaration de la liaison de propriété au lieu de la syntaxe d’interpolation de chaîne. Heureusement, il est facilement fixe :
<app-upvote [model]="speaker.votes"><b>Current Upvotes:</b></app-upvote>
Notez les crochets autour du nom de la propriété que vous souhaitez lier à et notez que la valeur de la liaison de propriété de propriétés de l’abonnement est une expression TypeScript à utiliser. L’expression est évaluée et le résultat lié à la propriété en question, dans ce cas, la propriété « modèle » de la UpvoteComponent. (Vous avez choisi de renommer la propriété « voix » à « modèle », car il s’agit d’une convention émergente, j’utilise mon code angulaire : Pour un composant donné, son modèle doit être stockée dans un propriété/champ appelé modèle, afin de garder une droite quel est l’état principal, par opposition à accidentels erties prop qui peut être utilisé pendant la durée de vie du composant.) Une fois que la liaison a lieu, au lieu d’interpolation de l’objet-la valeur par défaut ECMAScript [object Object], puis en passant que, la référence d’objet sera envoyée à UpvoteComponent, ce qui l’identifie comme une Upvote, et tout est à nouveau loveliness à nouveau.
Leçon !
Pour résumer
Choses commencent à se maintenant en place, les composants lentement prennent forme autour d’un concept MVC, et que les modèles sont extraits par les services. Vous devez toujours obtenir ces services pour obtenir des données réelles (par opposition à l’utilisation des substituts, la façon il est fait maintenant), vous avez besoin d’un type de l’affichage maître / détail omniprésent « détail » où vous commencez par une liste de haut-parleurs et sélectionnez une pour plus d’informations , ne pas pour indiquer la possibilité de modifier les détails de l’orateur et ajouter de nouveaux haut-parleurs à la liste. Mais, choses commencent à l’ensemble de blocage mieux maintenant.
Une fois le travail effectué ici, vous pouvez démarrer voir comment l’approche basée sur le composant fonctionne collectivement pour « développer » une application hors composants principalement autonomes. Le plus modulaire qui peut être mis en place, plus il sera facile pour tester ces composants et plus de test qui peuvent être effectuées, plus l’application résistant à des erreurs de la grammaire du pro stupides durant son développement globale.
Il est encore plus de travail à effectuer pour le moment...... bon codage !
Ted Neward est consultant de polytechnology de basée à Seattle, haut-parleur et un responsable, chargée en tant que le directeur des Relations de développeur à Smartsheet.com. Il a écrit une multitude d’articles, créés et coauteur une dizaine d’ouvrages et fonctionne dans le monde entier. Contacter à l’adresse ted@tedneward.com ou lire son blog à adresse blogs.tedneward.com.