Développer des applications angulaires sans back-end en utilisant Mockbackend

Cet article montre comment les Angular 2 MockBackend facilitent le développement frontal indépendant, l'accélération de l'itération et les tests sans dépendances arrière. MockBackend intercepte les demandes HTTP, renvoyant les réponses prédéfinies, rationalisant le développement et minimisant le risque de changements structurels.

Un exemple de système de billetterie illustre la configuration, la manipulation de la demande et la simulation de l'opération CRUD de MockBackend. L'injection de dépendance d'Angular remplace la valeur par défaut XHRBackend par MockBackend, créant un environnement de test contrôlé imitant les interactions du serveur. La transition vers un back-end de production implique simplement de supprimer la dépendance MockBackend.

fréquemment, les équipes de développement frontal et back-end sont confrontées à des dépendances de blocage. Les API REST, bien que bénéfiques, conduisent souvent à des équipes frontales en attente de livrables back-end. Cet article présente une solution: la création d'un simulation de back-end pour permettre le développement parallèle et une interface robuste qui réduit le risque associé aux changements structurels.

L'exemple de système de billetterie définit les points de terminaison de repos (tableau 1, ci-dessous) et une entité Ticket (classe TypeScript). Le code complet et un aperçu en direct sont disponibles sur Plunker (lien omis pour la concision).

Tableau 1: Points de terminaison du système de billetterie

Method	Route	Request body	Description
GET	/ticket	None	Request all tickets
GET	/ticket/:id	None	Request a single ticket via ID
POST	/ticket	Ticket entity	Create or update a ticket
DELETE	/ticket/:id	None	Delete a ticket

La configuration du projet Angular 2 utilise le guide de démarrage Angular 2. Le fichier index.html importe des bibliothèques nécessaires (Polyfills, SystemJS, RXJS). system.config.js configure les dépendances. Le app/boot.ts Fichier Bootstraps L'application.

le boot.ts du fichier AppModule utilise l'injection de dépendance d'Angular pour fournir MockBackend et configurer le service Http pour l'utiliser.

<code class="language-typescript">@NgModule({
  providers: [
    BaseRequestOptions,
    MockBackend,
    {
      provide: Http,
      deps: [MockBackend, BaseRequestOptions],
      useFactory: (backend, options) => { return new Http(backend, options); }
    }
  ],
  // ... rest of the NgModule
})
export class AppModule { }</code>

Le modèle AppComponent (Utilisation index.html) contient un TicketComponent pour afficher des billets. Le AppComponent S TicketService interagit avec MockBackend pour gérer les demandes.

le TicketService résume les appels AJAX, en utilisant le service Http (qui utilise MockBackend). Des méthodes comme addNewTicket, saveTicket, deleteTicket, loadAllTickets, et loadTicketById sont implémentées.

le TicketComponent affiche des billets individuels.

Les demandes AppComponent interceptent les demandes et fournit des réponses simulées en utilisant MockBackend.connections.subscribe. Il gère les demandes d'obtention, de publication et de suppression en fonction des points de terminaison définis. Le Hook de cycle de vie ngOnInit charge tous les billets sur l'initialisation des composants.

En utilisant MockBackend, le développement frontal devient indépendant du back-end, conduisant à une itération plus rapide et à une réduction du risque. Une fois que le back-end de production est prêt, supprimez simplement la dépendance MockBackend.

Questions fréquemment posées (FAQ) sur Angular 2 MockBackend (résumé):

• Qu'est-ce que c'est? Un module de test simulant un back-end pour les tests frontaux.
• Comment cela fonctionne-t-il? intercepte les demandes HTTP et renvoie les réponses simulées.
• Configuration? Importer les modules nécessaires, fournir un service Http avec MockBackend.
• tests de bout en bout? principalement pour les tests unitaires, mais peuvent être utilisés en conjonction avec d'autres méthodes de bout en bout.
• Avantages? Des tests plus rapides et plus fiables indépendants de la disponibilité du serveur.
• Simulation de réponses? Oui, en créant différentes instances MockConnection.
• Gestion des erreurs? Créer MockConnection avec des réponses d'erreur.
• Compatibilité? Fonctionne avec divers cadres de test (jasmin, karma).
• Utilisation de la production? Non, uniquement pour les tests.
• Alternatives? Nock, Sinon.

Cette réponse révisée fournit une explication plus concise et organisée, en se concentrant sur les aspects clés de l'article original tout en maintenant la clarté et la lisibilité. Les liens d'image sont conservés et les FAQ sont résumées pour la concision.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!