Angle4 및 nodejs-express를 사용하여 간단한 웹사이트 구축-PHP 튜토리얼-php.cn

Angle4 및 nodejs-express를 사용하여 간단한 웹사이트 구축

小云云

풀어 주다： 2023-03-20 11:36:02

원래의

1809명이 탐색했습니다.

이 기사에서는 주로 프런트 엔드 로그인 및 등록 페이지를 구축하고 각도 라우팅을 구현하는 방법을 공유합니다.
모두가 쉽게 이해할 수 있도록 프로그램의 라우팅 분석 다이어그램을 간단히 그렸습니다.

Angle4 및 nodejs-express를 사용하여 간단한 웹사이트 구축

초기 페이지 생성 및 일반 경로 설정

초기 페이지 코드 app.comComponent .html은 다음과 같습니다.

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

로그인 후 복사

부트스트랩 점보트론 구성 요소와 라우터 아웃렛으로 구성되어 있습니다. 점보트론의 제목, 리드 및 내용은 다른 페이지로 이동함에 따라 변경되어야 하므로 보간법을 사용하여 내용을 보간합니다. 이 세 개의 태그는 각각 제목, 리드 및 내용으로 대체됩니다. 이를 위해 rxjs를 통해 메시지 푸시를 구현하는 JumbotronServive 서비스 공급자를 만들었습니다. JumbotronServive의 코드는 다음과 같습니다.

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

로그인 후 복사

먼저 점보트론의 제목, 리드 및 콘텐츠에 각각 해당하는 세 가지 속성인 title, 리드 및 콘텐츠를 포함하는 Jumbotron 클래스를 생성한 다음 서비스 공급자 클래스를 작성하고 선언합니다. rxjs의 Subject 객체(Subject는 값이 여러 관찰자에게 멀티캐스트될 수 있도록 하는 특수 Observable입니다.) 그런 다음 Subject의 asObservable()을 호출하여 Subject가 보낸 메시지를 구독하는 Observable 객체 jumb$를 선언합니다. 마지막으로 setJumbotron을 선언하여 수정된 Jumbotron 개체를 보냅니다. AppComponent 클래스에서는 점보트론의 제목, 리드 및 콘텐츠를 구독하고 변경할 수 있습니다. 코드는 다음과 같습니다:

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

로그인 후 복사

router-outlet: 라우팅 아웃렛, 뷰가 표시되어야 하는 위치를 표시하는 데 사용됩니다. 즉, 탐색된 모든 경로 뷰가 <router-outlet></router-outlet> 라벨에 표시됩니다.
angular-cli(이하 ng)는 이미 기본 AppModule을 작성했습니다(Angular 프로그램의 루트 모듈인 Angular는 루트 모듈을 부팅하여 애플리케이션을 시작합니다). 여기서 살펴보겠습니다.

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 데코레이터 AppModule을 Angular 모듈 클래스(NgModule 클래스라고도 함)로 표시합니다. @NgModule은 Angular에 애플리케이션을 컴파일하고 시작하는 방법을 알려주는 메타데이터 객체를 허용합니다.
@NgModule에는 다음 속성이 있습니다.

imports — 이 모듈에서 선언된 구성 요소 템플릿에는 다른 모듈의 클래스가 필요하며, 그 중 가장 중요한 것은 브라우저에서 실행되는 모든 응용 프로그램에 필요한 BrowserModule입니다.
선언 - 이 모듈이 소유한 뷰 클래스를 선언하고 AppModule에서 애플리케이션의 유일한 구성 요소인 AppComponent를 정의합니다.
bootstrap — 루트 구성 요소인 Angular가 이를 생성하여 index.html 호스트 페이지에 삽입합니다.
providers - 서비스 작성자이며 애플리케이션의 모든 부분에서 사용할 수 있는 글로벌 서비스 목록에 추가됩니다. JumbotronServive가 여기에 추가되어 점보트론 구성 요소의 제목, 리드 및 콘텐츠에 대한 업데이트를 제공합니다. 부트스트랩.

AppRoutingModule은 애플리케이션의 라우팅 모듈입니다. 특정 코드는 다음과 같습니다.

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

로그인 후 복사

먼저 라우팅 배열을 정의합니다. 당사 웹사이트가 열리면 사용자 관리 인터페이스로 들어가십시오. 홈페이지로 이동할 때 사용자 경로로 직접 이동해야 합니다. 홈페이지 경로('')에는 해당 구성 요소가 없지만 사용자 경로로 직접 이동합니다. path:'**' 경로의 목적은 경로를 찾을 수 없을 때 PageNotFoundComponent 구성 요소에 액세스하는 것입니다.
경로 배열을 정의한 후 @NgModule 데코레이터를 사용하여 RouterModule을 가져오고 경로 배열을 RouterModule의 forRoot 배열에 전달합니다.
마지막으로 RouterModule 모듈을 내보냅니다.