• Artikel

Mai 2017

Band 32, Nummer 5

Dieser Artikel wurde maschinell übersetzt

Als Programmierer mit dem MEAN-Stapel arbeiten: Angular CRUD

Durch Ted Neward | Mai 2017

Ted NewardWillkommen zurück, Freunde des MEAN-Stapels.

Letzten Monat untersucht ich Angular Komponenten – Module, Komponenten, Dienste und andere – Vorbereitung tiefer in einige dieser Komponenten erstellen (msdn.com/magazine/mt795191).

Starten Sie nun etwas mehr praktische diese Komponente Konzepte zuweisen.

Befehlszeilen-Tools

Bevor ich in die Konzepte der Komponente abzurufen, besteht nur ein Randbemerkung machen möchte. Einige Leser per mich gefragt, ob das Git-Projekt die einzige Möglichkeit, erste Schritte mit einem Angular-Projekt wurde; Diese ausgedrückt Dubiousness an die Vorstellung, dass dies die einzige Möglichkeit zum Einstieg war. Wie sie auch den Verdacht haben, ist dies nicht der Fall. Angular macht verfügbar ist ein Npm-Paket angular-Cli aufgerufen erhalten die Barebone-Struktur vorhanden. Seine Verwendung ist einfach: installieren, führen Sie den Generator, einige Fragen zu beantworten und wechseln:

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve

Dadurch wird eine neue Anwendung erstellt, im Unterverzeichnis Meine app und ng dienen effektiv führen Sie einen Npm-Start und starten Sie einen lang andauernden Prozesses Web-Server lokal und Transpile Dateien ausgeführt werden, wie sie bearbeitet haben.

Welches Verfahren Sie verwenden, müssen Sie eine erstellte Anwendung "hello World" schließlich; aber denken Sie daran, bis zu dem Zeitpunkt, Ihr Projekt beginnt schwerwiegende Codierung finden Sie unter, erhalten ein Großteil dieses Gerüst geändert/ersetzt. Daher wird nicht der tatsächliche Pfad, den Sie erste Schritte mit wesentlich langfristig stellen. Verwenden Sie, je mehr angemessen.

Komponenten

Wenn dazu, wie Sie eine visual Anwendungsstruktur – z. B. ein traditioneller GUI-Desktop, eine Server-basierte Webanwendung oder eine SPA-Anwendung – erleichtert, überlegen, bis die Anwendung im Hinblick auf die identifizierbaren "Teile", die in Betracht kommen kann. Die meisten Anwendungen, z. B. einer erkennbaren Kopf- oder Fußzeile und in der Regel eine Art von Menüleisten oder Menüstruktur und einem Inhaltsbereich generalisiert. Innerhalb sind dann kleinere abstürzen, abhängig vom Ziel der Anwendung und die enthaltenen Domänenentitäten. Eine solche Aufteilung ist der traditionelle "Master-Detail" UI-Ansatz in der ein Benutzer zuerst navigiert von Domänenentitäten, die an eine große (normalerweise durchsuchbaren) (Übersicht) auswählt und in eine detaillierte Ansicht dieser Domänenentität verschoben. Detailansicht kann häufig zwischen nur-Lese und bearbeitet werden durch eine Art von Schaltfläche oder Switch, in der Regel eine schreibgeschützte Ansicht Starten automatisch umgekehrt werden.

Die Taste, um all dies ist bezüglich der Komponente vorstellen: Wo befinden sich die praktischen Grenzen? Im Falle einer Anwendung, die die Lautsprecher kommuniziert mit anzeigen und zulassen, dass Benutzer die Anwendung Angebot möchte sind als ihr Feedback, die Komponenten ziemlich offensichtlich. (Wie bei den meisten geschriebenen Beispielen haben sie entwickelt werden.) Einige Komponenten werden einfach zu erstellen – und somit stellen gute erste Schritte – aufgrund der Tatsache, dass keine Benutzereingabe oder bearbeitbaren Zustand beinhalteten, und wenige werden etwas komplexer, da wahrscheinlich sowohl Eingabe-als auch die Reaktion auf Änderungen im Status muss werde. Der Schlüssel für alle Komponenten ist ein hohes Maß an Kohärenz: Die Komponente sollte im Grunde eine enge Anpassung "ganze", die "Thing" stellt den Inhalt dieser "Thing" möglicherweise.

