Detailed explanation of root templates and attribute templates in Angular-JS Tutorial-php.cn

This article will introduce to you the root template and feature template inAngular10. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Detailed explanation of root templates and attribute templates in Angular

The premise is thatAngular cliis installed. Most of the following file creation depends onInstructions provided by cli

# Feature template and root template (AppModule`) in Angular`

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

1. Instructions for creating feature templates

ng g module article

, what is used here isng g module article --routingcan generate aarticle-routing.module.tsrouting file. [Related tutorial recommendations: "angular tutorial"]2. At this time,

CLI

will create another folder under theappfolderarticle,articlefolder contains two filesarticle.module.tsandarticle-routing.module.ts3. Use

ng g component

to generate two components, specify the template asarticle, and the specified template will be automatically imported intoarticle.modules.ts, and registered to thedeclarationsarray,Note: Do not delete the components registered indeclarations, otherwise some of the components specified in the component will not be available

, generated in thearticlefolderarticle-listFolder component
, generated under thearticlefolderarticle-createFolder component

article.module.ts

In the feature module generated by the CLI, there are two JavaScript imports at the top of the file Statement: The first one importsNgModule, which allows you to use the@NgModuledecorator just like in the root module; the second one importsCommonModule, which Many common directives likengIfandngForare provided. 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

article-routing.module.ts

,Routing address nested configuration, the address setting here is because inapp-routing.moduleThe routing prefix of the current module has been set in the root routing module toarticle, so the following routes only need to be set directly. When accessing, bring the routing prefix set by the root routing.

For example, the root route is set to

, the setting here islist, and the access address needs to bearticle/list

Detailed explanation of root templates and attribute templates in Angular

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, which can be configured 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, root module routing

app-routing.module.ts

loadChildrenuses thelazy loading feature moduledefault In this case,NgModuleis loaded urgently, which means that it will be loaded as soon as possible when the application is loaded. This is true for all modules, 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

Programming Teaching

! !

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