Angular根模塊與特性模塊的示例分析

這篇文章主要介紹Angular根模塊與特性模塊的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

前提是安裝了 Angular cli，以下的大部分文件創建都是依賴于cli提供的指令

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

區別在于特性模板可以把應用劃分，個人理解類似于組件化

1、特性模板創建的指令ng g module article ，這里使用的是ng g module article --routing，可以生成一個article-routing.module.ts路由文件

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

相關推薦：《angular教程》

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根模塊與特性模塊的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！