环境配置
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目录结构较初始时都会有所变化。根据不同情况和项目的大小也不相同，一些合理的结构是可以一直被使用的，比如
- 样式文件一般都会有全局样式文件，单个应用有自己的应用文件，而不是一个个组件一个文件。
- 项目中包含的应用或者业务比较多的时候，根据应用或业务分出不同的模块来
- 一些公用的工具、管道之类的也应该是封装到单独的模块，被所有业务模块使用。
- 业务总是有交叉的，业务中的服务类总是不单单为一个业务服务，而将应用的服务类根据业务单独做成一个个模块，被需要他的业务模块引用也是不错的办法。