本篇文章给大家介绍一下angular10中的根模板和特性模板。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
前提是安装了 angular cli，以下的大部分文件创建都是依赖于cli提供的指令
angular中的特性模板和根模板(appmodule)区别在于特性模板可以把应用划分，个人理解类似于组件化
1、特性模板创建的指令ng g module article ，这里使用的是ng g module article --routing，可以生成一个article-routing.module.ts路由文件。【相关教程推荐：《angular教程》】
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 { }
5、article-routing.module.ts ，路由地址嵌套配置，这里的地址设置是因为在app-routing.module根路由模块中已经设置了当前模块的路由前缀为article，因此下面的路由都只用直接设置即可，访问时带上根路由设置的路由前缀。
例如，根路由设置的是article，这里设置的是list，访问地址需要使用article/listimport { 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
更多编程相关知识，请访问：编程教学！！
以上就是详解angular中的根模板和特性模板的详细内容。