OnsenUI2 × Angular2の開発環境メモ

OnsenUI2-Angular2の開発環境メモ
モバイルUIフレームワークのド本命、Onsen UI 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
```

```main.ts
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 を以下の内容に書き換えます。

```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
```

```index.html
<!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
```