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

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

成都創(chuàng)新互聯(lián)公司 - 電信內(nèi)江機(jī)房，四川服務(wù)器租用，成都服務(wù)器租用，四川網(wǎng)通托管,綿陽服務(wù)器托管，德陽服務(wù)器托管，遂寧服務(wù)器托管，綿陽服務(wù)器托管，四川云主機(jī)，成都云主機(jī)，西南云主機(jī)，電信內(nèi)江機(jī)房，西南服務(wù)器托管，四川/成都大帶寬，服務(wù)器機(jī)柜，四川老牌ＩＤＣ服務(wù)商

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

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

區(qū)別在于特性模板可以把應(yīng)用劃分，個(gè)人理解類似于組件化

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

2、此時(shí)CLI會(huì)在app文件夾下再創(chuàng)建一個(gè)文件夾article，article文件夾下包含兩個(gè)文件article.module.ts和article-routing.module.ts

3、使用ng g component 生成兩個(gè)組件，指定模板為article，指定的模板會(huì)自動(dòng)導(dǎo)入到article.modules.ts中，并且注冊(cè)到declarations數(shù)組，注意：不要?jiǎng)h除declarations中注冊(cè)的組件，不然會(huì)導(dǎo)致組件中部分指定無法使用

  • 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 生成的特性模塊中，在文件頂部有兩個(gè) JavaScript 的導(dǎo)入語句：第一個(gè)導(dǎo)入了 NgModule，它像根模塊中一樣讓你能使用 @NgModule 裝飾器；第二個(gè)導(dǎo)入了 CommonModule，它提供了很多像 ngIf 和 ngFor 這樣的常用指令。 特性模塊導(dǎo)入 CommonModule，而不是 BrowserModule，后者只應(yīng)該在根模塊中導(dǎo)入一次。 CommonModule 只包含常用指令的信息，比如 ngIf 和 ngFor，它們?cè)诖蠖鄶?shù)模板中都要用到，而 BrowserModule 為瀏覽器所做的應(yīng)用配置只會(huì)使用一次。

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

相關(guān)推薦：《angular教程》

5、article-routing.module.ts ，路由地址嵌套配置，這里的地址設(shè)置是因?yàn)樵?code>app-routing.module根路由模塊中已經(jīng)設(shè)置了當(dāng)前模塊的路由前綴為article，因此下面的路由都只用直接設(shè)置即可，訪問時(shí)帶上根路由設(shè)置的路由前綴。

  • 例如，根路由設(shè)置的是article，這里設(shè)置的是list，訪問地址需要使用article/listAngular根模塊與特性模塊的示例分析

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，導(dǎo)入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是使用了惰性加載特性模塊 默認(rèn)情況下，NgModule都是急性加載的，也就是說它會(huì)在應(yīng)用加載時(shí)盡快加載，所有模塊都是如此，無論是否立即要用。對(duì)于帶有很多路由的大型應(yīng)用，考慮使用惰性加載 —— 一種按需加載 NgModule的模式。惰性加載可以減小初始包的尺寸，從而減少加載時(shí)間。

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

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

  • 或者article/create

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

以上是“Angular根模塊與特性模塊的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁標(biāo)題：Angular根模塊與特性模塊的示例分析
文章來源：http://muchs.cn/article44/gediee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、建站公司、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、全網(wǎng)營銷推廣、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)