Detailed explanation of Angular root module and feature module

This article will take you through the feature templates and root templates in Angular. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

The premise is that Angular cli is installed. Most of the following file creation depends on cliProvided directives

<span style="font-size: 20px;">Angular</span>The attribute template and root template (<span style="font-size: 20px;">AppModule</span> )

The difference is that feature templates can divide applications. My personal understanding is similar to componentization

1. Feature templates The created command ng g module article, here is ng g module article --routing, which can generate a article-routing.module.ts routing file

2. At this time, CLI will create another folder article, article file under the app folder The folder contains two files article.module.ts and article-routing.module.ts

3. Use ng g component to generate For two components, the specified template is article. The specified template will be automatically imported into article.modules.ts and registered in the declarations array, Note: Do not delete the components registered in declarations, otherwise some specifications in the components will become unusable

• ng g component description
• ng g component article/article-list -m=article, generate article-list folder component
# under the
• article

  folder ##ng g component article/article-create -m=article, generate article-create folder component## under the article

  folder
#4,

article.module.ts

In the feature module generated by the CLI, there are two JavaScript import statements at the top of the file: the first imports NgModule, which The same as in the root module allows you to use the @NgModule decorator; the second one imports CommonModule, which provides many functions like ngIf and ngFor Such common instructions. Feature modules import CommonModule, not BrowserModule, which should only be imported once in the root module. CommonModule only contains information about commonly used directives, such as ngIf and ngFor, which are used in most templates, while BrowserModule Application configurations made for the browser are only used once. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import { NgModule } from &amp;#39;@angular/core&amp;#39;; import { CommonModule } from &amp;#39;@angular/common&amp;#39;; import { ArticleRoutingModule } from &amp;#39;./article-routing.module&amp;#39;; import { ArticleListComponent } from &amp;#39;./article-list/article-list.component&amp;#39;; import { ArticleCreateComponent } from &amp;#39;./article-create/article-create.component&amp;#39;; @NgModule({ declarations: [ArticleListComponent, ArticleCreateComponent], imports: [ CommonModule, ArticleRoutingModule ] }) export class ArticleModule { }</pre><div class="contentsignin">Copy after login</div></div>Related recommendations: "

angular tutorial

"5,

article-routing.module.ts

, routing address nested configuration, here The address setting is because the routing prefix of the current module has been set to article in the app-routing.module root routing module, so the following routes can only be set directly. Visit with the routing prefix set by the root route.

For example, the root route is set to

article
• , the setting here is list, and the access address needs to be 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. Root module

app.mudles.ts

, import the app-routing.module file to configure global routing <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">import { HttpClientModule } from &amp;#39;@angular/common/http&amp;#39;; import { NgModule } from &amp;#39;@angular/core&amp;#39;; import { FormsModule } from &amp;#39;@angular/forms&amp;#39;; import { BrowserModule } from &amp;#39;@angular/platform-browser&amp;#39;; import { AppRoutingModule } from &amp;#39;./app-routing.module&amp;#39; import { AppComponent } from &amp;#39;./app.component&amp;#39;; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpClientModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }</pre><div class="contentsignin">Copy after login</div></div>7. The routing of the root module

app-routing.module.ts

loadChildren uses the lazy loading feature module. By default, NgModule is Urgently loaded, which means it will be loaded as soon as the application loads, this is true for all modules, regardless of whether they are needed immediately or not. For larger applications with many routes, consider using lazy loading - a pattern of loading NgModule on demand. Lazy loading reduces the initial bundle size and therefore load time. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">import { NgModule } from &amp;#39;@angular/core&amp;#39; import { Routes, RouterModule } from &amp;#39;@angular/router&amp;#39; import { LoginComponent } from &amp;#39;./login/login.component&amp;#39; const routes: Routes = [ { path: &amp;#39;login&amp;#39;, component: LoginComponent }, { path: &amp;#39;article&amp;#39;, loadChildren: () =&gt; import(&amp;#39;./article/article.module&amp;#39;).then((m) =&gt; m.ArticleModule) } ] @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {}</pre><div class="contentsignin">Copy after login</div></div>8. Finally, if you want to access the

list

and create routes below article, enter the address article/list in the browser

• article/list

  

  ##or
article /create

• 

  For more programming-related knowledge, please visit:
programming video

! !

The above is the detailed content of Detailed explanation of Angular root module and feature module. For more information, please follow other related articles on the PHP Chinese website!