国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

利用angular4和nodejs-express構建一個簡單的網站(十)—好友模塊

BicycleWarrior / 2116人閱讀

摘要:我們從這一章開始分析這個好友模塊。在中提供了和一個請求攔截器,分別用于提供數據服務路由守衛服務和攔截服務。在這個模塊下共有三個組件。路由路由模塊負責整個模塊的全部路由。和,對應同一個組件,當導航到路徑時,,的為具體的。

上一章講解了用戶登錄的相關代碼。用戶登錄成功后,就會進入好友模塊,在好友模塊中會根據不同的用戶ID顯示相應的好友列表,點擊好友列表中的單個好友就會進入編輯單個好友頁面,對好友信息進行編輯。點擊列表頁面的添加按鈕,就會添加新的好友。
我們從這一章開始分析這個好友模塊。

模塊代碼分析

模塊基本代碼如下:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { ReactiveFormsModule } from "@angular/forms";
import { HTTP_INTERCEPTORS } from "@angular/common/http";
import { BirthdaysComponent } from "./birthdays/birthdays.component";
import { BirthdayListComponent } from "./birthday-list/birthday-list.component";
import { BirthdayRoutingModule } from "./birthday-routing.module";
import { BirthdayService } from "./birthday.service";
import { BirthdayDetailComponent } from "./birthday-detail/birthday-detail.component";
import { AuthGuardService } from "../auth-guard.service";
import { AuthInterceptor } from "../auth-interceptor";
@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    BirthdayRoutingModule
  ],
  providers:[
    BirthdayService,
    AuthGuardService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi:true
    }
  ],
  declarations: [BirthdaysComponent, BirthdayListComponent, BirthdayDetailComponent]
})
export class BirthdaysModule { }

在模塊代碼中除了作為子模塊必須的導入的CommonModule模塊,還導入了ReactiveFormsModule,BirthdayRoutingModule兩個模塊,ReactiveFormsModule模塊用于編輯用戶信息的提交表單,基本用法和用戶注冊的表單相同,BirthdayRoutingModule模塊用于設置路由。
在providers中提供了BirthdayService、AuthGuardService和一個HTTP請求攔截器,分別用于提供數據服務、路由守衛服務和HTTP攔截服務。
在這個模塊下共有三個組件:BirthdaysComponent、BirthdayListComponent、BirthdayDetailComponent。
下面開始逐項進行分析。

路由

路由模塊BirthdayRoutingModule負責整個Birthdays模塊的全部路由。代碼如下:

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { BirthdaysComponent } from "./birthdays/birthdays.component";
import { BirthdayListComponent } from "./birthday-list/birthday-list.component";
import { AuthGuardService } from "../auth-guard.service";
import { BirthdayDetailComponent } from "./birthday-detail/birthday-detail.component";
const birthRoutes: Routes = [
    {
        path: "birthday",
        component: BirthdaysComponent,
        canActivate: [AuthGuardService],
        children: [
            { path: "", component: BirthdayListComponent },
            {
                path: ":id",
                component: BirthdayDetailComponent
            },
            {
                path:"new",
                component:BirthdayDetailComponent
            }
        ]
    },
];
@NgModule({
    imports: [RouterModule.forChild(birthRoutes)],
    exports: [RouterModule]
})
export class BirthdayRoutingModule {}

當地址導航到localhost:4200/birthday時,首先加載BirthdaysComponent控件,BirthdaysComponent控件只要提供一個路由插座和用戶的注銷操作。
BirthdaysComponent代碼比較簡單:在這里直接給出html代碼和類代碼
html代碼:


控件類代碼:

import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { JumbotronServive, Jumbotron } from "../../jumbotron.service";
import { AuthTokenService } from "../../authtoken.service";
@Component({
  selector: "app-birthdays",
  templateUrl: "./birthdays.component.html",
  styleUrls: ["./birthdays.component.css"]
})
export class BirthdaysComponent{
  constructor(
    private jumbServ: JumbotronServive,
    private tokenServ: AuthTokenService,
    private router: Router) {
    jumbServ.setJumbotron(new Jumbotron("Friends", "", ""));
  }
  logout() {
    this.tokenServ.setToken(null);
    this.router.navigate(["/"]);
  }
}

當點擊Logout按鈕時,執行logout()函數,清空保存在本地的認證信息,并導航到首頁。
...
<繼續路由分析>
birthday路徑下有三個子路由,分別為:"空",對應BirthdayListComponent組件。":id"和"new",對應同一個BirthdayDetailComponent組件,當導航到"new"路徑時,[routerLink]="[0]",":id"的routerLink為具體的id。
這一篇先暫時寫這么多,下一篇主要介紹三個主要的服務提供程序。敬請期待......

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52156.html

相關文章

  • 利用angular4nodejs-express構建簡單網站一)—HttpClient攔截器

    摘要:攔截器的官方解釋為攔截機制是中的主要特性之一。使用這種攔截機制,你可以聲明一些攔截器,用它們監視和轉換從應用發送到服務器的請求。最后調用,以便這個請求流能走到下一個攔截器,并最終傳給后端處理器。 上一節介紹了好友模塊,這一節介紹和好友模塊中的控件有關的三個服務程序。 用HttpClient攔截器發送用戶認證信息 在進入好友模塊之前,需要向服務器發送認證信息,在這里使用angular的H...

    Eric 評論0 收藏0
  • 利用angular4nodejs-express構建一個簡單網站(八)—注冊之保存用戶數據

    摘要:上一章通過用戶注冊講解了響應式表單,這章主要講解如何向服務器提交注冊數據并導航到好友信息模塊。利用的方法將這個憑證存儲到本地。針對一個進行數據存儲。當用戶關閉瀏覽器窗口后,數據會被刪除。 上一章通過用戶注冊講解了響應式表單ReactiveForm,這章主要講解如何向服務器提交注冊數據并導航到好友信息模塊。 提交注冊信息 向服務器提交信息是通過模板中標簽中的(ngSubmit)=onSu...

    haobowd 評論0 收藏0
  • 利用angular4nodejs-express構建一個簡單網站(八)—注冊之保存用戶數據

    摘要:上一章通過用戶注冊講解了響應式表單,這章主要講解如何向服務器提交注冊數據并導航到好友信息模塊。利用的方法將這個憑證存儲到本地。針對一個進行數據存儲。當用戶關閉瀏覽器窗口后,數據會被刪除。 上一章通過用戶注冊講解了響應式表單ReactiveForm,這章主要講解如何向服務器提交注冊數據并導航到好友信息模塊。 提交注冊信息 向服務器提交信息是通過模板中標簽中的(ngSubmit)=onSu...

    宋華 評論0 收藏0

發表評論

0條評論

BicycleWarrior

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<