这个项目是使用 ngX-Rocket version 1.3.1 生成的。

1. 使用 VS Code 打开项目并使用如下命令安装依赖的包:

npm install

2. 使用如下命令启动项目，在浏览器中打开 localhost:9200 浏览本项目 :

npm start

1. NodeJs
2. Angular CLI
3. VS Code

详细参见 Angular 风格指南。

dist/                           编译目录（发布目录）
docs/                           项目文档及编码指南
e2e/                            end-to-end 测试
src/                            项目源代码
|- app/                         应用程序组件集合
|  |- core/                     core module (singleton services and single-use components)
|  |  |- authentication         与认证相关的服务
|  |  |- http                   与服务器通信相关的服务
|  |  |- profile                与当前登录人相关的服务
|  |  |- shell                  app shell
|  |  |  |- applications        相关应用程序菜单
|  |  |  |- breadcrumbs         breadcrumbs component
|  |  |  |- footer              shell footer component
|  |  |  |- header              shell header component
|  |  |  |- navigation          主导航菜单
|  |  |  |- page-header         常规页头
|  |  |  |- shell.component.*   框架（shell)
|  |- shared/                   shared module  (common components, directives and pipes)
|  |- app.component.*           app root component (shell)
|  |- app.module.ts             app root module definition
|  |- app-routing.module.ts     app routes
|  +- ...                       其它 modules 和 components
|- assets/                      应用程序资源 (images, fonts, sounds...)
|- environments/                编译时使用的环境变量
|- theme/                       应用程序公共的主题（app global scss variables and theme）
|- translations/                多语言文件
|- index.html                   应用程序入口（HTML）
|- main.scss                    公共样式文件入口
|- main.ts                      应用程序入口（Javascript）
|- polyfills.ts                 polyfills needed by Angular
+- test.ts                      单元测试入口
reports/                        测试报告
proxy.conf.js                   后台代理配置（未使用）

本节介绍如何开发一个CRUD的功能，将以订单管理（Order Management）为例。

1. 使用 log.info(), log.error() 等代替 dialogs.info() 和 dialogs.error() 方法。
2. 使用 ng g [module/component/service/pipe/class] 命令创建相应文件。

