详解如何构建Angular项目目录结构

在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新的Angular项目，要想写项目，首先我们要先搞清楚项目的目录结构是怎样的，每个文件又有什么意义，文件中的代码又起到什么作用。

首先看一下整体的目录结构：

可以看到，命令行工具自动生成了很多文件和目录，我们来说说这些目录是干什么的

首层目录：

node_modules    第三方依赖包存放目录
e2e         端到端的测试目录 用来做自动测试的
src         应用源代码目录 
.angular-cli.json  Angular命令行工具的配置文件。后期可能会去修改它，引一些其他的第三方的包 比如jquery等
karma.conf.js    karma是单元测试的执行器，karma.conf.js是karma的配置文件
package.json    这是一个标准的npm工具的配置文件，这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新建项目的时候，等了半天就是在下载第三方依赖包。下载完成后会放在node_modules这个目录中，后期我们可能会修改这个文件。
protractor.conf.js 也是一个做自动化测试的配置文件
README.md      说明文件
tslint.json     是tslint的配置文件，用来定义TypeScript代码质量检查的规则，不用管它

src目录：

app目录        包含应用的组件和模块，我们要写的代码都在这个目录
assets目录      资源目录，存储静态资源的 比如图片
environments目录   环境配置。Angular是支持多环境开发的，我们可以在不同的环境下（开发环境，测试环境，生产环境）共用一套代码，主要用来配置环境的
index.html     整个应用的根html，程序启动就是访问这个页面
main.ts       整个项目的入口点，Angular通过这个文件来启动项目
polyfills.ts    主要是用来导入一些必要库，为了让Angular能正常运行在老版本下
styles.css     主要是放一些全局的样式
tsconfig.app.json  TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件
tsconfig.spec.json 不用管
test.ts       也是自动化测试用的
typings.d.ts    不用管

app目录（重点）

app目录是我们要编写的代码目录。我们写的代码都是放在这个目录。

一个Angular程序至少需要一个模块和一个组件。在我们新建项目的时候命令行已经默认生成出来了。

app.component.ts：这个文件表示组件，

组件是Angular应用的基本构建模块，可以理解为一段带有业务逻辑和数据的Html

我们来看看app.component.ts中的代码，并解释下代码的意义

下图是源代码，我只是把title的值给改了下

来看看每行代码的意义，有点乱，可以复制到编辑器上去看。

/*这里是从Angular核心模块里面引入了component装饰器*/
import {Component} from '@angular/core';

