Build a simple website with angular4 and nodejs-express

This article mainly shares with you how to build the front-end login and registration pages and implement angular routing.
In order to make it easier for everyone to understand, I simply drew a routing analysis diagram of my program:

Create the initial page and Set the total route

The code of the initial page app.component.html is as follows:

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

It is composed of a bootstrap jumbotron component and a router-outlet. The title, lead and The content should change as you navigate to different pages, so I replaced the contents of these three tags with the interpolation expressions title, lead, and content respectively. In order to do this, I created a JumbotronServive service provider that implements message push through rxjs. The code of JumbotronServive is as follows:

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

First create a Jumbotron class, which contains three attributes title, lead, and content corresponding to the title, lead, and content in jumbotron respectively, and then write a service provider class. In this class An rxjs Subject object is declared in (Subject is a special Observable that allows values ​​to be multicast to multiple observers), and then the Subject's asObservable() is called to declare an Observable object jumb$ to subscribe to the messages sent by the Subject. Finally declare a setJumbotron to send the modified Jumbotron object. In the AppComponent class, we can subscribe to and change the title, lead and content in the jumbotron. The code is as follows:

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

router-outlet: routing outlet, used to mark where the view should be displayed, that is to say, all routing views navigated to will be in <router-outlet></router -outlet> is displayed in the label.
angular-cli (hereinafter referred to as ng) has written the basic AppModule for us (the root module of the Angular program, Angular starts the application by guiding the root module), let’s take a look here:

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

@NgModule decorator marks AppModule as an Angular module class (also called NgModule class). @NgModule accepts a metadata object that tells Angular how to compile and start the application.
@NgModule has the following attributes:

• imports — The component template declared in this module requires classes in other modules, the most important of which is BrowserModule, which is used in each browser It is required to run applications on the server.

• declarations —Declares the view classes owned in this module, and defines the only component of the application, AppComponent, in AppModule.

• bootstrap — Root component, Angular creates it and inserts it into the index.html host page.

• providers - the creator of the service and added to the global service list, which can be used in any part of the application. JumbotronServive is added here to provide title and lead in the jumbotron component of bootstrap. , content update.

AppRoutingModule is the routing module of the application. The specific code is:

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

First define a routing array, in which the routing object includes the routing path (path) and the routing corresponding Component (component), because our website enters the user management interface as soon as it is opened. When navigating to the homepage, it needs to jump directly to the users route. The homepage route ('') does not have a corresponding component, but jumps directly to the users route. The purpose of the path:'**' route is to access the PageNotFoundComponent component when no route is found.
After defining the routing array, use the @NgModule decorator to import RouterModule, and pass the routing array to the forRoot array of RouterModule.
Finally export the RouterModule module.

Related recommendations:

Project preparation and environment building operations in Angular4
Detailed explanation of examples of routing Router class in Angular4

Use PHP and HTML to write a simple website login registration project html website personal website login html user login code

The above is the detailed content of Build a simple website with angular4 and nodejs-express. For more information, please follow other related articles on the PHP Chinese website!