本篇文章帶大家來了解Angular中的特性模板和根模板。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
前提是安裝了Angular cli
,以下的大部分檔案建立都是依賴cli
提供的指令
<span style="font-size: 20px;">Angular</span>
#中的特性模板與根模板(<span style="font-size: 20px;">AppModule</span>
)
區別在於特性模板可以將應用程式劃分,個人理解類似於元件化
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 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根模組與特性模組的詳細內容。更多資訊請關注PHP中文網其他相關文章!