從零開始構建 Wijmo & Angular 2 小應用

中秋之際，Angular 團隊發布 Angular 2 正式版，一款不錯的圖表控件Wijmo當天宣布支持 。

Angular 2移除和替代了 Angular 1.X 中的 directives, controllers,modules, scopes，幾乎移除了 1.X 中的核心concepts 。 相比於之前的版本，簡單地說主要有：

• 性能極大提升。 通過zone.js 中的單向綁定和數據流來取代 1.X 中惡心的臟檢查。
• 更加兼容移動端。對移動App 的渲染是基於 React Native。
• Web Component組件化 。在1.X 版本也有組件，但實在太難寫了。 在 Angular2 ，非常容易，有點類似於 JSX 語法糖。
• 什么 module，controller 全都沒了，只有es6 中的class 。從此世界干凈很多。
• . . .

Angular 2 真的非常優秀。

Wijmo 當天支持 Angular 2，其所有控件作為組件管理，也更加模塊化和高效。

---

現在就開始 Wijmo 在Angular 2 中使用的第一個應用吧。

相信你已經學習了 Angular 2 的Quickstart，如果沒有，沒關系，因為下面的講解非常詳細。源代碼已經上傳 。

在此之前，你需要

• 打開 Angular 2 的中文網，來閱讀它的快速起步。
• 下載wijmoenterprise包，並打開：
  /wijmoenterprise/Samples/TS/Angular2/FlexGridIntro/FlexGridIntro。
• 如果你沒有nodejs 環境，請先安裝nodejs 環境。

1.新建我們的項目。

$ mkdir wj-ng2-flexgrid
$ cd wj-ng2-flexgrid

---

2.配置項目。

我們需要下面 3 個配置文件。

• package.json 。 用來標記項目需要使用的npm依賴包。
• tsconfig.json 。 這個是typescript的配置文件，定義了 TypeScript 編譯器如何從項目源文件生成 JavaScript 代碼。
• systemjs.config.js 。 為模塊加載器SystemJS 提供了該到哪里查找應用模塊的信息，並注冊了所有必備的依賴包 。（這里使用SystemJS 來配置模塊，也可以使用Webpcak，神一般的利器。詳情請參考博客園專家級人物 冠軍 的博客： http://www.cnblogs.com/haogj/p/5998556.html#3541215）
  如果不太明白配置文件中鍵值對的意義，可以在底部留言或者上網查詢。

->>package.json

{


  "name": "wj-ng2-flexgrid",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",
    "@angular/upgrade": "~2.1.1",
    "angular-in-memory-web-api": "~0.1.13",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3"
  }
}

->> tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

->> systemjs.config.js

/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

安裝依賴包。

在當前目錄下，運行

$ npm install 

所有依賴包會全部下載下來，如果命令行有警告，可以忽略 。這些警告表示包里沒有repository field，這些field僅僅用於一些包信息。

如果因為某些原因包無法下載，那可以使用淘寶的鏡像 cnpm。這個鏡像會每隔10分鍾和官方同步一次。

安裝結束，會在項目的根目錄下多出一個node_modules 文件夾，它實在是太大了 ！

現在您需要將 \wijmoEnterprise\Samples\TS\Angular2\FlexGridIntro\FlexGridIntro\node_modules\wijmo 文件夾拷貝到當前項目中的 node_modules 文件夾。這些文件用來將wijmo包包裝為 es6 模塊。

好了，現在的准備工作已經完成了，您可以開始創建wijmo & Angular 2 的應用了。

---

3. 創建目錄

玩Angular 2，首先我們需要Angular 2的腳手架。

現在來看看我的文件目錄，並逐一解釋。

└─ wj-ng2-flexGrid/ ······························· 項目所在目錄
   ├─ node_modules/ ······························· 項目依賴包
   ├─ app/ ········································ 應用程序子目錄
   │  ├─ components/ ······························ 組件目錄
   │  │  ├─ app.component.html ···················· 根組件app.Component模板
   │  │  └─ app.conponent.ts ······················ 根組件app.Component
   │  ├─ services/ ································ 服務目錄
   │  │  └─ data.service.ts ······················· 數據服務 data.Service
   │  ├─ app.module.ts ···························· 根模塊app.module
   │  └─ main.ts ·································· Angular 引導文件
   ├─ scripts/ ···································· 外部js 目錄
   │  ├─ definition/ ······························ wijmo 模塊定義目錄
   │  └─ vendor/ ·································· wijmo 腳本目錄
   ├─ styles/ ····································· 樣式目錄
   ├─ index.html ·································· 應用宿主頁面
   ├─ package.json ································ npm 依賴列表
   ├─ systemjs.config.js ·························· systemJS 配置
   ├─ tsconfig.js ································· TypeScript 配置
   └─ readme.md ··································· 程序說明

 

