首页
|
新闻
|
新品
|
文库
|
方案
|
视频
|
下载
|
商城
|
开发板
|
数据中心
|
座谈新版
|
培训
|
工具
|
博客
|
论坛
|
百科
|
GEC
|
活动
|
主题月
|
电子展
注册
登录
论坛
博客
搜索
帮助
导航
默认风格
uchome
discuz6
GreenM
»
MCU 单片机技术
»
PowerPC
» 在 Angular 4 中加载功能模块(2)练习 1:贪婪加载
返回列表
回复
发帖
发新话题
发布投票
发布悬赏
发布辩论
发布活动
发布视频
发布商品
在 Angular 4 中加载功能模块(2)练习 1:贪婪加载
发短消息
加为好友
look_w
当前离线
UID
1066743
帖子
8283
精华
0
积分
4142
阅读权限
90
在线时间
233 小时
注册时间
2017-6-23
最后登录
2019-5-18
论坛元老
UID
1066743
1
#
打印
字体大小:
t
T
look_w
发表于 2018-11-21 19:30
|
只看该作者
在 Angular 4 中加载功能模块(2)练习 1:贪婪加载
练习 1:贪婪加载示例应用程序目前有两个模块:AppModule 和 BaseModule。AppModule 是根模块,BaseModule 是功能模块。BaseModule 包含两个功能区域:Markets 和 Sports。我们指定对这些应用程序执行贪婪加载,所以 AppModule 会在应用程序启动时调用 BaseModule。
让我们来分析一下该应用程序:
如果尚未下载源代码,请下载它。
将 Angular4BaseModules 源文件(位于 Angular4TutorialSrc.zip 中)解压到一个空目录位置。我的目录名为 …/fm。
转到 …/fm 目录并输入命令 npm i。这会在 …/fm 文件夹中创建 node_modules 目录,即 …/fm/node_modules。
运行命令 ng serve。
您会看到应用程序在默认端口 4200 中成功运行,以及一条与此消息类似的消息:
图 1. 应用程序运行在端口 4200
ng 是一条 Angular CLI 命令,您将使用它构建和处理应用程序代码。打开 Chrome 浏览器并输入 URL
http://localhost:4200
。您会看到该应用程序正在运行。如果单击 Home 图标,将会看到 Markets 的功能区域:
图 2. Markets 的用户界面
如果单击 Sports,将会看到 Sports 的功能区域:
图 3. Sports 的用户界面
现在转到 fm/src/app 目录中的应用程序代码。这是该目录的快照。
图 4. 应用程序目录结构
在您的应用程序目录中,打开文件 app.component.html。用户单击 Markets 链接时,应用程序会调用 /markets 路径。用户单击 Sports 链接时,应用程序会调用 /sports 路径。
图 5. 主应用程序中的路径
打开文件 app-routing.module.ts,如下所示。
图 6. app-routing.module.ts
在调用 /markets 和 /sports 路径时,会调用 MarketComponent 和 SportsComponent。如果未指定路径,数组中的第一项会重定向到 /markets 路径。
要确认目前实现的应用程序功能,可在浏览器中返回到
http://localhost:4200
。在 Windows 机器上,按下
Fn+F12
。在 Mac 机器上,按下
Command->Option->i
。现在您会看到 Chrome 开发人员工具 GUI。查看 Sources/top/ng:// 部分,然后重新加载 URL。如图 7 所示,您会看到在重启应用程序时自动加载了 AppModule 和 BaseModule。
图 7. 在 Google Chrome 开发人员工具中查看源代码
收藏
分享
评分
回复
引用
订阅
TOP
返回列表
微波在线
电商论坛
Pine A64
资料下载
方案分享
FAQ
行业应用
消费电子
便携式设备
医疗电子
汽车电子
工业控制
热门技术
智能可穿戴
3D打印
智能家居
综合设计
示波器技术
存储器
电子制造
计算机和外设
软件开发
分立器件
传感器技术
无源元件
资料共享
PCB综合技术
综合技术交流
EDA
MCU 单片机技术
ST MCU
Freescale MCU
NXP MCU
新唐 MCU
MIPS
X86
ARM
PowerPC
DSP技术
嵌入式技术
FPGA/CPLD可编程逻辑
模拟电路
数字电路
富士通半导体FRAM 铁电存储器“免费样片”使用心得
电源与功率管理
LED技术
测试测量
通信技术
3G
无线技术
微波在线
综合交流区
职场驿站
活动专区
在线座谈交流区
紧缺人才培训课程交流区
意见和建议