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

時間  2019-11-20
標籤 開始 構建 wijmo angular 應用 欄目 AngularJS 简体版
原文   原文鏈接

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

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

  • 性能極大提高。 經過zone.js 中的單向綁定和數據流來取代 1.X 中惡心的髒檢查。
  • 更加兼容移動端。對移動App 的渲染是基於 React Native。
  • Web Component組件化 。在1.X 版本也有組件，但實在太難寫了。 在 Angular2 ，很是容易，有點相似於 JSX 語法糖。
  • 什麼 module，controller 全都沒了，只有es6 中的class 。今後世界乾淨不少。
  • . . .

Angular 2 真的很是優秀。html

Wijmo 當天支持 Angular 2，其全部控件做爲組件管理，也更加模塊化和高效。java

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

相信你已經學習了 Angular 2 的Quickstart，若是沒有，不要緊，由於下面的講解很是詳細。源代碼已經上傳 。node

在此以前，你須要git

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

1.新建咱們的項目。

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

2.配置項目。

咱們須要下面 3 個配置文件。es6

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

->>package.jsongithub

{


  "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.jsonweb

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

->> systemjs.config.jstypescript

/**
* 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代碼。

效果截圖。

下載源代碼

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程