OnsenUI2 x Angular2的开发环境备忘录

2 年 ago

韵, 科

3 minutes

Onsen UI 2是一款著名的移动UI框架，正式支持React和Angular 2！──React, Angular 2都可用！: https://html5experts.jp/n_matagawa/20766/

npm init --yes

安装OnsenUI库的核心文件。

npm install onsenui@2.x.x --save

安装用于构建应用程序的工具。

npm install --global typescript
npm install --global typings
npm install --global webpack

为了运行Angular 2，需要使用的库

npm install core-js --save
npm install reflect-metadata --save
npm install zone.js --save
npm install rxjs --save

安装Angular 2

npm install @angular/core@2.x.x --save
npm install @angular/common@2.x.x --save
npm install @angular/compiler@2.x.x --save
npm install @angular/platform-browser@2.x.x --save
npm install @angular/platform-browser-dynamic@2.x.x --save

Onsen UI的Angular 2绑定

npm install angular2-onsenui@1.0.0-rc.1 --save

安装以下类型定义文件即可构建 Angular 2 应用程序

typings install --global dt~core-js#0.0.0+20160725163759

import { NgModule, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { OnsenModule, onsNotification } from 'angular2-onsenui';

@Component({
    selector: 'app-root',
    template: `
        <ons-page>
            <ons-toolbar>
                <div class="center">Onsen UI</div>
            </ons-toolbar>

            <div style="text-align: center;">
                <p>Hello World!</p>
                <ons-button (click)="alertPopup()">Click Me!</ons-button>
            </div>
        </ons-page>
    `,
})
export class AppComponent {
    alertPopup() {
        onsNotification.alert('Onsen UI alert');
    }
}

@NgModule({
  imports:      [ OnsenModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  schemas:      [ CUSTOM_ELEMENTS_SCHEMA ],
})
export class AppModule {
}

platformBrowserDynamic().bootstrapModule(AppModule);

执行以下命令。

tsc --init

将生成的 tsconfig.json 替换为以下内容。

{
    "compilerOptions": {
        "moduleResolution": "node",
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    },
    "exclude": [
        "node_modules"
    ]
}

使用以下命令生成main.bundle.js文件。

# トランスパイル
tsc

# バンドル
webpack main.js main.bundle.js

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="stylesheet" href="node_modules/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="node_modules/onsenui/css/onsen-css-components.css">
    <script src="node_modules/onsenui/js/onsenui.min.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/zone.js/dist/zone.min.js"></script>
</head>
<body>
    <app-root></app-root>

    <script src="main.bundle.js"></script>
</body>
</html>

文件结构如下:

├── index.html
├── tsconfig.json
├── main.ts
├── main.js
├── main.bundle.js
├── node_modules
│ ├── @angular
│ │ ├── common
│ │ ├── compiler
│ │ ├── core
│ │ ├── platform-browser
│ │ └── platform-browser-dynamic
│ ├── angular2-onsenui
│ ├── core-js
│ ├── onsenui
│ ├── reflect-metadata
│ ├── rxjs
│ └── zone.js
├── package.json
└── typings
├── globals
│ └── core-js
└── index.d.ts