【Angluar2】Angular-CLI

Angular CLI的命令关键字为 ng。

1、创建新的 Angular 项目，默认在命令行cd的当前目录下创建
1.1.  命令格式：ng new <project-name> [options]
       参数            描述
       --dry-run -d    只输出要创建的文件和执行的操作，实际上并没有创建项目
       --verbose -v    输出详细信息
       --skip-npm        在项目第一次创建时不执行任何npm命令
       --name            指定创建项目的名称
         例子，创建名为testProject的angular2工程：
       > ng new testProject
1.2.  命令执行完成后：
       应用程序相关源文件和目录将自动被创建；
       应用锁有依赖 (package.json中配置的依赖项) 将会被自动安装；
       自动配置项目中的 TypeScript 开发环境；
       自动配置 Karma 单元测试环境；
       自动配置 Protractor (end-to-end) 测试环境，即e2e测试环境；
       创建 environment 相关的文件并初始化为默认的设置。
2、初始化新的 Angular 项目
2.1.  ng init 与 ng new 功能是相似的，只是 ng new 会为我们创建新的目。
2.2.  命令格式：ng init <project-name> [options]
      参数和ng new一样的，和ng new区别在于，该命令只生成了一个package-lock.json文件，貌似没啥用处，因此对该命令不做过多研究。
3、添加功能到现有的 Angular 应用程序
        可使用 ng generate 命令，为已有的Angular 应用程序添加新的功能。命令格式：
      ng generate <type> [options]，可简写为：ng g <type> [options]    
       下面基于helloworld应用执行下面各项命令，用来说明如何使用ng g命令。
3.1.  新建模块：
...... 新建Admin模块
        > ng g m admin 
        会在app应用目录生成admin文件夹，以及文件夹内的admin.module.ts文件，其内容为...export class AdminModule { }。
...... 可用选项
       --routing:  默认为false，表示生成一个额外包含路由信息的 AdminRoutingModule 模块，且该模块会被自动导入到新建的模块中，但不会导入到
                已存在的模块中，只能手动修改代码导入，例如修改新建工程默认生成的模块app.module.ts：
                ......
                import { AdminModule } from './admin/admin.module';
                ......
                @NgModule({
                       imports: [
                           AdminModule
                       ]
                })
               export class AppModule { }
        --spec:  默认为false，表示生成单元测试sepc文件，指定该选项才会生成spec文件，默认不会生成。
        例如：ng g m admin --routing --spec，会生成admin.module.ts、admin.module.spec.ts、admin-routing.module.ts、admin.component.ts、
                     admin.component.spec.ts、admin.component.html等文件。
3.2.  新建组件：
...... 新建LoginComponent组件
        > ng g c login
        会在app应用目录生成login文件夹，以及login.component.ts、模板和css等文件，其内容为...export class LoginComponent implements OnInit ......。
        同时会自动更新app.module.ts，将LoginComponent组件导入到app.module.ts。
...... 可用选项
       --flat:  boolean, 默认为 false， 表示在 src/app 目录下生成组件而不是在 src/app/site-header 目录中
       --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.3.  新建服务：
...... 新建LoginService服务
        > ng g s login     
       会在app应用目录生成login.service.ts和login.service.spec.ts文件。
       Angular CLI 会提醒用户服务已成功创建，但尚未配置该服务。用户可以根据具体需求在模块或组件的 providers 属性中配置该新建的服务。
       具体示例如下：
               import { BackendApiService } from './backend-api.service';
               @NgModule({
                      ......
                      providers: [LoginService],
                      bootstrap: [AppComponent]
               })
...... 可用选项
       --flat: boolean，默认为 true，表示在 src/app 目录中生成服务，而不是在 src/app/login目录下
       --spec: boolean，默认为 true，表示生成包含单元测试的 spec 文件
3.4.  新建类：
...... 新建LoginClass类
        > ng g cl login
        会在app应用目录下生成 内容为 export class Login { } 的login.ts文件，内容为：export class Login {}。
