Angular-CLI という Angular 2 アプリケーション用のコードの生成なんかをやってくれるツールを試してみました。

インストール

npm で angular-cli パッケージをインストールします。 ng コマンドが使えるようになります。

$ npm install -g angular-cli
$ ng --version

プロジェクトの作成

ng new コマンドで新規プロジェクトを作成します。

$ ng new my-new-app

これで my-new-app ディレクトリの中にソースが生成され、必要なパッケージなどもインストールされます。

ソースは TypeScript で書かれていて tslint や typings などのツールも一緒に入ります。

src/main.ts がエントリポイントで src/app/app.component.ts がアプリ本体のコンポーネントです。

サーバの起動には ng serve コマンドを使います。 serve は s と省略できます。

$ ng s

デフォルトだと localhost:4200 にサーバが起動します。 Web ブラウザで開くと app works! と表示され、アプリケーションが動いているのがわかります。

Livereload が付いているのでソースコードを更新すると Web ブラウザは自動で更新されます。

テストのコードも生成されます。ユニットテストの実行は ng test E2E テストは ng e2e で実行されます。 test は t と省略できます。

$ ng t
$ ng e2e

コンポーネントを作成

ng generate コマンドでコンポーネントやサービスのコードの生成ができます。例として greeting コンポーネントを作ってみます。

$ ng generate component greeting

このコマンドで src/app/greeting/ ディレクトリの下にコンポーネントのコードが生成されます。

$ ls src/app/greeting/
greeting.component.css
greeting.component.html
greeting.component.spec.ts
greeting.component.ts
index.ts

編集して Hello, なんちゃら! と表示させてみます。

<!-- src/app/greeting/greeting.component.html -->
<p>
  Hello, <ng-content></ng-content>!
</p>

<!-- src/app/app.component.html -->
<app-greeting>Angular</app-greeting>

// src/app/app.component.ts

import { Component } from '@angular/core';

import { GreetingComponent } from './greeting/';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [GreetingComponent]
})
export class AppComponent {
  title = 'app works!';
}

コンポーネントには勝手に app- というプリフィックスがついて <app-greeting> タグになります。 import した GreetingComponent を directives: [GreetingComponent] として渡してあげているのがミソです。

ビルド

ビルドは ng build コマンドで行います。 -prod オプションで本番環境用になります。

$ ng build -prod

これで dist/ ディレクトリ以下にファイルができているのでこれをホスティングすればアプリの完成です。

おわりに

Angular-CLI を試してみました。あるといいものは大体そろっていて、高速に開発をすすめられそうです。 lint や ビルド・テスト周りは 0 から用意しようとすると結構大変なので、かなり助かりそうです。

Angular 2 を試す環境としても使いやすそうだと感じました。