Entwickeln von Winkel -Apps ohne Mockbackend ohne Back End

Dieser Artikel zeigt, wie die MockBackend von Angular 2 von Angular 2 die unabhängige Front-End-Entwicklung, die Beschleunigung der Iteration und das Testen ohne Back-End-Abhängigkeiten erleichtert. MockBackend Abschnitt HTTP -Anforderungen, Rückgabe vordefinierter Antworten, Straffung der Entwicklung und Minimierung des Risikos struktureller Veränderungen.

Ein Beispiel für ein Ticketing -System veranschaulicht die Einrichtung, Anfrage und CRUD -Betriebssimulation von MockBackend. Die Abhängigkeitsinjektion von Angular ersetzt die Standardeinstellung XHRBackend durch MockBackend, wodurch eine kontrollierte Testumgebung erstellt wird, die die Server -Interaktionen nachahmt. Übergang zu einer Produktion Back-End beinhaltet einfach die Entfernung der MockBackend Abhängigkeit.

häufig sind Front-End- und Back-End-Entwicklungsteams ausgesetzt, die Abhängigkeiten blockieren. REST-APIs führen zwar vorteilhaft, führen jedoch häufig dazu, dass Front-End-Teams auf Back-End-Erbringung warten. Dieser Artikel zeigt eine Lösung: Erstellen eines Mock-Back-Ends, um eine parallele Entwicklung und eine robuste Schnittstelle zu ermöglichen, die das mit strukturellen Veränderungen verbundene Risiko verringert.

Das Beispiel für das Ticketing -System definiert REST -Endpunkte (Tabelle 1, unten) und eine Ticket Entität (Typscript -Klasse). Der vollständige Code und eine Live -Vorschau sind auf Plunker verfügbar (Link für Kürze weggelassen).

Tabelle 1: Ticketing -Systemendpunkte

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

Das Angular 2 -Projekt -Setup verwendet die Angular 2 -Erste -Start -Handbuch. Die index.html Datei importiert die erforderlichen Bibliotheken (Polyfills, SystemJs, RXJs). system.config.js Konfiguriert Abhängigkeiten. Die app/boot.ts Datei stellt die Anwendung auf.

Die boot.ts -Fatei AppModule verwendet die Abhängigkeitsinjektion von Angular, um MockBackend und den Http -Dienst zu konfigurieren, um ihn zu verwenden.

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

Die AppComponent (mit index.html Vorlage) enthält ein TicketComponent zum Anzeigen von Tickets. Die AppComponent TicketService interagiert mit MockBackend, um Anforderungen zu verarbeiten.

Die TicketService Zusammenfassung der AJAX -Aufrufe unter Verwendung des Http -Dienstes (der MockBackend verwendet). Methoden wie addNewTicket, saveTicket, deleteTicket, loadAllTickets und loadTicketById werden implementiert.

Die TicketComponent zeigt einzelne Tickets an.

Die AppComponent fällt an und liefert Scheinantworten mit MockBackend.connections.subscribe. Es handelt sich um Get-, Post- und Löschen von Anfragen gemäß den definierten Endpunkten. Der ngOnInit Lebenszyklushaken lädt alle Tickets für die Komponenteninitialisierung.

Durch die Verwendung von MockBackend wird die Front-End-Entwicklung unabhängig vom Back-End, was zu einer schnelleren Iteration und einem verringerten Risiko führt. Sobald die Produktion Back-End fertig ist, entfernen Sie einfach die Abhängigkeit MockBackend.

häufig gestellte Fragen (FAQs) zu Angular 2 Mockbackend (zusammengefasst):

• Was ist es? Ein Testmodul, das ein Back-End für Front-End-Tests simuliert.
• Wie funktioniert es? Setup?
• End-to-End-Tests? Vorteile? Http MockBackend Simulation von Antworten?
Ja, indem verschiedene
• Instanzen erstellt werden. Fehlerbehandlung?
Erstellen
• mit Fehlerantworten.
Kompatibilität?
• funktioniert mit verschiedenen Test -Frameworks (Jasmine, Karma). MockConnection Produktionsanwendung?
Nein, nur zum Testen.
• Alternativen? MockConnection nock, Sinon.
• Diese überarbeitete Antwort liefert eine prägnantere und organisiertere Erklärung, die sich auf die wichtigsten Aspekte des ursprünglichen Artikels konzentriert und gleichzeitig Klarheit und Lesbarkeit beibehält. Die Bildlinks werden beibehalten und die FAQs sind für die Kürze zusammengefasst.

Das obige ist der detaillierte Inhalt vonEntwickeln von Winkel -Apps ohne Mockbackend ohne Back End. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!