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

glumes 發布于2019-08-20 12:08 / 2503人閱讀

摘要：中秋之際，團隊發布正式版，當天宣布支持。其實從開始，到之后版本和版本，一直緊隨其后。現在就開始在中使用的第一個應用吧。這些警告表示包里沒有，這些僅僅用于一些包信息。好了，現在的準備工作已經完成了，您可以開始創建的應用了。

中秋之際，Angular 團隊發布 Angular 2 正式版，Wijmo 當天宣布支持。其實從Angular Alpha開始，到之后 Beta版本和 RC 版本，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/...）
如果不太明白配置文件中鍵值對的意義，可以在底部留言或者上網查詢。

->>package.json

    {
    
    
      "name": "angular-quickstart",
      "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 文件夾，它實在是太大了！

現在您需要將 wijmoEnterpriseSamplesTSAngular2FlexGridIntroFlexGridIntronode_moduleswijmo 文件夾拷貝到當前項目中的 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腳本。

    
    
        
        使用 Angular 2 來創建FlexGrid控件
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    
    
        
        
            Loading ...

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模板中，

    
        
            這個頁面展示了如何在angular 2上使用 Wijmo。

在這里，僅僅需要引入一個 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代碼。

效果截圖。

下載源代碼

云服務器 GPU云服務器從零開始 linux從零開始 python從零開始從零開始php

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80811.html

這 5 個前端組件庫，可以讓你放棄 jQuery UI

摘要：目前正在廣泛使用的框架之一就是。是一系列使用編寫的自定義控件，用于創建快速響應式的和可擴展的控件。的組件主要是使用，并提供了交互式，動態和高度可定制的小部件。例如，演示了如何使用自定義控件，嵌套面板和其它元素。在建立Web應用時，通常都需要用到一些有用的UI組件。無論應用中需要的是日歷，滑塊，圖形或其它用于提升或簡化用戶交互的組件，那么都面臨兩種選擇：要么自己來創建這些組件，要么使用...

1fe1se 2019-08-20 16:50 評論0 收藏0
用WijmoJS玩轉您的Web應用 —— Ionic

摘要：在之前的文章中，我們已經介紹了使用與三大框架結合搭建您的應用程序。使用創建應用程序。擴展閱讀用玩轉您的應用用玩轉您的應用用玩轉您的應用近期活動問卷調查揚帆萬里，因您前行使用反饋意見征集前言：在本文中，我們將著重介紹如何將WijmoJS與Ionic一起使用，來創建一款移動端支持優先、快捷高效的應用程序。在之前的文章中，我們已經介紹了使用WijmoJS與Angular、React、Vu...

fjcgreat 2019-08-22 18:17 評論0 收藏0
用WijmoJS玩轉您的Web應用 —— Angular6

摘要：除在全球率先支持外，現已全面應用于等主流框架中。本文中，我們將專注于如何將添加到用編寫的應用程序中。使用創建應用程序。接下來，我們定義適用于這些元素中托管的應用程序面板元素和控件的規則。往期精彩用玩轉您的應用為什么選擇WijmoJS？作為一款純前端控件集，WijmoJS秉承快如閃電，觸控優先的設計理念，在提供優質服務和產品的同時，專注于企業應用開發，不斷優化產品架構，與時俱進。除在...

hedge_hog 2019-08-22 17:59 評論0 收藏0