前言
涉足Angular是从1.x的版本，几年间Angular已经从1.x迭代到了2.x、4.x在到现在的5.0， 发展非常的迅速，性能也得到了很大的提升，接下来我们会逐步带大家快速了解一下Angular 5.x的使用。
安装CLI
Angular 2.0开始提供了CLI命令工具，可以方便的管理和创建工程，这个CLI我们可以使用如下命令安装：
sudo npm install -g @angular/cli
注意：Angular CLI对Node 的版本有所要求（node 6.9.x and npm 3.x.x ），所以大家需要确认自己的Node版本，查看是否有警告信息：
ng --version
ng就是angular提供给我们的命令，接下来我们使用它管理项目。
创建工程
打开你的命令终端，使用如下命令创建一个工程：
ng new DemoApp
这里需要耐心的等一下，因为需要通过npm下载所有的依赖类库。
运行工程
创建好一个工程之后，我们运行一下：
cd DemoApp
ng serve --o
此时，会自动打开浏览器运行，–o即为open的意思。（已经不再需要我们自己配置运行脚本了，非常方便）
工程结构分析
创建好工程以后，我们会看到如下的结构目录：
下面我们逐一分析一下Src下面每个文件包的作用：
| 文件名 | 作用描述 |
|---|---|
| app/app.component.{ts,html,css,spec.ts} | 整个应用的根组件 |
| assets/* | 存放图片文件夹 |
| environments/* | 定义全局的环境变量，将用户开发和产品环境 |
| index.html | 主要的的html文件， serve的时候会读取此文件，并且载入css,js文件，通常不需要更改此文件 |
| main.ts | 主要的入口文件，在编译运行时，会读取此文件，编译模式包括JIT compiler(开发环境) 和 AOTCompiler(产品环境 –aot) |
| polyfills.ts | 不同的浏览器对个别API的支持程度不同，需要加入前缀，保证在特定的浏览器能够正常运行，在此文件中，会引入zong.js |
| test.ts | 单元测试的入口文件 |
| tsconfig.{app | spec}.json |
解释完src文件夹，我们再来看一下根目录下面，angular cli 帮助我们建立了哪些有用的配置文件：
| 文件名 | 作用描述 |
|---|---|
| e2e/ | 独立于应用的点对点测试文件夹，包含独立的配置文件 |
| .angular-cli.json | Angular CLI命令配置文件 |
| .editorconfig | 编辑工具的基础配置文件，保证每个人在自己的编辑工具中能够拥有相同的基础配置，比如字符，缩进等等 |
| karma.conf.js | karma 单元测试配置文件，应用于ng test命令 |
| package.json | 整个应用程序依赖库的配置文件 |
| protractor.conf.js | 针对于protractor点对点测试的配置文件， 执行命令 ng e2e |
| tslint.json | 代码检查配置文件，执行ng lint,团队代码更加规范化 |
| tsconfig.json | 针对于IDE的type script编译配置文件,IDE会根据这个配置文件提供帮助 |
总结
相对其他框架而言，Angular CLI提供给了我们丰富的配置以及架构支持，免去了一重复的劳作，值得学习。
原文链接：https://www.f2er.com/angularjs/145329.html