...... 可用选项
       --spec: boolean，默认为 false，表示是否生成单元测试相关的 spec 文件
      例如：ng g cl login --spec，会生成login.ts和login.spec.ts文件。
3.5.  新建指令：
...... 新建选择器为 appAdminLink 的指令
        > ng g d admin-link 
        src/app/admin-link.directive.ts 文件被创建，该文件导出一个名为 AdminLinkDirective 且选择器为 appAdminLink 的指令
        src/app/admin-link.directive.spec.ts 文件被创建，该文件包含指令相关的单元测试信息
        自动更新app.module.ts，AdminLinkDirective 指令会被自动地添加到最近模块 @NgModule 装饰器的 declarations 属性中
...... 可用选项
      --flat: boolean，默认为 true，表示在 src/app 目录中生成指令而不是在 src/app/admin-link 目录下
      --prefix: boolean，默认为 true，使用 .angular-cli.json 配置的前缀作为指令选择器的前缀
      --spec: boolean，默认为 true，表示生成包含单元测试的 spec 文件
3.6.  新建枚举：     
...... 新建名为 Direction 的枚举类   
        > ng g e direction
        src/app.direction.enum.ts 文件被创建，该文件导出名为 Direction 的枚举
...... 可用选项(无)
3.7.  新建管道：
...... 新建名为 convertToEuro 的管道                  
        > ng g p convert-to-euro
        src/app/convert-to-euro.pipe.ts 文件被创建，该文件导出一个名为 ConvertToEuroPipe 的管道类
        src/app/convert-to-euro.pipe.spec.ts 文件被创建，该文件包含管道相关的单元测试信息
        CovertToEuroPipe 管道会被自动地添加到最近模块 @NgModule 装饰器的 declarations 属性中。  
...... 可用选项
       --flat: boolean，默认为 true，表示在 src/app 目录中生成管道而不是在 src/app/convert-to-euro 目录下
       --spec: boolean，默认为 true，表示生成包含单元测试的 spec 文件             
以上命令都是简写，使用完整命令也可以，例如：> ng generate component my-new-component
4、格式化当前项目代码
     > ng format
5、构建工程
5.1.  生产环境构建(指定生产环境prod参数，--target=xxx可省，貌似没啥用)
       > ng build --target=production --environment=prod
5.2.  开发环境构建(指定开发dev参数。指定构建目标 --target=xxx可省，貌似没啥用，默认情况下使用开发环境构建目标)
       > ng build --target=development --environment=dev
5.3.  构建并压缩js文件
       > ng build --prod --build-optimizer
       > ng build --dev --build-optimizer
...... --environment=可简写为--
       >  ng build --prod
       >  ng build --dev
...... 构建后的文件放在工程目录下的/dist目录中，生成的文件就是最终可部署到jetty等应用服务器的前端html、js、css...文件。
6、运行应用程序
6.1.  切换路径到应用根路径，启动ng web服务器
       > cd helloworld
       > ng serve
6.2.  必须先切换到工程目录，再启动服务，启动服务过程中会先编译工程，因此过程有点慢。
6.3.  也可以自定义配置 IP、端口和实时重载端口号
       > ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153
6.4.  当运行上面的命令后，将发生以下事情：
       Angular CLI 从 .angular-cli.json 文件中加载配置信息
       Angular CLI 运行 Webpack 打包相关 JavaScript 和 CSS 文件
       Angular CLI 启动 webpack dev server 本地开发服务器，默认的地址是 localhost:4200
        若要停止应用程序，可以使用 ctrl+c 快捷键。
7、运行e2e自动化测试
...... 运行e2e测试
       > ng e2e
8、运行Karma 单元测试
......  命令格式：ng test [options]
      参数               描述
      --watch          继续运行测试. 默认为true
      --browsers, --colors, --reporters, --port, --log-level    这些参数直接传递给karma
......  例子(默认不需要指定参数)：> ng test