3.《Angular CLI》

一、CLI

命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（[CUI]
(https://baike.baidu.com/item/CUI/7671744)）。

二、简单的linux指令

三、安装Angular CLI

1. 首先确认安装了node.js和npm

// 显示当前node和npm版本
$ node -v
$ npm -v

使用cnpm提要工作效率

// 安装cnpm
npm install -g cnpm --registry=https://registry.taobao.org

2. 安装Angular CLI

// mac需要用户权限 sudu npm install -g @angular/cli输入密码后继续操作
$ npm install -g @angular/cli

//cnpm 安装（推荐）
$ npm install -g @angular/cli

三、新建Angular项目

1. 新建Angular项目：

$ ng new my-app

这里我使用

ng new my-app --skip-install
//接下来我们使用cnpm 下载依赖
$ cd my-app
$ cnpm install

四、Angular CLI简单使用

1.ng serve

//更换监听端口
$ng serve --port 4201

2.ng generate

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       // 新建服务

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

$ ng test

4. 端到端测试

$ ng e2e

详细可以参考官方文档。
5.$ ng build

$ ng build
//查看文件目录
$ ls -alh dist/
//可以看到如下目录结构（默认输出在dist文件夹）
wangyamingdeMacBook-Pro:demo01 xiaoming$ ls -alh dist/
total 11688
drwxr-xr-x  14 xiaoming  staff   448B  3 22 12:12 .
drwxr-xr-x  17 xiaoming  staff   544B  3 22 12:12 ..
-rw-r--r--   1 xiaoming  staff   5.3K  3 22 12:12 favicon.ico
-rw-r--r--   1 xiaoming  staff   609B  3 22 12:12 index.html
-rw-r--r--   1 xiaoming  staff   3.8K  3 22 12:12 inline.bundle.js
-rw-r--r--   1 xiaoming  staff   3.9K  3 22 12:12 inline.bundle.js.map
-rw-r--r--   1 xiaoming  staff   7.4K  3 22 12:12 main.bundle.js
-rw-r--r--   1 xiaoming  staff   5.0K  3 22 12:12 main.bundle.js.map
-rw-r--r--   1 xiaoming  staff   202K  3 22 12:12 polyfills.bundle.js
-rw-r--r--   1 xiaoming  staff   231K  3 22 12:12 polyfills.bundle.js.map
-rw-r--r--   1 xiaoming  staff    14K  3 22 12:12 styles.bundle.js
-rw-r--r--   1 xiaoming  staff    18K  3 22 12:12 styles.bundle.js.map
-rw-r--r--   1 xiaoming  staff   2.3M  3 22 12:12 vendor.bundle.js
-rw-r--r--   1 xiaoming  staff   2.9M  3 22 12:12 vendor.bundle.js.map
//查看大小
du -h dist/
wangyamingdeMacBook-Pro:demo01 xiaoming$ du -h dist/
5.7M    dist/
//预编译技术aot
$ ng build --aot
wangyamingdeMacBook-Pro:demo01 xiaoming$ ng build --aot
Date: 2018-03-22T04:23:02.188Z                                                - Hash: dff05c3857f5864a9310
Time: 4171ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 3.89 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 21.3 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 207 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 14.7 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.17 MB [initial] [rendered]

wangyamingdeMacBook-Pro:demo01 xiaoming$ ls -alh dist/
total 6144
drwxr-xr-x  14 xiaoming  staff   448B  3 22 12:23 .
drwxr-xr-x  17 xiaoming  staff   544B  3 22 12:23 ..
-rw-r--r--   1 xiaoming  staff   5.3K  3 22 12:23 favicon.ico
-rw-r--r--   1 xiaoming  staff   609B  3 22 12:23 index.html
-rw-r--r--   1 xiaoming  staff   3.8K  3 22 12:23 inline.bundle.js
-rw-r--r--   1 xiaoming  staff   3.9K  3 22 12:23 inline.bundle.js.map
-rw-r--r--   1 xiaoming  staff    21K  3 22 12:23 main.bundle.js
-rw-r--r--   1 xiaoming  staff   4.6K  3 22 12:23 main.bundle.js.map
-rw-r--r--   1 xiaoming  staff   202K  3 22 12:23 polyfills.bundle.js
-rw-r--r--   1 xiaoming  staff   231K  3 22 12:23 polyfills.bundle.js.map
-rw-r--r--   1 xiaoming  staff    14K  3 22 12:23 styles.bundle.js
-rw-r--r--   1 xiaoming  staff    18K  3 22 12:23 styles.bundle.js.map
-rw-r--r--   1 xiaoming  staff   1.1M  3 22 12:23 vendor.bundle.js
-rw-r--r--   1 xiaoming  staff   1.4M  3 22 12:23 vendor.bundle.js.map
wangyamingdeMacBook-Pro:demo01 xiaoming$ du -h dist/
3.0M    dist/

//生产模式
$ ng build -prod简写$ ng b -pord
wangyamingdeMacBook-Pro:demo01 xiaoming$ ls -alh dist/
total 480
drwxr-xr-x   8 xiaoming  staff   256B  3 22 12:42 .
drwxr-xr-x  17 xiaoming  staff   544B  3 22 12:42 ..
-rw-r--r--   1 xiaoming  staff   5.3K  3 22 12:42 favicon.ico
-rw-r--r--   1 xiaoming  staff   589B  3 22 12:42 index.html
-rw-r--r--   1 xiaoming  staff   796B  3 22 12:42 inline.318b50c57b4eba3d437b.bundle.js
-rw-r--r--   1 xiaoming  staff   160K  3 22 12:42 main.337e7594f13c5d3ff190.bundle.js
-rw-r--r--   1 xiaoming  staff    58K  3 22 12:42 polyfills.176996455d5ba5aed704.bundle.js
-rw-r--r--   1 xiaoming  staff     0B  3 22 12:42 styles.ac89bfdd6de82636b768.bundle.css
//生成带有哈希值的文件，这时查看大小
wangyamingdeMacBook-Pro:demo01 xiaoming$ du -h dist/
240K    dist/

五、参考文档

更多详情建议参看文档
官方文档--Angular CLI快速起步
官方文档--部署
Angular CLI 终极指南