クイックスタート¶

node.jsをあらかじめセットアップしておいてください。また、説明では、yarnを使用しますので、以下のコマンドでセットアップしてください。:

npm install -g yarn

動作を確認したい場合は、以下の手順を行ってください。:

git clone https://github.com/milkeyway/ng2-jsform-sample.git ng2-jsform-sample
cd ng2-jsform-sample
yarn install
yarn start

開発環境を構築する場合は、以下の手順を行ってください。

Step 1. 開発環境のセットアップ¶

angular cliをセットアップします。:

yarn add global @angular/cli

Step 2. 新しいプロジェクトの作成¶

新しいプロジェクトを作成します。:

ng new my-app

Step 3. Angular Materialのセットアップ¶

以下を参照して、Angular Matetialをセットアップしてください。

https://material.angular.io/guide/getting-started

Step 4. ng2-jsformのセットアップ¶

ng2-jsformと依存ライブラリをセットアップします。:

cd my-app
yarn add ng2-jsform jquery @angular/flex-layout json-schema-ref-parser

.angular-cli.jsonを編集します。:

…
"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/json-schema-ref-parser/dist/ref-parser.min.js"
],
…

app.module.tsを編集します。:

import { FlexLayoutModule } from '@angular/flex-layout';
import { JsFormModule } from 'ng2-jsform';
…
@NgModule({
  …
  imports: [
    …
    FlexLayoutModule,
    JsFormModule
  ],
  …
})

Step 5. ng2-jsform実行コードの記述¶

日本語と英語の切替ができる簡単なアプリケーションを作成します。

トップコンポーネントと定義体を下記からダウンロードして、appフォルダに展開してください。

トップコンポーネントのダウンロード

定義体のダウンロード

app.component.htmlとapp.component.scssを以下のように書き換えます。

<div id="wrap" *ngIf="pageView">
  <mat-toolbar color="primary">
    <button mat-button="" routerLink="/">
      <mat-icon>home </mat-icon>&nbsp;{{title}}
    </button><span class="fill-remaining-space"></span>
    <div fxLayout="row" fxShow="false" fxShow.gt-sm="fxShow.gt-sm">
      <button mat-button="mat-button" routerLink="/top">{{ 'menuTop' | mk_ng2_i18n: 'common' }}</button>
    </div>

    <mat-button-toggle-group [(ngModel)]="lang" (ngModelChange)="changeLang()">
        <mat-button-toggle value="ja" (onClick)="changeLang(group.value)">
          <span>日本語</span>
        </mat-button-toggle>
        <mat-button-toggle value="en" (onClick)="changeLang(group.value)">
          <span>English</span>
        </mat-button-toggle>
    </mat-button-toggle-group>

    <button mat-button="mat-button" [mat-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm="fxHide.gt-sm">
      <mat-icon>menu</mat-icon>
    </button>
  </mat-toolbar>
  <mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item="mat-menu-item" routerLink="/top">{{ 'menuTop' | mk_ng2_i18n: 'common' }}</button>
  </mat-menu>
  <div id="contents">
    <router-outlet></router-outlet>
  </div>
  <mat-toolbar class="footer">footer</mat-toolbar>
</div>

.fill-remaining-space {
  flex: 1 1 auto;
}

ルーティングを定義します。:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { TopComponent } from './top/top.component';

const routes: Routes = [
  { path: '',     component: TopComponent, pathMatch: 'full' },
  { path: 'top',  component: TopComponent, pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Step 6. アプリケーションの実行¶

実行時に自動でブラウザが開くようにng serveに–openを追加しておくと便利です。

package.jsonを編集します。:

"scripts": {
   …
   "start": "ng serve --open",
   …
 },

アプリケーションを実行します。:

yarn start

ブラウザから http://localhost:4200/ にアクセスしてください。