前端框架angular
, ,

ng-cli常用命令

本文大纲
  1. 1. ng-cli 命令
  2. 2. 参数
    1. 2.1. ng generate
      1. 2.1.1. 1. ng generate class
      2. 2.1.2. 2. ng generate component
      3. 2.1.3. 3. ng generate directive
      4. 2.1.4. 4. ng generate module
      5. 2.1.5. 5. ng generate pipe
      6. 2.1.6. 6. ng generate service
    2. 2.2. ng build
    3. 2.3. ng new || ng init

ng-cli 命令

(@Angular CLI 终极指南:https://segmentfault.com/a/1190000009771946)

  • ng new 项目名

  • ng generate class 类名 ng g cl

  • ng generate component 组件名 ng g c

  • ng generate directive 指令名 ng g d

  • ng generate enum 枚举 ng g e

  • ng generate module 模块名 ng g m

  • ng generate pipe 管道名 ng g p

  • ng generate serveice 服务名 ng g s ng g s teacher/service/teacher

  • ng generate interface 接口名 ng g i

  • ng start (:4200) ng s –port 4201 ng s

  • ng build –prod –aot

  • ng test

  • ng serve [ –open -o ]

  • ng eject 用于将你的应用程序与 Angular CLI 分离

参数

ng generate

1. ng generate class

–spec: boolean, 默认为 false, 表示是否生成单元测试相关的 spec 文件. ng generate class user-profile –spec

2. ng generate component

–flat: boolean, 默认为 false, 表示在 src/app 目录下生成组件而不是在 src/app/componentName 目录中
–inline-template: boolean, 默认为 false, 表示使用内联模板而不是使用独立的模板文件
–inline-style: boolean, 默认为 false, 表示使用内联样式而不是使用独立的样式文件
–prefix: boolean, 默认为 true, 使用 .angular-cli.json 配置的前缀作为组件选择器的前缀
–spec: boolean, 默认为 true, 表示生成包含单元测试的 spec 文件
–view-encapsulation: string, 用于设置组件的视图封装策略
–change-detection: string, 用于设置组件的变化检测策略

3. ng generate directive

–flat: boolean, 默认为 true, 表示在 src/app 目录中生成指令而不是在 src/app/admin-link 目录下
–prefix: boolean, 默认为 true, 使用 .angular-cli.json 配置的前缀作为指令选择器的前缀
–spec: boolean, 默认为 true, 表示生成包含单元测试的 spec 文件

4. ng generate module

–routing: boolean, 默认为 false, 表示生成一个额外包含路由信息的 AdminRoutingModule 模块，且该模块会被自动地导入到新建的模块中
–spec: boolean, 默认为 false, 表示添加 src/app/admin/admin.module.spec.ts 单元测试文件

5. ng generate pipe

–flat: boolean, 默认为 true, 表示在 src/app 目录中生成管道而不是在 src/app/convert-to-euro 目录下
–spec: boolean, 默认为 true, 表示生成包含单元测试的 spec 文件

6. ng generate service

–flat: boolean, 默认为 true, 表示在 src/app 目录中生成服务而不是在 src/app/backend-api 目录下
–spec: boolean, 默认为 true, 表示生成包含单元测试的 spec 文件

ng build

–aot: 开启 ahead-of-time 编译
–base-href: string, 设置 index.html 文件中 元素的链接地址
–environment: string, 设置所使用的环境，默认为 dev
–output-path: string, 设置输出的路径
–target: string, 设置所使用的环境，默认为 development,意味着不进行代码压缩或混淆 ng build –target=production
–watch: boolean, 默认为 false, 开启 watch 模式，监听文件异动并自动重新构建

Environments 让你能够自定义应用程序行为,你可以在 .angular-cli.json 文件中定义自己的 environments 文件。
默认的是：dev：environments/environment.ts。如果指定了不同的环境，构建过程将使用相应的环境：
ng build Uses environments/environment.ts
ng build –environment=dev || ng build –env=dev Also uses environments/environment.ts
ng build –environment=prod || ng build –env=prod Uses environments/environment.prod.ts

ng new || ng init

–dry-run: boolean, 默认为 false, 若设置 dry-run 则不会创建任何文件
–verbose: boolean, 默认为 false
–link-cli: boolean, 默认为 false, 自动链接到 @angular/cli 包
–skip-install: boolean, 默认为 false, 表示跳过 npm install
–skip-git: boolean, 默认为 false, 表示该目录不初始化为 git 仓库
–skip-tests: boolean, 默认为 false, 表示不创建 tests 相关文件
–skip-commit: boolean, 默认为 false, 表示不进行初始提交
–directory: string, 用于设置创建的目录名，默认与应用程序的同名
–source-dir: string, 默认为 ‘src’, 用于设置源文件目录的名称
–style: string, 默认为 ‘css’, 用于设置选用的样式语法 (‘css’, ‘less’ or ‘scss’)
–prefix: string, 默认为 ‘app’, 用于设置创建新组件时，组件选择器使用的前缀
–mobile: boolean, 默认为 false,表示是否生成 Progressive Web App 应用程序
–routing: boolean, 默认为 false, 表示新增带有路由信息的模块，并添加到根模块中
–inline-style: boolean, 默认为 false, 表示当创建新的应用程序时，使用内联样式
–inline-template: boolean, 默认为 false, 表示当创建新的应用程序时，使用内联模板