Angular CLI终极教程指南

Angular是什么？

Angular CLI 是一个命令行接口(Command Line Interface)，用于实现自动化开发工作流程。它允许你做以下这些事情：

创建一个新的 Angular 应用程序
运行带有 LiveReload 支持的开发服务器，以便在开发过程中预览应用程序
添加功能到现有的 Angular 应用程序
运行应用程序的单元测试
运行应用程序的端到端 (E2E) 测试
构建应用程序

在详细介绍 Angular CLI 之前，我们先来看一下如何安装 Angular CLI。

前提准备条件

在使用 Angular CLI 之前，你必须确保系统中 Node.js 的版本高于 6.9.0 且 npm 的版本高于 3.0.0。

若你尚未安装 Node.js，你可以访问 Node.js 官网，然后根据你所用的操作系统选择对应的安装方式。

若你本机已经安装 Node.js 和 npm，你可以通过运行以下命令，确认一下当前环境信息：
去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

$ node - v # 显示当前Node.js的版本
$ npm -v # 显示当前npm的版本

当你本机 Node.js 环境确认无误后，你可以在命令行使用 npm 安装 TypeScript：

$ npm install -g typescript # 安装最新的TypeScript稳定版

安装Angular CLI

若要安装 Angular CLI，只需在命令行中运行以下命令：

$ npm install -g @angular/cli

验证是否成功安装 Angular CLI，可在命令行运行：

ng -v

创建新的Angular应用

使用 ng new 来创建新的angular项目

ng new demo

运行应用程序

进入创建好的项目

cd demo

运行

ng server

当运行上面的命令后，将发生以下事情：

Angular CLI 从 .angular-cli.json 文件中加载配置信息
Angular CLI 运行 Webpack 打包相关 JavaScript 和 CSS 文件
Angular CLI 启动 webpack dev server 本地开发服务器，默认的地址是 localhost:4200
若要停止应用程序，你可以使用 ctrl+c 快捷键。

ng server --open

使用–open（或-o）参数可以自动打开浏览器并访问http://localhost:4200/。
接下来你会看到：

Angular CLI简单使用-新建组件

$ ng generate component demo
installing component
  create src/app/great-angular/demo.component.css
  create src/app/great-angular/demo.component.html
  create src/app/great-angular/demo.component.spec.ts
  create src/app/great-angular/demo.component.ts
  update src/app/app.module.ts

也可以简写为

ng g component demo

如你所见，Angular cli帮我们干了如下事情：
src/app/great-angular 目录被创建
great-angular 目录下会生成以下四个文件：
CSS 样式文件，用于设置组件的样式
HTML 模板文件，用于设置组件的模板
TypeScript 文件，里面包含一个 GreatAngular 组件类和组件的元信息
Spec 文件，包含组件相关的测试用例
GreatAngular 组件会被自动地添加到最近模块 @NgModule 装饰器的 declarations 属性中。

其他命令

Angualr CLI提供了许多常用命令供我们选择：

ng generate class my-new-class              // 新建 class
ng generate component my-new-component      // 新建组件
ng generate directive my-new-directive      // 新建指令
ng generate enum my-new-enum                // 新建枚举
ng generate module my-new-module            // 新建模块
ng generate pipe my-new-pipe                // 新建管道
ng generate service my-new-service          // 新建服务

当然选择。。简写：

ng g cl my-new-class        // 新建 class
ng g c my-new-component     // 新建组件
ng g d my-new-directive     // 新建指令
ng g e my-new-enum          // 新建枚举
ng g m my-new-module        // 新建模块
ng g p my-new-pipe          // 新建管道
ng g s my-new-service       // 新建服务

单元测试

Angular默认帮我们集成了``karma`测试框架，我们只需要：

 ng test