1. 使用 VS Code 打开项目。
2. 使用 Ctrl+` 快捷键打开命令行
3. 定位到 src\app 目录
4. 使用 ng g module OderManagement 命令创建 OrderManagement module(order-management.module.ts)。
5. 在 module 文件中，引入需要使用的组件，详细参见文件 order-management.module.ts。
6. 注意：需要将 SharedModule 引入到这个 Module 中。

1. 在 VS Code 中，右键 order-management 文件夹，新建文件 order-management-routing.module.ts。
2. 在 module 文件中，配置路由，详细参见文件 order-management-routing.module.ts。
3. 将 OrderManagementRoutingModule 引入到 OrderManagementModule 中。
4. 打开 src\app\core\core-routing.module.ts 文件，将 OrderManagementModule 配置到路由中，详细参见文件 core-routing.module.ts。

1. 在 VS Code 中，右键 order-management 文件夹，新建文件夹 shared。
2. 在 VS Code 命令行中，定位到 src\app\order-management\shared 目录。
3. 使用 ng g service Orders 命令创建 OrdersService。
4. 打开 orders.service.ts 文件，填充服务器通信方法，详细参见文件 orders.service.ts。
5. 打开 src\app\order-management\order-management.module.ts 文件，将OrdersService 引入到OrderManagementModule中，并添加到providers中，详细参见文件 order-management.module.ts。

1. 在 VS Code 中，右键 order-management 文件夹，新建文件夹 partial。
2. 在 VS Code 命令行中，定位到 src\app\order-management\partial 目录。
3. 使用 ng g component Orders 命令创建 orders.component.* 组件文件。
4. 引入需要的组件，详细参见文件 create-order.component.ts。
5. 将 ngx-query 引入到 create-order.component.html，并在 create-order.component.ts 中对其进行配置。
6. 将 ngx-datatable 引入到 create-order.component.html，并在 create-order.component.ts 中对其进行配置。
7. 在 loadOrders() 方法中，调用 ordersService.getOrders() 从服务器获取数据。

1. 在 VS Code 中，右键 order-management 文件夹，新建文件夹 partial。
2. 在 VS Code 命令行中，定位到 src\app\order-management\partial 目录。
3. 使用 ng g component EditOrder 命令创建 edit-order.component.* 组件文件。
4. 使用 ng g component CreateOrder 命令创建 create-order.component.* 组件文件。
5. 删除 edit-order.component.html 和 edit-order.component.scss 两个文件，CreateOrderComponent 使用 EditOrderComponent 同样的界面和样式。
6. 修改 CreateOrderComponent 类，将 templateUrl 和 styleUrls 两属性值指向 edit-order 文件夹。
7. 引入需要的组件，详细参见文件 create-order.component.ts。
8. 在 构造函数 中调用 buildForm() 方法，初始化表单；buildForm() 方法中有对字段数据效验的方法。
9. 在 ngOnInit() 方法中，初始化 Order(订单) 实体。
10. 在 submit() 方法中，调用 OrdersService.createOrder() 方法保存数据到服务器。
11. 在 edit-order.component.html 中布局表单，详细参见该文件。

在 src\main.scss 文件中引入样式文件。

在 .angular-cli.json 文件 apps\styles 节点下引入样式文件。

在 .angular-cli.json 文件 apps\scripts 节点下引入 JS 文件。

注意：Angular路由是大小写敏感的。

具有框架的界面是指具有导航栏的界面，即登录后的界面。

1. 在 xxx-routing.module.ts 中配置路由，参见 order-management-routing.module.ts
2. 将 XxxRoutingModule 引用到 XxxModule，参见 order-management.module.ts
3. 将路由配置添加到 src\app\core\core-routing.module.ts，参见此文件。

无框架的界面是指没有导航栏的界面，如登录页面。

无框架的路由配置与具有框架的路由配置一致，只是不需要第三步，更接近 Angular 原生路由配置规则。

1. 在 xxx-routing.module.ts 中配置路由，参见 order-management-routing.module.ts
2. 将 XxxRoutingModule 引用到 XxxModule，参见 order-management.module.ts

路由的层级关系，同时也会用在 Breadcrumbs，所以，定义路由时，需要考虑这些。

ng-bootsrap 提供了 Bootstrap 4 中组件 Angular 使用的封装。

file-upload 提供了文件上传功能。

1. 在 你的 apps module 中导入 FileUploadComponent，以便我们可以引用它。

    import { Component, NgModule } from '@angular/core';
    import { FileUploadComponent } from './components/file-upload/file-upload.component';
   
    @NgModule({
        declarations: [
          FileUploadComponent
        ],
        exports: [
          FileUploadComponent
        ]
    })
    export class MyModule {}
   

2. 简单用例

   Template Code

    <app-file-upload [multiple]="false" [(ngValue)]="company.LogoId" 
                    (success)="uploadSuccess($event)" (error)="uploadError($event)">
    </app-file-upload>
   

   Component Code

    uploadSuccess(data: any) {
      this.log.info('上传成功!');
    }
   
    uploadError(e: any) {
      this.log.error('上传失败! ' + e.error);
    }
   

dialogs 是一个对话框组件集合，使用了 ngx-toastr 和 ngsweetalert2 两个组件。

1. 在你的 apps Component 中引用 Dialogs

    import { Component, Input, OnInit, EventEmitter } from '@angular/core';
    import { Dialogs } from '../core/dialogs.service';
   
    @Component({
      selector: 'app-my-com',
      templateUrl: './my.component.html',
      styleUrls: ['./my.component.scss']
    })
   
    export class MyComponent implements OnInit {
   
       constructor(private dialogs: Dialogs) {}
   
      ngOnInit() {}
    }
   

2. 简单用例

     this.dialogs.alert('This is a test.', 'Title');
   

angular2-ladda 组件提供了按钮处理中状态服务。

1. 在的 apps Component 中导入 Logger 和 LoggerFactory

    import { Component, Input, OnInit, EventEmitter } from '@angular/core';
    import { Logger } from '../../core/logger.service';
    import { LoggerFactory } from '../../core/logger-factory.service';
   
    @Component({
      selector: 'app-my-com',
      templateUrl: './my.component.html',
      styleUrls: ['./my.component.scss']
    })
   
    export class MyComponent implements OnInit {
   
        log: Logger;
   
        constructor(private loggerFactory: LoggerFactory) {
              this.log = this.loggerFactory.getLogger();
         }
   
        ngOnInit() {}
    }
   

2. 简单用例

     this.log.info('Success!');
   

ngx-datatable 提供数据列表显示功能。

1. documentation & demos

   https://swimlane.gitbooks.io/ngx-datatable/

2. 简单用例

   在你的 apps module 引入

     import { NgxDatatableModule } from '@swimlane/ngx-datatable';
     import { NgxDataTableDirective } from './directives/ngx-datatable.directive';
     import { NgxDatatableFooterComponent } from './components/ngx-datatable-footer/ngx-datatable-footer.component';
     import { NgxDatatablePagerComponent } from './components/ngx-datatable-pager/ngx-datatable-pager.component';
     import { NgxDatatableActionsComponent } from './components/ngx-datatable-actions/ngx-datatable-actions.component';
   
     @NgModule({
       imports: [
         NgxDatatableModule
       ], 
       declarations: [
          NgxDataTableDirective,
          NgxDatatableFooterComponent,
          NgxDatatablePagerComponent,
          NgxDatatableActionsComponent
       ],
       exports: [
           NgxDataTableDirective,
           NgxDatatableFooterComponent,
           NgxDatatablePagerComponent,
           NgxDatatableActionsComponent
         ]
     })
     export class MyModule {}
   

   Component Code

      定义:
          orders: Array<any>;
          private datatable: any;
   

   Template Code

         <div class="col-lg-12">
            <ngx-datatable #dt class="material" [scrollbarH]="true" [rows]="orders" [loadingIndicator]="loading" 
                    appNgxDataTable [ngxQuery]="ngxQuery" (data)="loadOrders($event)">
               <app-ngx-datatable-footer></app-ngx-datatable-footer>
               <ngx-datatable-column name="摘要" width="120" prop="subject"> </ngx-datatable-column>
               <ngx-datatable-column name="日期" width="60" prop="date">
                  <ng-template let-row="row" ngx-datatable-cell-template>
                      {{row.date | date}}
                  </ng-template>
               </ngx-datatable-column>
               <ngx-datatable-column name="付款" width="40" prop="paid">
                   <ng-template let-row="row" ngx-datatable-cell-template>
                      <span class="label" [ngClass]="{'label-primary': row.paid }">Paid</span>
                   </ng-template>
               </ngx-datatable-column>
               <ngx-datatable-column maxWidth="200">
                   <ng-template let-column="column" ngx-datatable-header-template>
                      <app-ngx-datatable-actions [datatable]="dt"></app-ngx-datatable-actions>
                   </ng-template>
                  <ng-template let-row="row" ngx-datatable-cell-template>
                      <div class="btn-group btn-group-xs">
                        <a [routerLink]="['./', row.id]" class="btn btn-default"><i class="fa fa-file-o"></i> 详细</a>
                        <a [routerLink]="['./', row.id,'edit']" class="btn btn-default"><i class="fa fa-edit"></i> 编辑</a>
                        <a (click)="delete(row)" class="btn btn-danger"><i class="fa fa-times"></i> 删除</a>
                     </div>
                  </ng-template>
                </ngx-datatable-column>
             </ngx-datatable>
         </div>
   

ngx-query 提供了自定查询界面组件，包括简单查询和复杂查询。

1. documentation & demos

   https://xuemingfeng.github.io/ngx-query/

2. 简单用例

   在你的 apps module 引入 NgxQueryModule

     import { Component, NgModule } from '@angular/core';
     import { NgxQueryModule } from 'ngx-query';
     
     const ngxQuerySettings: any = {
       labels: {
         buttons: {
           'quick': '快速',
           'advanced': '高级',
           'reset': '重置',
           'search': '查询'
         },
         groupOp: {
           'and': '并且',
           'or': '或者'
         },
         fieldOp: {
           'eq': '等于',
           'ne': '不等于',
           'lt': '小于',
           'le': '小于等于',
           'gt': '大于',
           'ge': '大于等于',
           'bw': '开头是',
           'bn': '开头不是',
           'ew': '结尾是',
           'en': '结尾不是',
           'cn': '包含',
           'nc': '不包含',
           'bt': '介于'
         }
       }
     };
   
     @NgModule({
       imports: [
         NgxQueryModule.forRoot(ngxQuerySettings)
       ]
     })
     export class MyModule {}
   

   Component Code

     import { Component, OnInit, ViewChild } from '@angular/core';
     import { QueryComponent } from 'ngx-query/query.component';
   
     @Component({
       selector: 'app-list',
       templateUrl: './list.component.html',
       styleUrls: ['./list.component.scss']
     })
     export class MylistComponent {
        queryTemplates: any = [{
           name: 'Default',
           template: {
              op: 'or',
              rules: [
                { field: 'subject', op: 'cn', data: '' },
                { field: 'date', op: 'bt' }
              ],
              groups: []
           }
        }];
     }
   

   Template Code

     <div class="col-lg-12">
        <ngx-query #ngxQuery [title]="'订单管理'" [queryTemplates]="queryTemplates" [showModeButtons]="true">
          <ngx-query-field [name]="'subject'" [label]="'订单简要'" [type]="'string'"></ngx-query-field>
          <ngx-query-field name="date" label="日期" type="date"></ngx-query-field>
          <ng-template ngx-query-toolbar-template>
             <div class="btn-group btn-group-xs">
             <a routerLink="./new" class="btn btn-primary"><i class="fa fa-plus"></i> 新建</a>
          </div>
          </ng-template>
        </ngx-query>
    </div>
   

表单字段验证组件，可自定义验证函数。

1. 在你的 apps module 中导入 ValidationMessageComponent，以便我们可以引用它。

    import { Component, NgModule } from '@angular/core';
    import { ValidationMessageComponent } from './components/validation-message/validation-message.component';
   
    @NgModule({
        declarations: [
          ValidationMessageComponent
        ],
        exports: [
          ValidationMessageComponent
        ]
    })
    export class MyModule {}
   

2. 简单用例

   Template Code

      <div class="form-group">
          <label>公司全称 <span class="text-danger">*</span></label>
          <input type="text" formControlName="name" placeholder="公司全称" class="form-control" [(ngModel)]="company.Name" />
          <app-validation-message [control]="form.controls['name']" label="公司全称"></app-validation-message>
      </div>
      <div class="form-group">
          <label>公司简称</label>
          <input type="text" formControlName="abbr" placeholder="公司简称" class="form-control" [(ngModel)]="company.Abbreviation" />
          <app-validation-message [formGroup]="form" for="abbr" label="公司简称" [validationMessages]="{pattern: '{label}首字母必须为A。'}">
          </app-validation-message>
      </div>
   

   Component Code

    private buildForm() {
       this.form = this.formBuilder.group({
            name: [null, [Validators.required, Validators.maxLength(50)]],
            abbr: [null, [Validators.pattern(/^A/)]],
            summary: []
        });
    }
   

格式化货币（人民币）的 Pipe。

1. 在你的 apps module 中导入 RmbPipe，以便我们可以引用它。

    import { Component, NgModule } from '@angular/core';
    import { RmbPipe } from './pipes/rmb.pipe';
   
    @NgModule({
        declarations: [
          RmbPipe
        ],
        exports: [
          RmbPipe
        ]
    })
    export class MyModule {}
   

2. 简单用例

    <div class="form-group">
         <label>单价</label>
         <span class="form-control">{{order.price | rmb}}</span>
    </div>
   

将 number 数值转化成为货币格式

URI.js 组件提供了对符合 URI 格式字符串的解析。

命令是基于 NPM scripts 创建的。

When building the application, you can specify the target environment using the additional flag --env <name> (do not forget to prepend -- to pass arguments to npm scripts).

The default build environment is prod.

在开发环境运行 npm start 命令，导航到 http://localhost:9200/。当你改变源代码并保存后，浏览器将自动加载更新。

使用 Ctrl+C 键退出运行环境。

注意，可能由于缓存等原因，你的更改不能更新到浏览器中，请先退出Angular运行环境，重新启动可解决此问题。

You should not use ng serve directly, as it does not use the backend proxy configuration by default.

运行 npm run generate -- component <name> 命令生成一个新的组件（Component）。你也可以使用 npm run generate -- directive|pipe|service|class|module。

假如你使用 npm install -g @angular/cli 安装了 angular-cli，你可以直接地使用 ng generate 或者 ng g 命令。

使用 NPM 管理依赖的包, 可以在 www.npmjs.com 上查找更多的包。查看这里关于 NPM 包更多的使用帮助。

1. 在 Kudu 中创建 Application
2. 打开 Application -> Configuration 页签，在 Git Branch 中输入 stage （测试环境） 或者 live (生产环境)
3. 在 Add custom property 区域，输入 property name = PROJECT & property value = ./dist，单击 Add property 按钮，将其添加到 Custom properties 中

1. 打开 SourceTree
2. 将 Kudu 的 git 路径添加 git 的远程路径中

1. 打开 SourceTree
2. 确认全部更改已提交到 git
3. 使用 VS Code 打开项目
4. 使用 Ctrl+` 快捷键打开命令行
5. 执行 npm run stage 发布到测试环境
6. 执行 npm run live 发布到生产环境

