Créez un site Web simple avec angulaire4 et nodejs-express

Cet article explique principalement comment créer les pages de connexion et d'enregistrement frontales et implémenter le routage angulaire.
Afin de faciliter la compréhension de tous, j'ai simplement dessiné un schéma d'analyse de routage de mon programme :

Créer la page initiale et Définir l'itinéraire total

Le code de la page initiale app.component.html est le suivant :

<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>

Il est composé d'un composant bootstrap jumbotron et d'une prise routeur. title dans Jumbotron, le lead et le contenu devraient changer à mesure que vous naviguez vers différentes pages, j'ai donc remplacé le contenu de ces trois balises par les expressions d'interpolation title, lead et content respectivement. Pour ce faire, j'ai créé un fournisseur de services JumbotronServive qui implémente le transfert de messages via rxjs. Le code de JumbotronServive est le suivant :

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);
    }  
}

Créez d'abord une classe Jumbotron, qui contient 3 attributs titre, lead et contenu correspondant respectivement au titre, au lead et au contenu dans jumbotron, puis écrivez un classe de fournisseur de services, dans Cette classe déclare un objet Sujet rxjs (le Sujet est un Observable spécial qui permet aux valeurs d'être multidiffusées vers plusieurs observateurs), puis appelle asObservable() du Sujet pour déclarer un objet Observable jumb$ pour s'abonner aux messages envoyé par le Sujet. Enfin, déclarez un setJumbotron pour envoyer l'objet Jumbotron modifié. Dans la classe AppComponent, nous pouvons nous abonner et modifier le titre, le lead et le contenu du jumbotron. Le code est le suivant :

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

router-outlet : sortie de routage, utilisée pour marquer l'endroit où la vue doit être affichée, ce qui signifie que toutes les vues d'itinéraire vers lesquelles vous naviguez seront affichées dans la balise <router-outlet></router-outlet>.
angular-cli (ci-après dénommé ng) a déjà écrit pour nous l'AppModule de base (le module racine du programme Angular, Angular démarre l'application en démarrant le module racine), jetons un œil ici :

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 { }

Le décorateur @NgModule marque AppModule comme une classe de module angulaire (également appelée classe NgModule). @NgModule accepte un objet de métadonnées qui indique à Angular comment compiler et démarrer l'application.
@NgModule a les attributs suivants :

• imports — le modèle de composant déclaré dans ce module nécessite des classes dans d'autres modules, dont le plus important est BrowserModule, qui est utilisé dans chaque navigateur Il est nécessaire pour exécuter des applications sur le serveur.

• declarations — déclare les classes de vue appartenant à ce module et définit le seul composant de l'application, AppComponent, dans AppModule.

• bootstrap — Composant racine, Angular le crée et l'insère dans la page hôte index.html.

• fournisseurs - le créateur du service et ajouté à la liste globale des services, qui peuvent être utilisés dans n'importe quelle partie de l'application. JumbotronServive est ajouté ici pour fournir le titre et le lead dans le jumbotron. composant de bootstrap., mise à jour du contenu.

AppRoutingModule est le module de routage de l'application. Le code spécifique :

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{}

Définissez d'abord un tableau de routage, où les objets de routage incluent le chemin de routage (path). , et le routage Composant correspondant (composant), car notre site Web entre dans l'interface de gestion des utilisateurs dès son ouverture. Lors de la navigation vers la page d'accueil, il doit accéder directement à l'itinéraire de la page d'accueil (''). un composant correspondant, mais passe directement à la route des utilisateurs. Le but de la route path:'**' est d'accéder au composant PageNotFoundComponent lorsqu'aucune route n'est trouvée.
Après avoir défini le tableau de routes, importez RouterModule avec le décorateur @NgModule et transmettez le tableau de routes au tableau forRoot de RouterModule.
Enfin, exportez le module RouterModule.

Recommandations associées :

Opérations de préparation de projet et de création d'environnement dans Angular4
Explication détaillée d'exemples de classe de routeur de routage dans Angular4

Utilisez PHP et HTML pour écrire un projet d'enregistrement de connexion à un site Web simple Site Web html Connexion à un site Web personnel Code de connexion utilisateur html

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!