詳解Angular中的根模板與特性模板

本篇文章為大家介紹一下Angular10中的根模板和特性模板。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

前提是安裝了Angular cli，以下的大部分檔案建立都是依賴 cli提供的指令

Angular中的特性模板與根模板(AppModule)

差別在於特性模板可以把應用程式劃分，個人理解類似於元件化

1、特性模板所建立的指令ng g module article ，這裡使用的是ng g module article --routing，可以產生一個article-routing.module.ts路由檔。 【相關教學推薦：《angular教學》】

2、此時CLI會在app資料夾下再建立一個資料夾article，article資料夾下包含兩個檔案article.module.ts和article-routing.module.ts

#3、使用ng g component 產生兩個元件，指定模板為article，指定的模板會自動匯入到article.modules.ts中，並且註冊到declarations數組，注意：不要刪除declarations中註冊的元件，不然會導致元件中部分指定無法使用

• #ng g component 說明
• ##ng g component article/article-list -m=article ，在article資料夾下生成article-list資料夾元件
• ng g component article/article-create -m=article ，在article資料夾下產生article-create資料夾元件

4、

article.module.ts 在CLI 產生的特性模組中，在檔案頂端有兩個JavaScript 的導入語句：第一個導入了NgModule，它像根模組中一樣讓你能使用@NgModule 裝飾器；第二個導入了CommonModule，它提供了許多像ngIf 和ngFor 這樣的常用指令。特性模組導入 CommonModule，而不是 BrowserModule，後者只應該在根模組中導入一次。 CommonModule 只包含常用指令的訊息，例如ngIf 和ngFor，它們在大多數模板中都要用到，而BrowserModule為瀏覽器所做的應用程式配置只會使用一次。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ArticleRoutingModule } from './article-routing.module';
import { ArticleListComponent } from './article-list/article-list.component';
import { ArticleCreateComponent } from './article-create/article-create.component';


@NgModule({
  declarations: [ArticleListComponent, ArticleCreateComponent],
  imports: [
    CommonModule,
    ArticleRoutingModule
  ]
})
export class ArticleModule { }

5、

article-routing.module.ts ，路由位址巢狀設定，這裡的位址設定是因為在app-routing.module 根路由模組中已經設定了目前模組的路由前綴為article，因此下面的路由都只用直接設定即可，存取時帶上根路由設定的路由前綴。

例如，根路由設定的是
• article，這裡設定的是list，存取位址需要使用article/list
• 

import { NgModule } from '@angular/core'
import { Routes, RouterModule } from '@angular/router'

import { ArticleListComponent } from './article-list/article-list.component'
import { ArticleCreateComponent } from './article-create/article-create.component'
const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: '',
                pathMatch:'full',
                redirectTo: '/article/list'
            },
            {
                path: 'list',
                component: ArticleListComponent
            },
            {
                path: 'create',
                component: ArticleCreateComponent
            }
        ]
    }
]
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class ArticleRoutingModule {}

6、根模組

app.mudles.ts，導入app-routing.module文件，可以配置全域的路由

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module'

import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

7、根模組的路由

app-routing.module.ts loadChildren是使用了惰性載入特性模組 默認情況下，NgModule都是急性加載的，也就是說它會在應用加載時盡快加載，所有模組都是如此，無論是否立即要用。對於帶有許多路由的大型應用，請考慮使用惰性載入 —— 一種按需載入 NgModule的模式。惰性加載可以減小初始包的尺寸，從而減少加載時間。

import { NgModule } from '@angular/core'
import { Routes, RouterModule } from '@angular/router'
import { LoginComponent } from './login/login.component'
const routes: Routes = [
    { path: 'login', component: LoginComponent },
    {
        path: 'article',
        loadChildren: () => import('./article/article.module').then((m) => m.ArticleModule)
    }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

8、最後如果想要存取

article下面的list和create路由在瀏覽器輸入位址article/list

• article/list
#或
• article/create
  

####更多程式相關知識，請造訪：###程式設計教學###！ ！ ###

以上是詳解Angular中的根模板與特性模板的詳細內容。更多資訊請關注PHP中文網其他相關文章！