這看起來似乎比較復雜，但是卻很有條理。

---

4. 編寫宿主頁面

在宿主頁面中，除了Angular 2中必須的組件，還需要引入Wijmo js腳本。

<html>
<head>
    <meta charset="UTF-8">
    <title>使用 Angular 2 來創建FlexGrid控件</title>
    <!--angular 2 模塊開始 -->
    <!--用於填充舊版瀏覽器-->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!--systemjs 配置開始-->
    <script src="systemjs.config.js"></script>
    
    <!--wijmo 模塊開始-->
    <script src="scripts/vendor/wijmo.min.js"></script>
    <script src="scripts/vendor/wijmo.grid.min.js"></script>
    <link rel="stylesheet" href="styles/wijmo.min.css">
    <script src="scripts/vendor/wijmo.angular2.min.js"></script>
    <!--mine-->
    <script>
      System.import('./app/main').catch(function(err){ console.error(err); });
    </script>
</head>
<body>
    <!--申明根組件-->
    <app-cmp>
        Loading ...
    </app-cmp>
</body>
</html>

---

5. 編寫數據服務

這個頁面定義完畢，現在來編寫一個數據服務。這個數據服務需要被注入到組件中，因此需要引入一個元標記 Injectable 。

data.Service 返回一些國家相關信息的隨機數據。

'use strict'
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
    getData(count: number): wijmo.collections.ObservableArray {
        var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
            data = new wijmo.collections.ObservableArray();
        for (var i = 0; i < count; i++) {
            data.push({
                id: i,
                country: countries[i % countries.length],
                date: new Date(2014, i % 12, i % 28),
                amount: Math.random() * 10000,
                active: i % 4 == 0
            });
        }
        return data;
    }
}

---

6. 編寫根組件和模塊

現在我們編寫應用的第一個組件：根組件 app.component ,也是這個程序唯一的組件。

import { Component, Inject } from '@angular/core';
import { DataService } from '../services/data.service';
@Component ({
    selector:'app-cmp',
    templateUrl:'app/components/app.component.html',
})
export class  AppComponent{
    protected dataSvc:DataService;
    data: wijmo.collections.CollectionView;
    constructor(@Inject(DataService) dataSvc:DataService){
        this.dataSvc = dataSvc;
        this.data = new wijmo.collections.CollectionView(this.dataSvc.getData(50));
    }
}

在這個組件中，需要引入兩個元標記。Component, Inject ，還需要注入定義的數據服務data.Service。

在組件app.component.html模板中，

<div class="header">
    <h2>
        這個頁面展示了如何在angular 2上使用 Wijmo。
    </h2>
</div>
<div>
<wj-flex-grid [itemsSource]="data">  </wj-flex-grid>
</div>

在這里，僅僅需要引入一個 wj-flex-grid 標記，就可以創建一個 flexgrid控件了，wj-flex-grid 組件是作為一個子組件存在的，在app.module 模塊中注入。

itemsSource 綁定一個數據源，這個itemsSource是flexgrid已經封裝完成的屬性。在 flexgrid 內部是通過 @Input 來完成的。

在根模塊中將組件注入

import {   NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { WjGridModule } from 'wijmo/wijmo.angular2.grid';
import { AppComponent } from './components/app.component';
import { DataService } from './services/data.service';
@NgModule({
    imports: [ WjGridModule, BrowserModule],
    declarations: [AppComponent],
    providers:[DataService],
    bootstrap: [AppComponent],
})
export class AppModule { }

在這里，需要將引用的所有的組件和模塊都要注入進來。

---

7. 引導和啟動引用

最后是引導程序 main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {enableProdMode} from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

在根目錄下，運行

$ npm start

這時，程序會自動打開默認瀏覽器並渲染頁面。

start 命令是執行定義在 package.json 文件中的scripts命令。 會將ts代碼編譯為原生js，並且會啟動一個靜態服務器。 這個服務器會檢測文件的變化，當發現文件改動，那么會自動編譯ts代碼。

---

效果截圖。

下載源代碼