angular4とnodejs-expressでシンプルなWebサイトを構築する

小云云
リリース: 2023-03-20 11:36:02
オリジナル
1807 人が閲覧しました

この記事では主に、フロントエンドのログイン ページと登録ページを構築し、Angular ルーティングを実装する方法を説明します。
誰でも理解しやすいように、プログラムのルーティング解析図を簡単に描きました。

angular4とnodejs-expressでシンプルなWebサイトを構築する

初期ページを作成し、大まかなルートを設定します

初期ページのコード app.component .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>
ログイン後にコピー

これは、ブートストラップ ジャンボトロン コンポーネントとルーター アウトレットで構成されています。ジャンボトロン内のタイトル、リード、コンテンツは、別のページに移動すると変更されるはずなので、補間を使用してコンテンツを補間します。これら 3 つのタグは、それぞれ、title、lead、content という表現に置き換えられます。これを行うために、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);
    }  
}
ログイン後にコピー

まず、jumbotron の title、lead、content にそれぞれ対応する 3 つの属性 title、lead、content を含む 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 Decorator AppModule を Angular モジュール クラス (NgModule クラスとも呼ばれる) としてマークします。 @NgModule は、Angular にアプリケーションのコンパイル方法と起動方法を指示するメタデータ オブジェクトを受け入れます。
@NgModule には次の属性があります:

  • imports — このモジュールによって宣言されたコンポーネント テンプレートには他のモジュールのクラスが必要です。その中で最も重要なものは BrowserModule で、これはブラウザで実行されるすべてのアプリケーションに必要です。

  • 宣言 - このモジュールで所有されるビュー クラスを宣言し、アプリケーションの唯一のコンポーネントである AppComponent を AppModule で定義します。

  • bootstrap — ルートコンポーネント。Angular によって作成され、index.html ホストページに挿入されます。

  • プロバイダー - サービスの作成者であり、グローバル サービス リストに追加されます。JumbotronServive は、jumbotron コンポーネントのタイトル、リード、コンテンツの更新を提供するためにここに追加されます。ブートストラップ。

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{}
ログイン後にコピー

まず、ルーティング パス (パス) とルーティングに対応するコンポーネント (コンポーネント) を定義します。 Web サイトが開かれると、ユーザー管理インターフェイスに入ります。ホームページに移動するときは、ユーザー ルートに直接ジャンプする必要があります。ホームページ ルート ('') には対応するコンポーネントがありませんが、ユーザー ルートに直接ジャンプします。 path:'**' ルートの目的は、ルートが見つからない場合に PageNotFoundComponent コンポーネントにアクセスすることです。
ルート配列を定義した後、@NgModule デコレーターを使用して RouterModule をインポートし、ルート配列を RouterModule の forRoot 配列に渡します。
最後に RouterModule モジュールをエクスポートします。

関連する推奨事項:

Angular4 でのプロジェクトの準備と環境構築操作
ルーティングの詳細な例 Angular4 の Router クラス

PHP と HTML を使用して簡単な Web サイトのログイン登録プロジェクト HTML の Web サイト 個人 Web サイトのログイン HTMLユーザーログインコード


以上がangular4とnodejs-expressでシンプルなWebサイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート