Angular入门到精通系列教程（15）- 目录结构（工程结构）推荐

最新推荐文章于 2024-10-23 10:04:13 发布
最新推荐文章于 2024-10-23 10:04:13 发布
阅读量6.8k 收藏
点赞数
分类专栏： Angular Angular入门到精通 文章标签： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43288714/article/details/113387562
版权
这篇教程详细介绍了Angular项目的目录结构推荐，遵循Angular风格指南。内容包括：工程结构的原则，如模块化、组件伴生文件组织；共享模块SharedModule的使用，用于存放可复用的组件、指令和管道；高级应用部分探讨了Angular库和工作空间的概念，以及如何通过Angular CLI创建应用和类库。总结强调了功能模块的惰性加载和预加载策略，以及共享模块的重要角色。

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

文章目录

环境:

  • Angular CLI: 11.0.6
  • Angular: 11.0.7
  • Node: 12.18.3
  • npm : 6.14.6
  • IDE: Visual Studio Code

1. 概要

实际的Angular项目，肯定不是一个简单的Hello World程序，会包含很多的功能，很多的文件。那么如何更好的组织这些文件呢？官方给了一个原则，可以供参考：
https://angular.io/guide/styleguide#application-structure-and-ngmodules。
下面，我们来通过一个例子具体解释一下。

2. 目录结构（工程结构）推荐

2.1. 总的原则

  1. 基于Angular CLI创建模块（module），组件（component）等等的内容；
  2. 源代码都放到src 文件夹下；
  3. 应用的根目录创建一个 NgModule, 并命名为app.module.ts（例如 /src/app，这个Angular CLI 会自动帮我们做)
  4. 组件具有多个伴生文件 (.ts、.html、.css 和 .spec)，建议为它创建一个文件夹;(Angular CLI 会自动帮我们做)
  5. 为每一组功能（特性区）创建一个模块（NgModule）；（这个也方便我们应用惰性
最低0.47元/天 解锁文章
掌握程序人生职业生涯成长密码：OKR领域学习全攻略
AI天才研究院
05-02 873
在技术快速迭代的软件开发领域，程序员面临技能更新压力、项目复杂度提升、职业路径模糊等挑战。传统KPI考核侧重结果量化，难以适应创新驱动的技术工作特性。OKR（Objective and Key Results）作为灵活高效的目标管理工具，通过「目标定义-关键成果拆解-动态追踪-复盘优化」的闭环，帮助技术人员清晰规划职业目标，提升执行效率，实现个人价值与组织目标的对齐。
1. SAP Fiori 和 SAP UI5 的区别和联系
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
07-13 1472
之所以很多朋友容易把 SAP Fiori 和 SAP UI5 混为一谈，是因为 SAP S/4HANA 这个旗舰级产品，里面包含的 Fiori App(Application 的缩写，中文意思即应用)，全部采用 SAP UI5 这个工具开发而成。SAP UI5 在 Fiori 应用开发技术领域固然占据了统治地位，但我们绝不能将这两个概念混为一谈。
angular 标准目录结构_Angular项目目录结构详解
weixin_39620273的博客
01-26 1125
首先看一下整体的目录结构：angular整体的目录结构可以看到，命令行工具自动生成了很多文件和目录，我们来说说这些目录是干什么的首层目录：【node_modules 】 第三方依赖包存放目录【e2e 】 端到端的测试目录 用来做自动测试的【src 】 应用源代码目录【.angular-cli.json 】 Angular命...
angular 目录结构
heidashou的专栏
07-06 152
1. I'm home. 我回来了。 　　2. I quit! 我不干了! 　　3. Let go! 放手! 　　4. Me too. 我也是。 　　5. My god! 天哪! 　　6. No way! 不行! 　　7. Come on. 来吧(赶快) 　　8. Hold on. 等一等。 　　9. I agree。 我同意。 　　10. Not bad. 还不错。 　　11. Not yet. 还没。 　　12. See you. 再见。 　　13. Shut up! 闭嘴! 　　14. So long
Angular项目目录结构
weixin_30390075的博客
07-14 150
前言：不支持MakeDown的博客园调格式的话，真的写到快o(╥﹏╥)o了，所以老夫还是转战到优快云吧，这边就不更新啦啦啦~ 优快云地址：https://blog.youkuaiyun.com/Night20181029比较麻烦就是要审核，┓(´∀`)┏ github地址：https://github.com/KKQQ9/Notes 掘金地址：https://juejin.im/user/5d...
angular的官方推荐项目结构
现在学习也不晚
11-13 1224
首先需要创建一个总的文件夹，比如mydamo的文件夹，里面放入所有项目需要的文件 然后第一层有两个文件夹，和一个json文件 app //文件夹，放主要编写的文件 node_modules //nodejs模块安装目录 package.json //nodejs的配置项文件主要的就是app的文件夹 css //样式文件夹 images //图片文件夹 js //js文件夹 framework
Angular项目目录结构设计
凉秋秋秋
11-29 654
目录结构 |- src |- app |- core |- permissions |- components |- services |- features |- home |- settings |- shared |- components |- services |- assets |- images |- icons |- static |- styles |- variable.less |- flex.less
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 4223
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
HTML5+CSS3+JavaScript网页设计案例课堂-课本源代码.zip
04-14
JavaScript库和框架，如jQuery、React、Vue和Angular，为开发复杂的Web应用程序提供了便利。 这个压缩包中的源代码可能包括多个HTML文件，它们代表了不同的网页结构和用HTML5元素构建的页面；CSS文件则展示了如何...
Angular项目文件结构及作用（初学）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
12-12 1147
最近初学了Angular.js介绍一下文件结构及目录。下图是新建项目得目录结构，下面来介绍一下目录得结构及作用。 第一层目录： 【node_modules 】 第三方依赖包存放目录（与vue,react作用相同） 【e2e 】 端到端的测试目录 用来做自动测试的 【src 】 应用源代码目录 【.angular-cli.json 】 Angular命令行工具的配置文件。后期可能会去修...
详解如何构建Angular项目目录结构
08-30
本篇文章主要介绍了详解如何构建Angular项目目录结构，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解Angular的8个主要构造块
12-08
Angular 主要分为八大构造块（也就是八个核心概念）：模块 (module)、组件 (component)、模板 (template)、元数据 (metadata)、数据绑定 (data binding)、指令 (directive)、服务 (service)、依赖注入 (dependency injection)。其中，最核心的一个概念就就组件。 1. 模块 (module) Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 Angular 模块或 NgModules。 每个Angular应用至少有一个模块（根模块），习惯上命名为AppModule。 根模
Angular : 项目文件夹src目录结构及作用
zouk‘s blogs
12-29 4784
序言：如果你想入门到精通Angular，首先必须要熟悉它的文件目录结构。参考：Angular中文文档链接正文： 新建项目文件后，会出现src和非src（这里我分为2类）。 src作用：存放应用代码（组件，模板，样式等等）。 非src作用：为构建应用提供支持用。 src 非src 最后： 如果想看各个文件或者文件夹的详细说明，请看官方文档（英文，中文），这个中文文档编写的非常牛逼，看中文
angular 架构概览和项目结构
晨曦博客
08-09 2344
angular 架构概览 angular架构概览 基本涉及常见重要的知识点： 模块 路由 组件 模板 服务 指令 管道 不同的类型，文件名通常会都按照一定的规范来命名，以便直接看出该文件的角色。 当然，文件命名只是给开发人员来方便维护、辨别，对于 Angular 来说，这些都是一份份的 ts 文件代码，所以，都需要在相对应的文件中加上一些装饰器比如： @Directive，@Pipe，@Component，@NgModel 等这些，才能够让 Angular 识别出该文件的角色、用..
Angular 企业实战开发 --- Angular 高级 -- NgRx
weixin_50983325的博客
06-10 877
15. NgRx 15.1 概述 NgRx 是 Angular 应用中实现全局状态管理的 Redux 架构解决方案。 @ngrx/store：全局状态管理模块 @ngrx/effects：处理副作用 @ngrx/store-devtools：浏览器调试工具，需要依赖 Redux Devtools Extension @ngrx/schematics：命令行工具，快速生成 NgRx 文件 @ngrx/entity：提高开发者在 Reducer 中操作数据的效率 @ngrx/router-store：将路由
Angular 15 独立组件详解
最新发布
m0_54944506的博客
10-23 1348
在 Angular 15 中，独立 APIs 正式稳定，开发人员可以使用独立组件开发各种组件、指令、管道和构建应用程序。独立 APIs 减少了在开发时对 ngModule 的依赖，提升了开发体验。目前，组件库 ngx-tethys 紧跟 Angular 脚步，现在已支持独立组件。独立组件提供了一种简化的方式来构建 Angular 应用程序。独立组件、指令和管道旨在通过减少对 NgModule 的需求来简化创作体验。现有应用程序可以选择性地以增量方式采用新的独立风格，而无需任何重大更改。
Angular 目录介绍
我爱吃烤鸡翅:)的博客
09-05 485
前言 本文是学习Angular企业级应用开发实践的笔记，以下内容大多截取自该书 src 文件目录详解 src | favicon.ico | index.html | main.ts | ployfills.ts | style.css | test.ts |--- app | app.component.css | app.component.html | app.component.spec...
Angular 2.0项目结构基本介绍
zhoulu001的专栏
11-01 2643
使用Angular-cli新建项目后，基本可以得到如下目录结构：     1.根模块         其中app.module.ts是该项目的一个根模块，使用@NgModule修饰，表面改Class是一个模块，declarations表示该模块包含的视图类，imports表示该模块需要其他模块导出的类，provider是模块包含的service，bootstrap包含该模块启动时，需要
angular15 路由传参
m0_54944506的博客
01-09 921
接收动态传参值： this.activateRoute.params.subscribe(params=>{});通过this.activateRoute.snapshot.paramMap.get()也能一次性获取传值。 跳转a组件。接收查询参数值： this.activateRoute.queryParams.subscribe(params=>{});二：在ts中实现路由跳转功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值