Zunächst definieren diese "Thing" als einfache Fußzeile-Komponente, die einen Copyrightvermerk, enthält das aktuelle Jahr angezeigt werden.

Jetzt ist es Zeit für die erste Komponente. Angenommen, Sie haben eine ordnungsgemäß erstellte Projekt (d. h., dass Sie die GreetingsComponent verworfen haben Sie zuletzt getan haben), erstellen Sie eine neue UI-Komponente, um eine Fußzeile am unteren Rand auf der Hauptseite der Anwendung angezeigt werden soll. Im Idealfall sollten diese Komponente "Copyright (c) (aktuelles Jahr) (Ihr Unternehmen)" auf der Seite angezeigt wird, wenn es angezeigt wird. Die Annahme ist, dass die Benutzer dieser Komponente werden am unteren Rand der Seite platzieren, aber es ist durchaus möglich, dass einige ungerade UI/UX Eigenart erfordert etwas darunter (z. B. rechtliche Haftungsausschlüsse?), gehen wir also nicht keine starke Annahmen darüber, wo auf der Seite angezeigt wird.

Der Ausgangspunkt für eine neue Komponente ist zu erstellen. Zwar gibt es immer die Möglichkeit, Dateien und Verzeichnisse manuell erstellen, wie ich Tools, die die wiederholte Dinge für mich. Daher werde ich auf finden Sie wird die angular-Cli ng tool erneut, und dieses Mal, bitten sie eine Komponente für mich generiert:

$ ng generate component footer
installing component
  create src/app/footer/footer.component.css
  create src/app/footer/footer.component.html
  create src/app/footer/footer.component.spec.ts
  create src/app/footer/footer.component.ts
  update src/app/app.module.ts

Die generierten Dateien nicht alles magische, und Sie sie zuvor gesehen haben: Das Verzeichnis für die Fußzeile der Gerüstbau FooterComponent Code enthält, und enthält eine TypeScript-Quelldatei, ein CSS- und HTML-Datei für die Benutzeroberfläche und ein. spec.ts Datei speziell für diese Komponente. Es wurde ebenfalls aktualisiert und Modul-Datei der Anwendung (und sicher genug, wenn Sie in dieser Datei ansehen, es wird wurde aktualisiert, um die Fußzeile Dateien und import-Direktive). Wenn der Server ausgeführt wird und Sie ein Browserfenster zu öffnen, dann gibt es werden kurze Flimmern "Laden...", und klicken Sie dann die Anwendung wird wieder angezeigt. (Keine neuen wird angezeigt, da die Benutzeroberfläche nicht geändert wurde, aber das Flimmern ist die Anwendung aufgrund der Änderungen an der Datei app.module.ts erneut geladen wird.) Da es am einfachsten vorstellen, wie Sie diese Komponente verwenden möchten, beginnen wir mit der HTML-Vorlage in der Datei footer.component.html. Und tatsächlich zunächst wie verwendet werden soll.

Im Grunde genommen, ich denke, dass die Fußzeile anzuzeigende wird etwa wie folgt der "Copyright (c) 2017, Neward & Associates LLC," die zwei Unterschiede in der angezeigten Meldung anzeigt: das aktuelle Jahr und Urheberrechtsinhaber. Wird generiert intern innerhalb der Komponente (durch ein neues Date-Objekt erstellen und Extrahieren des Jahrs) und eine wird von außen übergeben werden (von app.component.html) wie folgt:

<h1>
  {{title}}
