大家都说"工欲善其事必先利其器"，在我们发开 Angluar 时，必需了解一个非常好用的工具， "Angular CLI" ，而这篇文章将会介绍什麽是 Angular CLI、如何安装与使用 Angular CLI以及一些其他该注意的事项以及常见的命令操作。

What is the Angular CLI ?

在 Angular 的官方文档中提到， Angular CLI 是 Angular 团队创建的工具，用於管理、构建、维护和测试你的 Angular 专案。

可能有些刚接触前端的新手会觉得又要记一些指令觉得麻烦，实际上有一个 Viisual Studio Code 的扩展可以使用，它提供了一个 Angular CLI GUI 介面，可以让你取代在终端机中输入命令。

虽然有 GUI 介面可以使用，但是本篇章还是主要会介绍如何透过在终端机中下达命令来使用 Angular CLI，别放弃学习啊！！

Do I have to use the Angular CLI ?

现在我们知道了什麽是 Angular CLI，可能很多人都会问，既然他是自动帮开发着处理一些问题的，那我一定要用吗？我可以不要这麽自动（？

答案是当然可以，你可以再开发 Angular 的时候，无论创建、维护、测试等等的都用手动的方式建立或操作，但是你可能会变成.... foolish Angular developer (别篇文章说的下面会放连结，骂他不要骂我）。

Angular CLI 存在的目的是为了让开发者专心进行专案开发，它负责将麻烦与耗时的动作自动化，使用指令可以自动化生成一个基础并带有 .gitgnore( 用来告诉 git 应该忽略哪些 file ) 的 Angular app，其中包括 Angular 的核心部分比如 component, module 等等，除了创造 app 之外他还可以自动化进行 unit test、building和其他基本却复杂的操作。

所以说了这麽多，有没有更想使用 Angular CLI 啦（不要说没有！

How to install the Angular CLI

终於要进入到安装的环节了，在安装 Angular CLI 之前比需要先安装 Node.js，如果不想使用终端机命令安装 Node.js 可以在 Node.js 官网下载并进行安装。

当安装完 Node.js 後，可以在终端中输入指令正式安装 Angular CLI

npm install -g @angular/cli

使用 -g option 代表要在系统范围内（全域）安装特定的 npm module，如果没有使用 -g option 则会安装在当前目录的 node_modules 中。

如果你需要更新 Angular CLI 到最新版本则可以使用

npm update -g @angular/cli

这样就完成在全域中安装 Angular CLI 的方式，这意味着你可以在你机器的任何地方使用它，有趣的是当创建一个 Angular app 时，CLI 也将安装在本地，这意味着他也会安装在你 Angular app 的 node_module 中，让你可以在你的专案中使用 Angular CLI 的功能。

How to create an Angular application with the CLI

当要创建一个新的 Angular app 时，可以使用 Angular CLI 他可以自动且快速的建立所有需要的文件（如果手动创建可能要花一天的时间），那麽我们就来使用指令吧！

ng new MyApplicationName

当按下 enter 後你就可以悠闲的喝个咖啡聊个天等待他自动完成

当 Angular CLI 在创建 App 的时候会问一些问题:

1. 是否需要设置 Router (y / N) → 选择 N 之後也可以手动加入 Router
2. 选择想要的样式格式 → 选择要使用 CSS, SASS, SCSS 等不同的 style format
   

当都选择好後就可以等他完成啦～

CLI command-language syntax

在使用每一个程序语言的时候，都必须要注意他的语法，不然很容易造成出乎自己意料的结果，CLI syntas如下：

ng commandNameOrAlias requiredArg [optionalArg] [options]

• 大部分的 command 和一些 option 拥有别名，可以使用简单的方式达到一样的目的。
• 使用双破折号(—)放在 option 前面当作前缀，使用单破折号(-)放在 option 别名前面当作前缀，而参数没有前缀。
• 通常生成文件的名称可以将它当作参数加在後面，也可以使用 —name 来指定文件名称。
• 参数和 option 名称可以使用驼峰命名或破折号 → —myOpitonName = —my-option-name

How to use Angular CLI

上面介绍了这麽多的 Angular CLI 来源、用途、语法等等，接下来就要进到最重要的环节，来介绍一些常用的 CLI 指令。

Create Component

下面是创建一个新 Component 的 Angular CLI 指令。

ng generate component MyComponentName -> 完整
ng g c MyCompoenntName -> 简写

如果你要将这个创建出来的 Component 归属於特定的 module 则可以使用

ng generate component MyComponentName --module MyModuleName

Create Module

在 Angular 中 Module 的观念非常重要，他可以有效地模块化你的程序，详细的 Module 我们後面再慢慢介绍，这边就先了解如何快速创建一个 Module 吧。

ng generate module MyModuleName

Create pipes

pipes 也是 Angular 一个重要的观念，他可以将你的资料自动地进行转换，一样详细的内容我们放到後面介绍，这边一样介绍如何快速建立 pipes。

ng generate pipe MyPipeName

Create Services

Services 在 Angular 中也是非常重要的，他可以有效地将画面与计算逻辑分割开来，一样详细的内容我们放到後面介绍（疯狂挖坑...）

ng generate service MyServiceName

Run project

当我们撰写好了我们的 Angular 程序後，最重要的就是让他跑起来，哪们就可以使用这个指令

ng serve <project> [options]
ng s <project> [options]

使用这个指令会自动 build 和 serve 你的 App，并且在你更改内容储存後重新构建。

Building project

当我们撰写好程序後，我们可以将我们写的程序 build 好，以便做更多的处理，这时就可以使用这个指令

ng build <project> [options]
ng b <project> [options]

Extract-i18n

Angular 支持多语言的设计，後面会详细讲解 i18n 的使用方法，这边一样先介绍如何编译 i18n

ng extract-i18n <project> [options]
ng i18n-extract <project> [options]
ng xi18n <project> [options]

结论

本篇章介绍了许多 Angular CLI 的概念，我在刚接触 Angular 的时候对 CLI 也是模模糊糊，虽然要真正了解 CLI 内部是如何操作的十分困难，但对於一般开发者而言只要懂的使用就可以了，上面也介绍了许多 CLI 的指令，但这只是冰山一角我只介绍了几个我自己比较常用到的，有兴趣或是有使用到的话也可以到 Angular 官网中查询需要使用到的指令，希望今天的讲解有让你稍微了解一点什麽是 Angular CLI 也算使用 Angular 的第一步吧。

Reference

How to install and use the Angular CLI
Angular.io