Erstellen Sie eine einfache Website mit Angular4 und NodeJS-Express

In diesem Artikel erfahren Sie hauptsächlich, wie Sie die Front-End-Anmelde- und Registrierungsseiten erstellen und Angular Routing implementieren.
Um es für alle verständlich zu machen, habe ich einfach ein Routing-Analysediagramm meines Programms gezeichnet:

Erstellen Sie die Startseite und Legen Sie die Gesamtroute fest

Der Code der Startseite app.component.html lautet wie folgt:

<p class="bg">
  <p class="jumbotron jumbotron-fluid text-center">
    <p class="container">
      <h1 class="display-3">{{title}}</h1>
      <p class="lead">{{lead}}</p>
      <hr class="my-4">
      <p class="content">{{content}}
      </p>
    </p>
  </p>
  <router-outlet></router-outlet>
</p>

Es besteht aus einer Bootstrap-Jumbotron-Komponente und einem Router-Outlet Titel in Jumbotron: Der Lead und der Inhalt sollten sich ändern, wenn Sie zu verschiedenen Seiten navigieren. Daher habe ich den Inhalt dieser drei Tags jeweils durch die Interpolationsausdrücke Titel, Lead und Inhalt ersetzt. Zu diesem Zweck habe ich einen JumbotronServive-Dienstanbieter erstellt, der Message Push über rxjs implementiert. Der Code von JumbotronServive lautet wie folgt:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
export class Jumbotron{
    constructor(
        public title:string,
        public lead:string,
        public content:string
    ){}
}
@Injectable()
export class JumbotronServive{
    private jumbSource = new Subject<Jumbotron>();
    jumb$ = this.jumbSource.asObservable();
    setJumbotron(jumb: Jumbotron){
        this.jumbSource.next(jumb);
    }  
}

Erstellen Sie zunächst eine Jumbotron-Klasse, die die drei Attribute Titel, Lead und Inhalt entsprechend dem Titel, Lead und Inhalt in Jumbotron enthält, und schreiben Sie dann eine Die Klasse des Dienstanbieters deklariert in dieser Klasse ein rxjs-Subjektobjekt (Subjekt ist ein spezielles Observable, mit dem Werte per Multicast an mehrere Beobachter übertragen werden können) und ruft dann asObservable() des Subjekts auf, um ein Observable-Objekt zu deklarieren jumb$ zum Abonnieren der Nachrichten vom Betreff gesendet. Deklarieren Sie abschließend ein setJumbotron, um das geänderte Jumbotron-Objekt zu senden. In der AppComponent-Klasse können wir Titel, Lead und Inhalt im Jumbotron abonnieren und ändern. Der Code lautet wie folgt:

jumServ.jumb$.subscribe(
      jumb=>{
        this.title = jumb.title;
        this.lead = jumb.lead;
        this.content = jumb.content;
      });

router-outlet: Routing-Ausgang, der verwendet wird, um zu markieren, wo die Ansicht angezeigt werden soll, was bedeutet, dass alle Routenansichten, zu denen navigiert wird, im <router-outlet></router-outlet>-Tag angezeigt werden.
angular-cli (im Folgenden als ng bezeichnet) hat bereits das grundlegende AppModule für uns geschrieben (das Root-Modul des Angular-Programms. Angular startet die Anwendung durch Booten des Root-Moduls). Werfen wir einen Blick hierher:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    JumbotronServive,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Der @NgModule-Dekorator markiert AppModule als Angular-Modulklasse (auch NgModule-Klasse genannt). @NgModule akzeptiert ein Metadatenobjekt, das Angular mitteilt, wie die Anwendung kompiliert und gestartet werden soll.
@NgModule hat die folgenden Attribute:

• imports – die in diesem Modul deklarierte Komponentenvorlage erfordert Klassen in anderen Modulen, von denen das wichtigste BrowserModule ist, das in jedem verwendet wird Browser Es ist erforderlich, Anwendungen auf dem Server auszuführen.

• Deklarationen – deklariert die in diesem Modul enthaltenen Ansichtsklassen und definiert die einzige Komponente der Anwendung, AppComponent, in AppModule.

• bootstrap – Root-Komponente, Angular erstellt sie und fügt sie in die index.html-Hostseite ein.

• Anbieter – der Ersteller des Dienstes und zur globalen Dienstliste hinzugefügt, die in jedem Teil der Anwendung verwendet werden kann. JumbotronServive wird hier hinzugefügt, um Titel und Führung im Jumbotron bereitzustellen Komponente von Bootstrap, Inhaltsaktualisierung.

AppRoutingModule ist das Routing-Modul der Anwendung. Der spezifische Code:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found.component';
const appRoutes: Routes = [
    {
        path:'',
        redirectTo:'/users',
        pathMatch:'full'
    },
    {path: '**', component: PageNotFoundComponent}
];
@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports:[
        RouterModule
    ]
})
export class AppRoutingModule{}

Definieren Sie zunächst ein Routing-Array, in dem die Routing-Objekte den Routing-Pfad (Pfad) enthalten. , und Routing Entsprechende Komponente (Komponente), da unsere Website beim Navigieren zur Homepage direkt zur Benutzerverwaltungsoberfläche springt. Die Homepage-Route ('') ist nicht vorhanden eine entsprechende Komponente, springt aber direkt zur Route des Benutzers. Der Zweck der Route path:'**' besteht darin, auf die PageNotFoundComponent-Komponente zuzugreifen, wenn keine Route gefunden wird.
Nachdem Sie das Routenarray definiert haben, importieren Sie RouterModule mit dem @NgModule-Dekorator und übergeben Sie das Routenarray an das forRoot-Array von RouterModule.
Exportieren Sie abschließend das RouterModule-Modul.

Verwandte Empfehlungen:

Projektvorbereitung und Umgebungsaufbau in Angular4
Detaillierte Erläuterung von Beispielen der Router-Klasse in Angular4

Verwenden Sie PHP und HTML, um ein einfaches Website-Login-Registrierungsprojekt zu schreiben. HTML-Website, persönliche Website-Login, HTML-Benutzer-Login-Code

Das obige ist der detaillierte Inhalt vonErstellen Sie eine einfache Website mit Angular4 und NodeJS-Express. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!