</h1>
<footer owner="Neward &amp; Associates, LLC" />

Dadurch ergibt sich die FooterComponent eine Eingabevariable benötigt Code (wie ich im letzten Monat erläutert) und dann auch eine interne CurrentYear-Variable, die im HTML-Code (footer.component.html) übernommen werden:

<p>Copyright (c) {{currentYear}} {{owner}}</p>

Jetzt übrig bleibt, füllen Sie die richtigen Variablen in der FooterComponent selbst (footer.component.ts), siehe Abbildung 1.

Abbildung 1 CopyrightComponent

import { Component, Input, OnInit } from '@angular/core';
@Component({
  selector: 'footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
  currentYear: string;
  @Input() owner: string;
  constructor() { }
  ngOnInit() {
    var d = new Date();
    this.currentYear = d.getFullYear().toString();
    console.log("Current year is ", this.currentYear);
  }
}

Beachten Sie, dass "Auswahl" den Wert im @Component Decorator, die standardmäßig auf app-Fußzeile, und ich es, Fußzeile geändert habe, dass die HTML-Syntax übereinstimmen, werden soll; Dies ist offensichtlich ein ästhetischen Argument im Hinblick auf die Tags aussehen sollte. (Einige bevorzugen des app-Präfixes, aber ich finde es etwas redundante.) Was auch immer Ihre bevorzugte Selektorwert definieren die Syntax in der HTML-Vorlagen, die von anderen Komponenten verwendet werden, damit eine konsistente "Style" geht auch viel gegen Verwechslungen mit der Zeit mehr und mehr Komponenten entwickelt, gedebuggt und bereitgestellt.

Tests, Tests

Sprechen Debuggen, u. a. Gerüstbau ist die. spec.ts-Datei, die eine Reihe grundlegende Einheit definiert tests für die Komponente aufgerufen, die als Teil der Testsammlung, die ausgeführt wird, wenn entweder Npm oder ng Test ausgeführt. (Das Testrig Einrichten von automatisch alle übernommen. spec.ts-Dateien unter dem Unterverzeichnis app geordnet FooterComponent den Moment testet auf die Datei wird eingeführt.) Ohne zu sehr ins Detail (noch) über die Tests Abbildung 2 zeigt FooterComponent Tests aussehen.

Abbildung 2 FooterComponent Test

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { FooterComponent } from './footer.component';

describe('FooterComponent', () => {
  let component: FooterComponent;
  let fixture: ComponentFixture<FooterComponent>;
  let de: DebugElement;
  let el: HTMLElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ FooterComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(FooterComponent);
    component = fixture.componentInstance;
    de = fixture.debugElement.query(By.css('p'));

    component.owner = "ACME, Inc";
    fixture.detectChanges();

    el = de.nativeElement;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should know the current year', () => {
    const currentYear = "" + new Date().getFullYear();
    expect(component.currentYear).toEqual(currentYear);
  });

  it('should know the owner', () => {
    expect(component.owner).toEqual("ACME, Inc");
  });

  it('should render message in a p tag', async(() => {
    expect(el.textContent).toContain("Copyright (c)");
    expect(el.textContent).toContain(new Date().getFullYear().toString());
    expect(el.textContent).toContain("ACME, Inc");
  }));
});

Für die Leser, die einige Zeit mit dem Schreiben von Komponententests in anderen Frameworks verbracht haben, wird nicht dadurch zu vollständig unlesbare vorkommen. zu Wit:

  • beschreiben eine Einheit Testsammlung, der als Bereich/Kontext verdoppelt, in dem alle darin werden ausgeführt, wird. Es dient, z. B. um hängen von Feldern, die als Teil des Tests verwendet. (Nie versuchen, diese über Tests verwenden; immer davon aus, und stellen Sie sicher –, die die Felder werden vor und nach jedem Test zurückgesetzt.)
  • BeforeEach, ist wie der Name schon sagt, ein Codeblock, der vor jedem Test ausgeführt wird.
  • definiert einen Test, und führen Sie eine Beschreibung und einen Codeblock (d. h. überrascht nicht, dass der betreffende Test) aus.
  • erwartet wird eine fluent-Schnittstelle definieren eines Satzes von Erwartungen, die true; sollten Wenn dies nicht der Fall, wird der Test als fehlgeschlagen betrachtet.

