angular 框架搭建步骤

最新推荐文章于 2025-04-16 11:40:30 发布

railsbug

最新推荐文章于 2025-04-16 11:40:30 发布

阅读量1.2k

点赞数

分类专栏： angular5

本文链接：https://blog.csdn.net/railsbug/article/details/79445236

版权

angular5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个具体的模块化设计案例，包括使用懒加载提高应用性能的方法。通过对比一次性加载与懒加载的不同实现方式，展示了如何组织模块及其组件以优化用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们的计划为：

一个模块中包含多个页面
- a
  - a.module.ts(一次性加载所有组件)
  - a1Component
  - a2Component
- b
  - b.module.ts（懒加载所有组件）
  - b1Component
  - b2Component

ng new myPro0001
ng g c main --spec=false
ng g c main/content --spec=false
ng g c main/footer --spec=false
ng g c main/header --spec=false
ng g c main/navbar --spec=false

主体框架搭建好开始content内部搭建

ng g m main/content/a
ng g c main/content/a/a1Component --spec=false
ng g c main/content/a/a2Component --spec=false

ng g m main/content/b
ng g c main/content/b/b1Component --spec=false
ng g c main/content/b/b2Component --spec=false

ng g m main/content/c
ng g m main/content/c/c1

app.component.html

<app-main></app-main>

app.module.ts

导入MainModule

main.module.ts

导出MainComponent
导入RouterModule 是因为content.component.html用到了router-outlet

imports:[
RouterModule
],
  exports:[
    MainComponent,
  ]