Detailed explanation of Angular root module and feature module-JS Tutorial-php.cn

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

Detailed explanation of Angular root module and feature module

The premise is thatAngular cliis installed. Most of the following file creation depends oncliProvided directives

AngularThe attribute template and root template (AppModule)

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

1. Feature templates The created commandng g module article, here isng g module article --routing, which can generate aarticle-routing.module.tsrouting file

2. At this time,CLIwill create another folderarticle,articlefile under theappfolder The folder contains two filesarticle.module.tsandarticle-routing.module.ts

3. Useng g componentto generate For two components, the specified template isarticle. The specified template will be automatically imported intoarticle.modules.tsand registered in thedeclarationsarray,Note: Do not delete the components registered indeclarations, otherwise some specifications in the components will become unusable

ng g component description
ng g component article/article-list -m=article, generatearticle-listfolder component
article
folder ##ng g component article/article-create -m=article, generatearticle-createfolder component## under thearticle
folder

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 importsNgModule, which The same as in the root module allows you to use the@NgModuledecorator; the second one importsCommonModule, which provides many functions likengIfandngForSuch common instructions. Feature modules importCommonModule, notBrowserModule, which should only be imported once in the root module.CommonModuleonly contains information about commonly used directives, such asngIfandngFor, which are used in most templates, whileBrowserModuleApplication configurations made for the browser are only used once.

import { NgModule } from &#39;@angular/core&#39;; import { CommonModule } from &#39;@angular/common&#39;; import { ArticleRoutingModule } from &#39;./article-routing.module&#39;; import { ArticleListComponent } from &#39;./article-list/article-list.component&#39;; import { ArticleCreateComponent } from &#39;./article-create/article-create.component&#39;; @NgModule({ declarations: [ArticleListComponent, ArticleCreateComponent], imports: [ CommonModule, ArticleRoutingModule ] }) export class ArticleModule { }

Copy after login

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 toarticlein theapp-routing.moduleroot 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

, the setting here islist, and the access address needs to bearticle/list Detailed explanation of Angular root module and feature module

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

Copy after login

app.mudles.ts

, import theapp-routing.modulefile to configure global routing

import { HttpClientModule } from &#39;@angular/common/http&#39;; import { NgModule } from &#39;@angular/core&#39;; import { FormsModule } from &#39;@angular/forms&#39;; import { BrowserModule } from &#39;@angular/platform-browser&#39;; import { AppRoutingModule } from &#39;./app-routing.module&#39; import { AppComponent } from &#39;./app.component&#39;; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpClientModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Copy after login

7. The routing of the root module

app-routing.module.ts

loadChildrenuses the lazy loading feature module. By default,NgModuleis 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 loadingNgModuleon demand. Lazy loading reduces the initial bundle size and therefore load time.

import { NgModule } from &#39;@angular/core&#39; import { Routes, RouterModule } from &#39;@angular/router&#39; import { LoginComponent } from &#39;./login/login.component&#39; const routes: Routes = [ { path: &#39;login&#39;, component: LoginComponent }, { path: &#39;article&#39;, loadChildren: () => import(&#39;./article/article.module&#39;).then((m) => m.ArticleModule) } ] @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {}

Copy after login

8. Finally, if you want to access the

list

andcreateroutes belowarticle, enter the addressarticle/list in the browser

article/list
##or
For more programming-related knowledge, please visit:

! !

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!