angular使用NG ZORRO來構(gòu)建博客展示項(xiàng)目(項(xiàng)目結(jié)構(gòu)及路由)

返回目錄

創(chuàng)建項(xiàng)目

使用angular腳手架搭建項(xiàng)目。
如何使用angular腳手架搭建項(xiàng)目參看這篇文章

ng new blog-angular

安裝NG ZORRO

我們界面UI選用NG ZORRO妄呕。
可以參考官網(wǎng)潜慎,https://ng.ant.design/#/docs/angular/getting-started

cd blog-angular
npm install ng-zorro-antd --save

在根 module 中需要使用 NgZorroAntdModule.forRoot()

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgZorroAntdModule } from 'ng-zorro-antd';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgZorroAntdModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

構(gòu)建我們的項(xiàng)目文件

根據(jù)我自己的需求,現(xiàn)在構(gòu)建的是一個(gè)個(gè)人博客系統(tǒng)司抱,很簡(jiǎn)單筐眷,可能就兩個(gè)頁(yè)面,一個(gè)列表頁(yè)面习柠,一個(gè)詳細(xì)頁(yè)面匀谣。但是這是我做個(gè)人網(wǎng)站的開始,以后還會(huì)加上別的其他頁(yè)面资溃,如個(gè)人簡(jiǎn)歷頁(yè)面武翎,聯(lián)系頁(yè)面或者集成別的一些什么。所以溶锭,我們至少要按照一個(gè)中小型項(xiàng)目來構(gòu)建目錄宝恶。
使用如下指令添加4個(gè)子模塊

ng g module core
ng g module layout
ng g module share
ng g module routes
項(xiàng)目目錄

通過指令添加布局模塊組件

ng g component layout
ng g component layout/header
ng g component layout/footer

通過指令添加博客模塊及其組件

ng g module routes/blog
ng g component routes/blog/note-list
ng g component routes/blog/note

通過命令很方便的創(chuàng)建模塊和組件

創(chuàng)建路由

配置根路由,我們這里用的loadChildren的方式
在routes文件夾下創(chuàng)建routes.ts文件并寫入如下代碼

import {LayoutComponent} from "../layout/layout.component"

export const routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      { path: '', redirectTo: 'blog', pathMatch: 'full' },
      { path: 'blog', loadChildren: './blog/blog.module#BlogModule'},
    ]
  },
  { path: '**', redirectTo: 'blog' }
];

注入路由,修改routes.module.ts如下:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import {routes} from "./routes"

import {LayoutModule} from "../layout/layout.module"

@NgModule({
  imports: [
    CommonModule,
    LayoutModule,
    RouterModule.forRoot(routes, { useHash: true }), // 這個(gè)定義在子模塊中垫毙,但是是跟路由霹疫,我們使用forRoot
  ],
  declarations: []
})
export class RoutesModule { }

在app.module.ts中引入RoutesModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgZorroAntdModule } from 'ng-zorro-antd';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import {RoutesModule} from "./routes/routes.module"


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule,
    BrowserModule,
    NgZorroAntdModule.forRoot(),
    RoutesModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

配置子模塊路由
在blog.module.ts中修改如下

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NoteListComponent } from './note-list/note-list.component';
import { NoteComponent } from './note/note.component';
import { Routes, RouterModule } from '@angular/router';

// 定義的路由
const routes: Routes = [
  { path: '', redirectTo: 'list' },
  { path: 'list', component: NoteListComponent },
  { path: 'note/:id', component: NoteComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes), // 子模塊注入路由要用forChild
  ],
  // 路由中使用了的component要在這里declaration
  declarations: [NoteListComponent, NoteComponent]
})
export class BlogModule { }

路由出口router-outlet
跟路由的出口在app.component.html文件中

<router-outlet></router-outlet>

博客子模塊的路由出口在layout.component.html文件中

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

效果

源碼下載

思考

  • 這章主要寫了路由和項(xiàng)目文件的管理。
  • 結(jié)合angular的模塊化思想综芥,盡量將不同功能的東西分在不同的文件夾中更米,組成不同的模塊。
  • 路由分了跟路由和模塊子路由毫痕,模塊我們使用loadChildren的方式的好處是征峦,不需要引入子模塊。以后擴(kuò)展方便消请。如果我要以后要擴(kuò)展blog相關(guān)的東西栏笆,就只需要在BlogModule中增加相應(yīng)的組件,然后添加子模塊路由即可臊泰。如果要擴(kuò)展和blog模塊類似的功能蛉加,例如手機(jī)端博客,記賬webapp等就在跟路由中添加loadChildren缸逃。然后像寫B(tài)logModule一樣寫一個(gè)子模塊就可以了
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末针饥,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子需频,更是在濱河造成了極大的恐慌丁眼,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,496評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件昭殉,死亡現(xiàn)場(chǎng)離奇詭異苞七,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)挪丢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,187評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門蹂风,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人乾蓬,你說我怎么就攤上這事惠啄。” “怎么了任内?”我有些...
    開封第一講書人閱讀 157,091評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵撵渡,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我族奢,道長(zhǎng)姥闭,這世上最難降的妖魔是什么丹鸿? 我笑而不...
    開封第一講書人閱讀 56,458評(píng)論 1 283
  • 正文 為了忘掉前任越走,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘廊敌。我一直安慰自己铜跑,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,542評(píng)論 6 385
  • 文/花漫 我一把揭開白布骡澈。 她就那樣靜靜地躺著锅纺,像睡著了一般。 火紅的嫁衣襯著肌膚如雪肋殴。 梳的紋絲不亂的頭發(fā)上囤锉,一...
    開封第一講書人閱讀 49,802評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音护锤,去河邊找鬼官地。 笑死,一個(gè)胖子當(dāng)著我的面吹牛烙懦,可吹牛的內(nèi)容都是我干的驱入。 我是一名探鬼主播,決...
    沈念sama閱讀 38,945評(píng)論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼氯析,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼亏较!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起掩缓,我...
    開封第一講書人閱讀 37,709評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤雪情,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后你辣,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體旺罢,經(jīng)...
    沈念sama閱讀 44,158評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,502評(píng)論 2 327
  • 正文 我和宋清朗相戀三年绢记,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了扁达。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,637評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蠢熄,死狀恐怖跪解,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情签孔,我是刑警寧澤叉讥,帶...
    沈念sama閱讀 34,300評(píng)論 4 329
  • 正文 年R本政府宣布,位于F島的核電站饥追,受9級(jí)特大地震影響图仓,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜但绕,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,911評(píng)論 3 313
  • 文/蒙蒙 一救崔、第九天 我趴在偏房一處隱蔽的房頂上張望惶看。 院中可真熱鬧,春花似錦六孵、人聲如沸纬黎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,744評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽本今。三九已至,卻和暖如春主巍,著一層夾襖步出監(jiān)牢的瞬間冠息,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,982評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工孕索, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留铐达,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,344評(píng)論 2 360
  • 正文 我出身青樓檬果,卻偏偏與公主長(zhǎng)得像瓮孙,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子选脊,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,500評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容