概述
Angular CLI 是一个命令行接口(Command Line Interface)，用于实现自动化开发工作流程。它可以帮你做以下这些事情：
- 创建一个新的 Angular 应用程序
- 运行带有
LiveReload支持的开发服务器，以便在开发过程中预览应用程序 - 添加功能到现有的 Angular 应用程序
- 运行应用程序的单元测试
- 运行应用程序的端到端 (E2E) 测试
- 构建应用程序
安装
1.在使用 Angular CLI 之前，你必须确保系统中 Node.js 的版本高于
6.9.0且 npm 的版本高于3.0.0。
若你尚未安装 Node.js，你可以访问 Node.js 官网，然后根据你所用的操作系统选择对应的安装方式。
2.当你本机 Node.js 环境确认无误后，你可以在命令行使用 npm 安装 TypeScript：
$ npm install -g typescript # 安装最新的TypeScript稳定版
3.安装 Angular CLI
$ npm install -g @angular/cli #安装Angular CLI
4.创建新的 Angular 应用程序
$ ng new jin-admin # 创建新的目录，然后在新建的目录中运行 ng init 命令
当运行上面的命令后，将发生以下事情：
- 新的
jin-admin目录被创建 - 应用程序相关的源文件和目录将会被创建
- 应用程序的所有依赖 (package.json中配置的依赖项) 将会被自动安装
- 自动配置项目中的 TypeScript 开发环境
- 自动配置 Karma 单元测试环境
- 自动配置 Protractor (end-to-end) 测试环境
- 创建
environment相关的文件并初始化为默认的设置
此时jin-admin目录中 Angular 应用程序的目录结构如下：
.
├── README.md
├── e2e
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.e2e.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│ ├── app
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── assets
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── typings.d.ts
├── tsconfig.json
└── tslint.json
image.png
5.运行应用程序
$ cd jin-admin #进入程序目录
$ ng serve #运行程序
6.打开浏览器 输入http://localhost:4200/ 运行
当运行上面的命令后，将发生以下事情：
- Angular CLI 从
.angular-cli.json文件中加载配置信息 - Angular CLI 运行 Webpack 打包相关 JavaScript 和 CSS 文件
- Angular CLI 启动 webpack dev server 本地开发服务器，默认的地址是
localhost:4200
项目创建完成
至此，一个完整的项目框架通过angular-cli 命令创建完成，后面我们将进一步学习完成项目组件的创建，类的创建，指令的创建，模块的创建，测试，项目的构建等内容，详情及代码请移至github上查看，欢迎提出问题，也可以一并完成一个后台管理项目的常用组件集合，也请给个start，哈哈。
