Detaillierte Erläuterung des Angular-Root-Moduls und des Feature-Moduls

Dieser Artikel führt Sie durch die Funktionsvorlagen und Stammvorlagen in Angular. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Die Voraussetzung ist, dass Angular cli installiert ist. Der größte Teil der folgenden Dateierstellung basiert auf den Anweisungen von cliAngular 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 说明
• 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

  <span style="font-size: 20px;">Angular</span>Attributvorlage und Stammvorlage ( <span style="font-size: 20px;">AppModule</span>)

Der Unterschied ist Feature-Vorlagen können Anwendungen aufteilen, und mein persönliches Verständnis ähnelt der Komponentisierung

1 Die Anweisung zum Erstellen von Feature-Vorlagen lautet ng g module Article, und die hier verwendete ist ng g module Article - -routing, Sie können eine article-routing.module.ts-Routingdatei generieren2. Zu diesem Zeitpunkt wird CLI angezeigt in app Erstellen Sie einen weiteren Ordner article unter dem Ordner. Der Ordner article enthält zwei Dateien article.module.ts article-routing.module.ts

🎜3. Verwenden Sie ng g Component, um zwei Komponenten zu generieren, geben Sie die Vorlage als article und den angegebenen an Die Vorlage wird automatisch in article.modules.ts importiert und im Array declarations registriert. 🎜Hinweis: Löschen Sie nicht die in declarations registrierten Komponenten. code>, andernfalls kommt es zu einer teilweisen Spezifikation in der Komponente. Kann nicht verwendet werden🎜<ul> <li>ng g-Komponentenbeschreibung🎜</li> <li><code>ng g-Komponentenartikel/Artikelliste -m=Artikel, in <code>article Generieren Sie die Ordnerkomponente article-list 🎜

🎜ng g Komponente Article/article-create -m=article unter dem Ordner, in article Ordnerkomponenten article-create unter dem Ordner generieren 🎜🎜🎜🎜4 article.module.ts In der Funktion Modul, das von der CLI generiert wird, befinden sich oben in der Datei zwei JavaScript-Importanweisungen: Die erste importiert NgModule, was Ihnen die Verwendung des @NgModule-Dekorators genau wie im ermöglicht Root-Modul; das zweite importiert CommonModule, das viele allgemeine Anweisungen wie ngIf und ngFor bereitstellt. Funktionsmodule importieren CommonModule, nicht BrowserModule, das nur einmal in das Stammmodul importiert werden sollte. CommonModule enthält nur Informationen zu häufig verwendeten Direktiven wie ngIf und ngFor, die in den meisten Vorlagen verwendet werden, während BrowserModule Code> Die für den Browser vorgenommene Anwendungskonfiguration wird nur einmal verwendet. 🎜rrreee🎜Verwandte Empfehlungen: „<a href="https://www.php.cn/course/list/20.html" target="_blank" textvalue="angular Tutorial">Angular Tutorial🎜"🎜🎜5. <code>article-routing.module.ts, verschachtelte Konfiguration der Routing-Adresse. Die Adresseinstellung hier erfolgt, weil das aktuelle Modul im Root-Routing-Modul app-routing.module festgelegt wurde Das Routenpräfix ist article, sodass alle folgenden Routen direkt festgelegt werden können. Bringen Sie beim Zugriff das von der Root-Route festgelegte Routenpräfix mit. 🎜

• Zum Beispiel ist die Stammroute auf article eingestellt, und die Einstellung hier ist list. Um auf die Adresse zuzugreifen, müssen Sie article/list 🎜 🎜rrreee🎜6. Root-Modul app.mudles.ts, importieren Sie die Datei app-routing.module, um das globale Routing zu konfigurieren🎜rrreee🎜7 app-routing.module .ts

loadChildren ist ein Modul, das die Lazy-Loading-Funktion verwendet. Standardmäßig wird NgModule akut geladen, was bedeutet, dass es geladen wird Dies gilt für alle Module, unabhängig davon, ob sie sofort benötigt werden oder nicht. Erwägen Sie für größere Anwendungen mit vielen Routen die Verwendung von Lazy Loading – einem Muster, das NgModule bei Bedarf lädt. Lazy Loading reduziert die anfängliche Bundle-Größe und damit die Ladezeit. 🎜rrreee🎜8. Wenn Sie schließlich auf die Liste zugreifen und Routen unter Artikel erstellen möchten, geben Sie die Adresse Artikel/Liste ein 🎜<ul> <li>🎜<code>article/list🎜🎜🎜🎜

🎜oder article/create🎜🎜🎜🎜🎜🎜🎜Für weitere programmierbezogene Kenntnisse bitte Besuchen Sie: 🎜Programmiervideo 🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Angular-Root-Moduls und des Feature-Moduls. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!