Angular惰性加载的特性模块
一:Angular-CLI建立应用
cmd命令:ng new lazy-app --routing (创建一个名叫 lazy-app 的应用,而 --routing
标识生成了一个名叫 app-routing.module.ts
的文件)
cd lazy-app (进入lazy-app项目)
二:创建一个带路由的特性模块
cmd命令:ng generate module customers --routing (创建一个 customers
目录,其中有两个文件:CustomersModule
和 CustomersRoutingModule
)
备注:如果出现 Error: Cannot find module '@angular-devkit/core',那就 npm install @angular-devkit/core
:向特性模块添加组件
cmd命令:ng generate component customers/customer-list (在 customers
目录中创建一个名叫 customer-list
的文件夹,其中包含该组件的四个文件)
:再添加一个特性模块
cmd命令:ng generate module orders --routing
ng generate component orders/order-list
三:建立UI
app.component.html
<h1>
{{title}}
</h1> <button routerLink="/customers">Customers</button>
<button routerLink="/orders">Orders</button>
<button routerLink="">Home</button> <router-outlet></router-outlet>
四:配置路由
4.1:顶级路由:app-routing.module.ts (惰性加载的语法:loadChildren
后面紧跟着一个字符串,它指向模块路径,然后是一个 #
,然后是该模块的类名)
const routes: Routes = [
{
path: 'customers',
loadChildren: 'app/customers/customers.module#CustomersModule'
},
{
path: 'orders',
loadChildren: 'app/orders/orders.module#OrdersModule'
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
}
];
4.2:配置特性模块的路由
customers-routing.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { CustomerListComponent } from './customer-list/customer-list.component'; const routes: Routes = [
{
path: '',
component: CustomerListComponent
}
]; @NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CustomersRoutingModule { }
orders-routing.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { OrderListComponent } from './order-list/order-list.component'; const routes: Routes = [
{
path: '',
component: OrderListComponent
}
]; @NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class OrdersRoutingModule { }
五:正常工作
cmd命令:ng serve --open
初始化后台:
点击【Customers】后台
点击【Orders】后台
备注:forRoot()
包含的注入器配置是全局性的,比如对路由器的配置。forChild()
中没有注入器配置,只有像 RouterOutlet
和 RouterLink
这样的指令。
Angular惰性加载的特性模块的更多相关文章
- angular惰性加载拓展剖析
最近把一个比较旧的业余项目重新升级了下,将主文件进行了剥离,增加了些惰性加载的配置,将过程中一些零散的知识点做个总结,同时尽量深入原理实现层面. 项目环境: 前端框架:angular2.0.0-bet ...
- Angular - 预加载 Angular 模块
Angular - 预加载延迟模块 在使用路由延迟加载中,我们介绍了如何使用模块来拆分应用,在访问到这个模块的时候, Angular 加载这个模块.但这需要一点时间.在用户第一次点击的时候,会有一点延 ...
- Angular 懒加载找不到模块问题解决方法
问题: 懒加载无法找到模块 解决办法: 在app-routing.module.ts中引入该模块
- 关于angular5的惰性加载报错问题
之前为了测试一个模块优化问题,于是用angular-cli快速搭建了个ng5的脚手架demo,在应用惰性加载功能的时候发现浏览器报错如下: ERROR Error: Uncaught (in prom ...
- Angular2 ng2 如何配置惰性加载
需要修改至少四个地方1. 将子组件进行模块化操作2.生成子组件module .子组件router3.配置主路由 信息 改为loadChild4.配置appModule 删除引入 以product组件 ...
- angular懒加载的一些坑
写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包 ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形网格惰性加载节点
jQuery EasyUI 树形菜单 - 树形网格惰性加载节点 有时我们已经得到充分的分层树形网格(TreeGrid)的数据. 我们还想让树形网格(TreeGrid)按层次惰性加载节点. 首先,只加载 ...
- Windows加载器与模块初始化
本文是Matt Pietrek在1999年9月的MSJ杂志上发表的关于Windows加载器与模块初始化方面的文章.作者深入分析了LdrpRunInitialize璕outines例程的作用,用C语言写 ...
- 根据配置文件加载js依赖模块(JavaScript面试题)
面试题目 根据下面的配置文件 module=[ {'name':'jquery','src':'/js/lib/jquery-1.8.3.js'}, {'name':'swfobject','src' ...
随机推荐
- git比较本地仓库和远程仓库的差异(转)
转自:https://www.jianshu.com/p/6078a49900a4
- CAS 5.x搭建常见问题系列(1).未认证的授权服务
错误内容 错误信息如下: 未认证授权的服务 CAS的服务记录是空的,没有定义服务.希望通过CAS进行认证的应用程序必须在服务记录中明确定义 错误原因 CAS 5.x 默认情况下不支持HTTP的客户端接 ...
- 无法将文件xxx复制到xxx文件xxx正由另一进程使用,因此该进程无法访问此文件
对于VS2017,可以这样处理,开始——>运行——>tskill msbuild,然后重新生成即可.
- IdentityServer4实现OAuth2.0四种模式之客户端模式
一,准备内容 IdentityServer4 是Asp.net core的一个中间件,用于添加符合OpenId Connect和OAuth2.0规范的终端到Asp.net Core应用.在这里简单介绍 ...
- QSDK与OPENWRT区别
QSDK与OPENWRT区别 来源 https://www.jianshu.com/p/178ae18b2570 QSDK是一种在openwrt的基础上,加入了高通atheros芯片相关资料的一种环境 ...
- Euraka适合初学者的简单小demo
1. 创建父工程:父工程的的打包形式该为pom,删除其余无关的文件 修改父工程的pom文件内容如下: <?xml version="1.0" encoding="U ...
- node+mysql+vue+express项目搭建
第一步:项目搭建之前首先需要安装node环境和MySQL数据库. 在已经完成上述的条件下开始进行以下操作: npm install @vue/cli -g (-g 代表全局安装) 初始化项目 v ...
- 9.如何让一个div 上下左右居中?【CS
方法1:[绝对定位50%-本身50%] position:absolute; left:50%; top:50%; transform: tra ...
- js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html> <head> & ...
- gitlab异地备份并验证MD5值
最近公司发生了蛮多事情的,唉,咱也不管问啊,好好干活吧 需求 把gitlab的备份文件异地备份一份,备份无论失败还是成功通知某邮箱 实现思路 先rsync文件过去,判断rsync这个步骤有没有成功,失 ...