Wenn ausführen (entweder Npm oder ng-Test), ein Browserfenster wird geöffnet, und geben Sie die Art der Übergabe – oder nicht – von der getestete Code. Bleibt dieser Prozess im Hintergrund, Ausführung, jedes Mal, wenn eine Datei nach dem Transpiling geändert wird (durch den Npm-Server oder ng dienen Prozess) durchgeführt, die Tests automatisch ausgeführt werden erneut bereitstellen von nahezu sofortige Feedback auf, ob der Code Muster übergibt.

In diesem Fall werden die zwei BeforeEach Blöcke einige Bausteine der standard-Setup, z. B. die Besitzerdaten, die normalerweise stammen würde durch die Vorlage übergeben und dann testen, um sicherzustellen, dass die Besitzerdaten erfolgreich übergeben wurde, diese CurrentYear korrekt berechnet wurde, und dass das Tag < p > in der Vorlage, die beim Rendern der richtigen Teile copyright-Hinweis enthalten soll.

Und dann, natürlich das Browserfenster, das die gesamte Anwendung enthält, auch die neue Meldung angezeigt.

Zusammenfassung

An einem bestimmten Punkt während jeder potenzielle Angular Entwickler Reise durch die Schritte zum Öffnen von Angular kommt ein Zeitpunkt, in dem die kognitive Aufwand so viel höher als die Vorteile erscheint; "Schließlich" können sie muse, "Alles, was ich eigentlich wollten, wurde put einen Copyrightvermerk am unteren Rand der Seite!" Dies ist die Angular, wie viele Umgebungen, doch, möglich, scheint es einfache Dinge schwierig gestalten. Berechtigt, das trifft nicht ganz – Sie können problemlos haben nur gelöscht des Fußzeile am unteren Rand der AppComponent im HTML-Code und statischen Text und müssten Sie es Jahres, dann wieder ändern, wenn das Unternehmen aufgekauft und das Jahr nach, die bei das Datum ändert sich wieder, und das Jahr nach, und so weiter.

Der Vorgang beim Erstellen einer Komponente wird niemals als frei als Act einfach "ablegen HTML" auf die Seite vorgenommen. Das Problem gehen Zeit jedoch als die Komplexität der Anwendung Skalen von ein, und Entwickler sind gezwungen, auf jeder Seite Denken Sie daran, auf denen die Fußzeile angezeigt wird; Fußzeile in einer Komponente gekapselt werden, können der Entwickler nur ohne darum kümmern, wie die Fußzeile ist um zu entscheiden, welche Nachricht angezeigt wird. Und genauso, wenn einige später rechtliche Szenario eine umfassendere Meldung erfordert, z. B. das Lizenzmodell, unter dem auf dieser Seite wird auf der ganzen Welt angeboten, ändern können in einem – und nur ein – Ort, und dass die Änderung automatisch durch den Rest des Systems ripple wird ohne Benutzereingriff.

Es gibt noch viel mehr zu entdecken. In der Zwischenzeit viel Spaß beim Programmieren!

Ted Newardist Seattle basierende Polytechnology Berater, Referent und Mentor, gerade als Direktor für Entwickler an Relations Smartsheet.com. Er hat mehr als 100 Artikel geschrieben, verfasst und ist Mitautor ein Dutzend Bücher und arbeitet auf der ganzen Welt. Sie erreichen ihn unter ted@tedneward.com oder seinen Blog unter blogs.tedneward.com.

Unser Dank gilt dem folgenden technischen Experten für die Durchsicht dieses Artikels: Ward Bell