1. 打开 package.json 文件
2. 定位到 scripts\stage："stage": "npm run lint && git checkout stage && git merge master --no-edit --no-ff && npm run build:stage && git add . && git commit -m "release stage" && git push && git checkout master"
3. 这是一个组合命令，命令分别为：

4. 根据需要修改或添加新命令

应用程序模板使用了 HTML5, TypeScript 和 Sass，多语言文件使用了标准的 JSON 格式。

开发，编译和质量管理全部基于 angular-cli 和 NPM scripts，包含：

• 使用 Webpack 优化编译和打包HTML等
• 使用 Development server 作为开发服务器
• 使用 autoprefixer 和 browserslist 解决 CSS 兼容多浏览器
• Asset revisioning for better cache management
• 使用 Jasmine 和 Karma 进行单元测试
• End-to-end tests using Protractor
• 静态代码分析： TSLint, Codelyzer, Stylelint and HTMLHint
• Local knowledgebase server using Hads

• Angular 4
• Bootstrap 4
• Font Awesome
• RxJS
• ng-bootsrap
• ngx-translate
• Lodash

• Angular
• TypeScript
• Sass
• HTML
• Unit tests
• End-to-end tests

• I18n guide
• Working behind a corporate proxy
• Updating dependencies and tools
• Using a backend proxy for development
• Browser routing