Angular学习之环境目录说明

##环境配置
angular的官方脚手架使用的angular cli，当然也可以使用webpack和gulp等第三方的脚手架搭建自己的开发环境。

Angular CLI是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。
要安装Angular CLI 首先要安装nodejs和npm，npm是nodejs的一个库管理工具，装nodejs时将自动安装，附上nodejs的安装包传送门。

安装完后，可在cmd命令行中输入 node -v 命令，查看是否已安装成功。打印当前版本则表示安装成功，安装完后没正确打印版本的话可能需要你重启下电脑再看。

执行以下命令，全局安装angular cli

npm install -g @angular/cli

##创建新项目
前面说angular cli 是一个强大的工具，依托它，可以直接命令行创建一个搭建好环境的空壳项目。
命令如下，创建过程可能会花费一点点时间。然后进入目录，启动项目

ng new my-app
cd my-app
ng server --open

当然，直接执行命令的话，创建的路径可能不是自己想要的地方。你可以使用命令行去跳转到自己想要的路径在执行。如果对命令行不熟悉的话，也可以手动打开想要路径，然后在文件夹显示路径的地方输入cmd打开命令行，这时命令行中的路径也是你想要的路径，可以直接执行创建命令了。

##项目目录
根目录

文件	说明
src/	存放项目应用代码的目录。 所有的 Angular 组件、模板、样式、图片以及你的应用所需的任何东西都在这里。 这个文件夹之外的文件都是为构建应用提供支持用的。
e2e/	在e2e/（end-to-end）目录下是测试文件，和src目录是相互独立，用来存放编写测试应用文件的路径。
node_modules/	Node.js 创建了这个文件夹，并且把 package.json 中列举的所有第三方模块都放在其中。
.editorconfig	编辑器的配置文件，大多数编辑器都支持，比如vscode。想了解更多
.gitignore	git的配置文件，用来编写在提交代码至版本库时将那些文件排除在外。
angular.json	Angular CLI 的配置文件。可以设置诸如启动路径，编译输出路径，资源路径，测试文件路径等一系列环境的默认配置配置信息
protractor.conf.js	给Protractor使用的端到端测试配置文件，当运行 ng e2e 的时候会用到它。
README.md	项目的基础文档，预先写入了 CLI 命令的信息。在项目中通过改写它来记录项目的一些信息，以便每个查看此仓库的人都能据此构建和启用你的应用。
tsconfig.json	typescript的配置文件，想了解更多
tslint.json	促使保持代码风格统一的配置，tslint和codelayzer会根据规则校验你的代码格式并提示你。

---

src目录
src目录存放的是应用目录，一般会根据应用创建多个应用文件夹，然后再根据应用创建出不同的模块和组件，服务，管道，路由等等。

文件	说明
app/app.component.{ts,html,css,spec.ts}	使用 HTML 模板、CSS 样式和单元测试定义 AppComponent 组件。 它是根组件，随着应用的成长它会成为一棵组件树的根节点。
app/app.module.ts	定义 AppModule，根模块为 Angular 描述如何组装应用。也是angular模块化的一种体现
assets/*	资源文件夹，可以放图片、声音、全局css等任何东西，在构建应用时，它们全都会拷贝到发布包中。
environments/*	这个文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。 比如你可能在生产环境中使用不同的 API 端点地址，或使用不同的统计 Token 参数。 甚至使用一些模拟服务。 所有这些，CLI 都替你考虑到了。
browserslist	一个配置文件，用来在不同的前端工具之间共享目标浏览器。
favicon.ico	每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。
index.html	这是别人访问你的网站是看到的主页面的 HTML 文件。 大多数情况下你都不用编辑它。 在构建应用时，CLI 会自动把所有 js 和 css 文件添加进去，所以你不必在这里手动添加任何 script 或 link 标签。
karma.conf.js	给Karma的单元测试配置，当运行 ng test 时会用到它。
polyfills.ts	不同的浏览器对 Web 标准的支持程度也不同。 腻子脚本（polyfill）能把这些不同点进行标准化。 你只要使用 core-js 和 zone.js 通常就够了，不过你也可以查看浏览器支持指南以了解更多信息。
styles.css	这里是你的全局样式。 大多数情况下，你会希望在组件中使用局部样式，以利于维护，不过那些会影响你整个应用的样式你还是需要集中存放在这里。一般放入到资源目录中
test.ts	这是单元测试的主要入口点。 它有一些你不熟悉的自定义配置，不过你并不需要编辑这里的任何东西。
tsconfig.{app	spec}.json
tslint.json	额外的 Linting 配置。当运行 ng lint 时，它会供带有 Codelyzer 的 TSLint 使用。 Linting 可以帮你们保持代码风格的一致性

在实际项目中，src目录结构较初始时都会有所变化。根据不同情况和项目的大小也不相同，一些合理的结构是可以一直被使用的，比如

1. 样式文件一般都会有全局样式文件，单个应用有自己的应用文件，而不是一个个组件一个文件。
2. 项目中包含的应用或者业务比较多的时候，根据应用或业务分出不同的模块来
3. 一些公用的工具、管道之类的也应该是封装到单独的模块，被所有业务模块使用。
4. 业务总是有交叉的，业务中的服务类总是不单单为一个业务服务，而将应用的服务类根据业务单独做成一个个模块，被需要他的业务模块引用也是不错的办法。