谈谈Angular模块的使用以及懒加载

相关教程推荐：angularjs（视频教程）
一、angular 内置模块
二、angular 自定义模块
当我们项目比较小的时候可以不用自定义模块。但是当我们项目非常庞大的时候把所有的组 件都挂载到根模块里面不是特别合适。所以这个时候我们就可以自定义模块来组织我们的项 目。并且通过 angular 自定义模块可以实现路由的懒加载。
ng g module mymodule
新建一个 user 模块
ng g module module/user新建一个 user 模块下的根组件
ng g component module/user新建一个 user 模块下的 address,order,profile 组件
ng g component module/user/components/addressng g component module/user/components/orderng g component module/user/components/profile如何在根模块挂载 user 模块呢？
在 app 根组件的模板文件 app.component.html 里 引用 user 组件会报错
需要如下处理才可以被访问
在 app.module.ts 引入模块
user 模块暴露出 要被外界访问到的组件
在根模板 app.component.html 里引入
<app-user></app-user>如果需要在根组件里直接 使用 app-address 组件，也是需要先在 user 模块 user.module.ts 暴露
/暴露组件 让其他模块里面可以使用暴露的组件/
exports:[usercomponent,addresscomponent]
如何在根模块挂载 product 模块呢？
同上
创建 user 模块下的服务
创建
ng g service module/user/services/common
在 user 模块引入服务
user.module.ts
配置路由实现模 块懒加载
创建模块：
ng g module module/user --routingng g module module/article --routingng g module module/product --routing创建组件：
ng g component module/userng g component module/user/components/profileng g component module/user/components/orderng g component module/articleng g component module/article/components/articlelist ng g component module/article/components/infong g component module/productng g component module/product/components/plistng g component module/product/components/pinfo这里先以article为例讲解：
angular配置懒加载
在angular中路由即能加载组件又能加载模块，而我们说的懒加载实际上就是加载模块，目前还没有看到懒加载组件的例子。
加载组件使用的是component关键字
加载模块则是使用loadchildren关键字
1. 在app文件夹下 新建 app-routing.module.ts
内容如下：
import { ngmodule } from '@angular/core';import { routes, routermodule } from '@angular/router';@ngmodule({ imports: [routermodule.forroot(routes)], exports: [routermodule]})export class approutingmodule { }forroot是用在根模块加载路由配置，
而forchild是用在子模块加载路由配置。
注意：需要在根模板 app.module.ts里导入approutingmodule模块
import { approutingmodule } from './app-routing.module';...imports: [ approutingmodule,]2. 在子模块里配置路由
在\\\\module\\\\article\\\\article-routing.module.ts里配置路由
import { ngmodule } from '@angular/core'; import { routes, routermodule } from '@angular/router'; // import {articlecomponent} from './article.component'; const routes: routes = [ // { // path:'', // component:articlecomponent // } ]; @ngmodule({ imports: [routermodule.forchild(routes)], exports: [routermodule] }) export class articleroutingmodule { }也可以在新建项目的时候 就把路由的模块加上，可以省去上面的 配置
在 article模块的 article-routing.module.ts配置路由
.....import {articlecomponent} from './article.component';const routes: routes = [ { path:'', component:articlecomponent }];......3. 在app的路由模块进行配置路由
const routes: routes = [ { path:'article', //写法一： loadchildren:'./module/article/article.module#articlemodule' //写法二 // loadchildren: () => import('./module/user/user.module').then( m => m.usermodule) }, // { // path:'user',loadchildren:'./module/user/user.module#usermodule' // }, // { // path:'product',loadchildren:'./module/product/product.module#productmodule' // }, { path:'',redirectto:'article' }];如果在之前新建模块的时候没有加上–routing,，需要配置模块的路由
product模块
product的路由：module\\\\product\\\\product-routing.module.ts
import { ngmodule } from '@angular/core';import { routes, routermodule } from '@angular/router';import {productcomponent} from './product.component';const routes: routes = [ { path:'', component:productcomponent }];@ngmodule({ imports: [routermodule.forchild(routes)], exports: [routermodule]})export class productroutingmodule { }product的模块：
module\\\\product\\\\product.module.ts
import { productroutingmodule } from './product-r

极品单词Rapt.com域名，微软仅以25,000美元就将其出售?
如何利用新域名尾缀提升品牌推广 域名跟品牌有何关系
在哪里可以申请商标
更新营业执照-备案平台
这个网站正常运营现在打不开了
【蚌埠网站建设】企业模板网站在优化时应注意什么？
云服务器挂游戏掉了
香港云都网络以全方位优势打造优质云服务器应用解决方案