/*用装饰器定义了一个组件以及组件的元数据 所有的组件都必须使用这个装饰器来注解*/
@Component({
 /*组件元数据 Angular会通过这里面的属性来渲染组件并执行逻辑
 * selector就是css选择器，表示这个组件可以通过app-root来调用，index.html中有个<app-root>Loading...</app-root>标签，这个标签用来展示该组件的内容
 *templateUrl 组件的模板，定义了组件的布局和内容
 *styleUrls  该模板引用那个css样式
 * */
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
/*AppComponent本来就是一个普通的typescript类，但是上面的组件元数据装饰器告诉Angular，AppComponent是一个组件，需要把一些元数据附加到这个类上，Angular就会把AppComponent当组件来处理*/
export class AppComponent {
 /*这个类实际上就是该组件的控制器，我们的业务逻辑就是在这个类中编写*/
 title = '学习Angular';
}

组件相关的概念：

1.组件元数据装饰器（@Component）

简称组件装饰器，用来告知Angular框架如何处理一个TypeScript类.

Component装饰器包含多个属性，这些属性的值叫做元数据，Angular会根据这些元数据的值来渲染组件并执行组件的逻辑

2.模板（Template）

我们可以通过组件自带的模板来定义组件的外观，模板以html的形式存在，告诉Angular如何来渲染组件，一般来说，模板看起来很像html，但是我们可以在模板中使用Angular的数据绑定语法，来呈现控制器中的数据。

3.控制器（controller）

控制器就是一个普通的typescript类，他会被@Component来装饰，控制器会包含组件所有的属性和方法，绝大多数的业务逻辑都是写在控制器里的。控制器通过数据绑定与模板来通讯，模板展现控制器的数据，控制器处理模板上发生的事件。

装饰器，模板和控制器是组件的必备要素。还有一些可选的元素，比如：

输入属性（@inputs）:是用来接收外部传入的数据的,Angular的程序结构就是一个组件树，输入属性允许在组件树种传递数据

提供器（providers）：这个是用来做依赖注入的

生命周期钩子（LifeCycle Hooks）：一个组件从创建到销毁的过程中会有多个钩子会被触发，类似于Android中的Activity的生命周期

样式表：组件可以关联一些样式表

动画（Animations）： Angular提供了一个动画包来帮助我们方便的创建一些跟组件相关的动画效果，比如淡入淡出等

输出属性（@Outputs）：用来定义一些其他组件可能需要的事件或者用来在组件之间共享数据

简单来说，组件的中关系就如下图所示

下面我们来看看模块文件

app.module.ts：这个文件表示模块

与AppComponent类似，模块也需要装饰器来装饰。

好了，新项目的目录结构就是这样!

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# angular  # cli  # 目录结构  # angularjs  # angular ngClick阻止冒泡使用默认行为的方法  # AngularJS基础 ng-click 指令示例代码  # angular-cli修改端口号【angular2】  # AngularJS基础 ng-dblclick 指令用法  # 详解Angular-Cli中引用第三方库  # Angular 4环境准备与Angular cli创建项目详解  # angular ng-click防止重复提交实例  # Angular2使用Angular-CLI快速搭建工程（二）  # 详解从angular-cli：1.0.0-beta.28.3升级到@angular/cli：1.0.  # Angular2安装angular-cli  # 第三方  # 配置文件  # 命令行  # 我们可以  # 来看看  # 都是  # 放在  # 多个  # 绑定  # 是用来  # 一个普通  # 源代码  # 后期  # 是一个  # 样式表  # 是在  # 新建项目  # 会有  # 好了  # 有个 

相关文章： php条件判断怎么写_ifelse和switchcase的使用区别【对比】  建站之星下载版如何获取与安装？  c++23 std::expected怎么用 c++优雅处理函数错误返回【详解】  如何访问已购建站主机并解决登录问题？  陕西网站制作公司有哪些,陕西凌云电器有限公司官网？  香港服务器网站卡顿？如何解决网络延迟与负载问题？  网站建设设计制作营销公司南阳,如何策划设计和建设网站？  ppt制作免费网站有哪些,ppt模板免费下载网站？  建站168自助建站系统：快速模板定制与SEO优化指南  建站中国官网：模板定制+SEO优化+建站流程一站式指南  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的，背景音乐、音效等？  学校为何禁止电信移动建设网站？  如何快速重置建站主机并恢复默认配置？  浅析上传头像示例及其注意事项  建站之星CMS建站配置指南：模板选择与SEO优化技巧  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  网站制作专业公司有哪些,如何制作一个企业网站，建设网站的基本步骤有哪些？  制作网站的公司有哪些,做一个公司网站要多少钱？  建站之星安全性能如何？防护体系能否抵御黑客入侵？  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  如何在景安服务器上快速搭建个人网站？  建站之星如何快速生成多端适配网站？  齐河建站公司：营销型网站建设与SEO优化双核驱动策略  建站VPS能否同时实现高效与安全翻墙？  洛阳网站制作公司有哪些,洛阳的招聘网站都有哪些？  北京企业网站设计制作公司,北京铁路集团官方网站？  IOS倒计时设置UIButton标题title的抖动问题  建站之星如何保障用户数据免受黑客入侵？  如何通过建站之星自助学习解决操作问题？  黑客入侵网站服务器的常见手法有哪些？  PHP正则匹配日期和时间(时间戳转换)的实例代码  建站之星北京办公室：智能建站系统与小程序生成方案解析  清单制作人网站有哪些,近日“兴风作浪的姑奶奶”引起很多人的关注这是什么事情？  如何选择高效可靠的多用户建站源码资源？  如何选择美橙互联多站合一建站方案？  在线流程图制作网站手机版,谁能推荐几个好的CG原画资源网站么？  上海网站制作开发公司,上海买房比较好的网站有哪些？  如何用PHP快速搭建高效网站？分步指南  建站主机核心功能解析：服务器选择与网站搭建流程指南  如何选择网络建站服务器？高效建站必看指南  已有域名如何快速搭建专属网站？  如何彻底删除建站之星生成的Banner？  股票网站制作软件,网上股票怎么开户？  html制作网站的步骤有哪些,iapp如何添加网页？  高性能网站服务器部署指南：稳定运行与安全配置优化方案  ,交易猫的商品怎么发布到网站上去？  建站之星安装后如何配置SEO及设计样式？  如何做静态网页,sublimetext3.0制作静态网页？  宝塔面板创建网站无法访问？如何快速排查修复？  如何通过cPanel快速搭建网站？