本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家介绍一下Angular 模块的使用和懒加载。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
相关推荐:《angular教程》
一、Angular 内置模块
二、Angular 自定义模块
当我们项目比较小的时候可以不用自定义模块。但是当我们项目非常庞大的时候把所有的组 件都挂载到根模块里面不是特别合适。所以这个时候我们就可以自定义模块来组织我们的项 目。并且通过 Angular 自定义模块可以实现路由的懒加载。
ng g module mymodule
新建一个 user 模块
新建一个 user 模块下的根组件
1 | ng g component module/user
|
新建一个 user 模块下的 address,order,profile 组件
1 2 3 | ng g component module/user/components/address
ng g component module/user/components/order
ng g component module/user/components/profile
|
如何在根模块挂载 user 模块呢?
在 app 根组件的模板文件 app.component.html 里 引用 user 组件会报错
需要如下处理才可以被访问
1、在 app.module.ts 引入模块
2、user 模块暴露出 要被外界访问到的组件
3、在根模板 app.component.html 里引入
如果需要在根组件里直接 使用 app-address 组件,也是需要先在 user 模块 user.module.ts 暴露
/暴露组件 让其他模块里面可以使用暴露的组件/
exports:[UserComponent,AddressComponent]
如何在根模块挂载 product 模块呢?
同上
创建 user 模块下的服务
1、创建
1 | ng g service module/user/services/common
|
2、在 user 模块引入服务
配置路由实现模 块懒加载
创建模块:
1 2 3 | ng g module module/user --routing
ng g module module/article --routing
ng g module module/product --routing
|
创建组件:
1 2 3 4 5 6 7 8 9 10 | ng g component module/user
ng g component module/user/components/profile
ng g component module/user/components/order
ng g component module/article
ng g component module/article/components/articlelist ng g component module/article/components/info
ng g component module/product
ng g component module/product/components/plist
ng g component module/product/components/pinfo
|
这里先以article为例讲解:
angular配置懒加载
在angular中路由即能加载组件又能加载模块,而我们说的懒加载实际上就是加载模块,目前还没有看到懒加载组件的例子。
加载组件使用的是component关键字
加载模块则是使用loadChildren关键字
1. 在app文件夹下 新建 app-routing.module.ts
内容如下:
1 2 3 4 5 6 7 | 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模块
1 2 3 4 5 | import { AppRoutingModule } from './app-routing.module' ;
...
imports: [
AppRoutingModule,
]
|
2. 在子模块里配置路由
在\module\article\article-routing.module.ts里配置路由
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | import { NgModule } from '@angular/core' ;
import { Routes, RouterModule } from '@angular/router' ;
const routes: Routes = [
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ArticleRoutingModule { }
|
也可以在新建项目的时候 就把路由的模块加上,可以省去上面的 配置
在 article模块的 article-routing.module.ts配置路由
1 2 3 4 5 6 7 8 9 10 11 | .....
import {ArticleComponent} from './article.component' ;
const routes: Routes = [
{
path: '' ,
component:ArticleComponent
}
];
......
|
3. 在app的路由模块进行配置路由
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | const routes: Routes = [
{
path: 'article' ,
loadChildren: './module/article/article.module#ArticleModule'
},
{
path: '**' ,redirectTo: 'article'
}
];
|
如果在之前新建模块的时候没有加上?Crouting,,需要配置模块的路由
product模块
product的路由:module\product\product-routing.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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
1 2 3 4 5 | import { ProductRoutingModule } from './product-routing.module' ;
imports: [
ProductRoutingModule
],
|
user模块
user的路由: \module\user\user-routing.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | import { NgModule } from '@angular/core' ;
import { Routes, RouterModule } from '@angular/router' ;
import {UserComponent} from './user.component' ;
const routes: Routes = [
{
path: '' ,
component:UserComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UserRoutingModule { }
|
user的模块: \module\user\user.module.ts
1 2 3 4 5 | import {UserRoutingModule} from './user-routing.module' ; +
imports: [
UserRoutingModule +
],
|
RouterModule.forRoot() 和 RouterModule.forChild()
RouterModule对象为提供了两个静态的方法:forRoot()和forChild()来配置路由信息。
RouterModule.forRoot()方法用于在主模块中定义主要的路由信息,RouterModule.forChild()与 Router.forRoot()方法类似,但它只能应用在特性模块中。
即根模块中使用forRoot(),子模块中使用forChild()。
配置子路由
1、在商品模块的路由product-routing.module.ts 配置子路由
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import { PlistComponent } from './components/plist/plist.component' ;
import { CartComponent } from './components/cart/cart.component' ;
import { PinfoComponent } from './components/pinfo/pinfo.component' ;
const routes: Routes = [
{
path: '' ,
component:ProductComponent,
children:[
{path: 'cart' ,component:CartComponent},
{path: 'pcontent' ,component:PinfoComponent}
]
},
{path: 'plist' ,component:PlistComponent}
];
|
2、在商品模块的模板product.component.html 添加router-outlet
1 | <router-outlet></router-outlet>
|
3、在页面app.component.html添加菜单,方便跳转
1 | <a [routerLink]= "['/product']" >商品模块</a><a [routerLink]= "['/product/plist']" >商品列表</a>
|
更多编程相关知识,请访问:编程视频!!
以上就是深入了解Angular中的模块和懒加载的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
浅析Angular路由中的懒加载、守卫、动态参数
Angular中的firebase身份验证(代码示例)
13个关于Angular的前端面试题(总结)
Angular中怎么导出表格excel表格?
浅谈Angular中插槽的用法
详解Angular中的路由及其用法
分享Angular中关于表单的一些知识点
浅谈Angular中父子组件间怎么传递数据
浅谈Angular如何借助第三方组件和懒加载技术进行性能优化
Angular与Angularjs的简单比较
更多相关阅读请进入《Angular》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 深入了解Angular中的模块和懒加载