重拾Angular（一）Angular CLI

介绍

Angular CLI 是 Angular 提供的一个命令行工具，可以帮助我们来快速初始化、开发、测试、打包（可能不仅限于此四个方面）Angular应用。

独立官网地址：https://cli.angular.io/

安装

npm install -g @angular/cli

更新

如果要把Angular Cli更新的到一个新的版本，需要更新两个地方：全局、项目

全局

npm uninstall -g @angular/cli
npm cache verify
# if npm version is < 5 then use `npm cache clean`
npm install -g @angular/cli@latest

项目

rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev @angular/cli@latest
npm install

我当前的版本

先明确下版本

~ $ ng -v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.0.8
Node: 8.11.1
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.8
@angular-devkit/core         0.6.8
@angular-devkit/schematics   0.6.8
@schematics/angular          0.6.8
@schematics/update           0.6.8
rxjs                         6.2.1
typescript                   2.7.2

ng new

作用：创建一个已被初始化的Angular应用

命令选项

参数	说明
--collection -c	指定工程模板属于高阶操作，暂不知道如何使用
--directory	指定新项目创建的目录名
--dryRun -d	不生成实际文件只是让你看下哪些文件将会生成
--force -f	强制覆盖文件默认情况下如果文件已经存在创建过程为中断
--inline-style -s	指定使用行内样式
--inline-template -t	指定使用行内模板
--new-project-root	指定新项目创建的路径
--prefix -p	指定selector前缀
--routing	生成时自动包含路由模块
--skip-git -g	不生成初始化git仓库
--skip-install	不安装依赖
--skip-tests -S	不创建测试文件
--style	默认值css,可选值sass、less
--verbose -v	显示详细运行日志试了下似乎加不加没什么区别
--view-encapsulation	指定视图的封装模式

默认情况下组件@Component是这样的：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

如果，使用了-s、-t后，是这样子的：

@Component({
  selector: 'app-root',
  template: `
    <h1>Tour of Heroes</h1>
    <app-hero-main [hero]="hero"></app-hero-main>
  `,
  styles: ['h1 { font-weight: normal; }']
})

如果，使用了-p zx后，是这样子的：

@Component({
  selector: 'zx-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

ng generate

代码生成神器，能会是开发过程中，使用最频繁的一个命令

常规用法

ng generate component <name> [options]：生成一个组件
ng generate module <name> [options]：生成一个模块
ng generate directive <name> [options]：生成一个指令
ng generate class <name> [options]：生成一个类
ng generate guard <name> [options]：生成一个守卫
ng generate interface <name> [options]：生成一个接口
ng generate enum <name> [options]：生成一个枚举
ng generate pipe <name> [options]：生成一个管道
ng generate service <name> [options]：生成一个服务

快捷用法

ng g c <name> [options]：生成一个组件
ng g m <name> [options]：生成一个模块
ng g d <name> [options]：生成一个指令
ng g cl <name> [options]：生成一个类
ng g g <name> [options]：生成一个守卫
ng g i <name> [options]：生成一个接口
ng g e <name> [options]：生成一个枚举
ng g p <name> [options]：生成一个管道
ng g s <name> [options]：生成一个服务

option其他大同小异，接下来就来罗列一下，备查

component-选项

--dry-run (alias: -d)：不生成实际文件
--force (alias: -f)：强制覆盖文件
--project：项目名称
--inline-style (alias: -s)：使用行内有样式
--inline-template (alias: -t)：使用行内模板
--view-encapsulation (alias: -v)：视图的封装模式，ViewEncapsulation
--change-detection (alias: -c)：指定变化检查策略，ChangeDetectionStrategy
--prefix (alias: -p)：指定组件指令选择器前缀
--styleext：指定组件样式文件名后缀，暂不清楚意义何在
--spec：是否生成单元测试文件，默认true,可选false
--flat：不生成独立目录，直接生成在src/app下
--skip-import：不会自动import到模块
--selector：指定指令选择器
--module (alias: -m)：在哪个module中声明(import)
--export：组件导入的模块，是否export组件

module-选项

--dry-run (alias: -d)：不生成实际文件
--force (alias: -f)：强制覆盖文件
--project：项目名称
--routing：生成的时候包含routing
--routing-scope：routing的组用于
--spec：是否生成单元测试文件，默认true,可选false
--flat：不生成独立目录，直接生成在src/app下
--module (alias: -m)：在哪个module中声明(import)

directive-选项

--dry-run (alias: -d)：不生成实际文件
--force (alias: -f)：强制覆盖文件
--project：项目名称
--prefix (alias: -p)：指定指令选择器前缀
--spec：是否生成单元测试文件，默认true,可选false
--skip-import：不会自动import到模块
--selector：指定指令选择器
--flat：不生成独立目录，直接生成在src/app下
--module (alias: -m)：在哪个module中声明(import)
--export：组件导入的模块，是否export组件

class-选项

--dry-run (alias: -d)：不生成实际文件
--force (alias: -f)：强制覆盖文件
--project：项目名称
--spec：是否生成单元测试文件，默认true,可选false
--type：指定class文件类型，name.type.ts

guard-选项

--dry-run (alias: -d)：不生成实际文件
--force (alias: -f)：强制覆盖文件
--spec：是否生成单元测试文件，默认true,可选false
--flat：不生成独立目录，直接生成在src/app下
--module (alias: -m)：在哪个module中声明(import)
--project：项目名称

interface-选项

--dry-run (alias: -d)：不生成实际文件
--force (alias: -f)：强制覆盖文件
--project：项目名称
--prefix：前缀，文件name.ts,直接接口名称是prefixName

enum-选项

--dry-run (alias: -d)：不生成实际文件
--force (alias: -f)：强制覆盖文件
--project：项目名称

pipe-选项

--dry-run (alias: -d)：不生成实际文件
--force (alias: -f)：强制覆盖文件
--project：项目名称
--flat：不生成独立目录，直接生成在src/app下
--spec：是否生成单元测试文件，默认true,可选false
--skip-import：不会自动import到模块
--module (alias: -m)：在哪个module中声明(import)
--export：组件导入的模块，是否export组件

service-选项

--dry-run (alias: -d)：不生成实际文件
--force (alias: -f)：强制覆盖文件
--project：项目名称
--flat：不生成独立目录，直接生成在src/app下
--spec：是否生成单元测试文件，默认true,可选false

ng serve

作用：构建应用，并本地web开发服务器

ng serve [options]

常用的options:

--open (alias: -o)：直接在浏览器中打开
--aot：使用AOT编译
--prod：按照生产环境配置启动

其他参见ng serve --help

其他命令

ng build
ng lint
ng test
ng e2e
ng get/ng set
ng doc
ng xi18n
ng update

总结

由于精力有限，，得先往下学习Angular的其他部分了。

在了解Angular CLI的过程中，也有零零碎碎的了解到关于Angular相关的一些小知识点。