angular-cliで始めるAngular2

2016.12.19
Tech
by Sogo Ohta

この記事はEureka Advent Calendar 2016 19日目の記事です。
18日目はサルバさんの「年末なのでtext/template周りを歩いて回ってみた」でした。

こんにちは！ pairs事業部でエンジニアをやっている太田です。

2016年も終わろうとしていますが、2016年といえばAngular2がリリースされた年でした。
そんなAngular2アプリをサクサク作れるツールがangular-cliです。
https://cli.angular.io/

angular-cliはコマンドラインから

アプリの作成
コンポーネントやサービスなどの生成
lint
ビルド
サーバー起動
テスト実行

といった開発に必要な一通りのことを行うことができるようになっています。

今回はangular-cliを使ったアプリ開発の流れを下記の観点で追っていきたいと思います。

コンポーネントの生成
Web APIコール
イベントハンドリング

angular-cliのインストール

npmでインストールします。

npm install -g angular-cli

nodeのバージョンは4以上、npmのバージョンは3以上である必要があります。

アプリの作成と起動

angular-cliをインストールすることでngコマンドが使えるようになります。
アプリをng new <アプリ名> で作成します。

$ ng new get_wild

アプリを構成する雛形がダダダ・・と生成されます。

$ ng new get_wild
installing ng2
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/app/index.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.json
  create src/typings.d.ts
  create angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.

e2eのテストコードまで生成されるのは注目ですね。
また、Gitリポジトリとして初期化されます。
必要なライブラリもnpmでインストールされます。
楽！です。

作成したアプリのディレクトリに移動して、ng serveコマンドでサーバーを起動します。

$ cd get_wild
$ ng serve

4200ポートでサーバーが起動します。

src/app/app.module.ts をみると、AppComponentがルートコンポーネントになっていることがわかります。

  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule
    ],
    providers: [
    ],
    bootstrap: [AppComponent]  // <--- ここ
  })
  export class AppModule { }

AppComponentのクラスとテンプレートはこのようになっています。
src/app/app.component.ts

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

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

src/app/app.component.html

<h1>
  {{title}}
</h1>

コンポーネントの生成

Angular2ではUIをコンポーネントで構成します。
ng g component <コンポーネント名> で生成します。

$ ng g component get-wild-video
installing component
  create src/app/get-wild-video/get-wild-video.component.css
  create src/app/get-wild-video/get-wild-video.component.html
  create src/app/get-wild-video/get-wild-video.component.spec.ts
  create src/app/get-wild-video/get-wild-video.component.ts

コンポーネントのCSS、HTMLテンプレート、テストコード、コンポーネントクラスが生成されました。

生成したコンポーネントは src/app/app.module.ts のdeclarationsに自動で追加されているので、そのまますぐ使えます。

  @NgModule({
    declarations: [
      AppComponent,
      GetWildVideoComponent // <--- ここ
    ],

先程のルートコンポーネントのテンプレートに生成したコンポーネント定義を追加します。

<h1>
  {{title}}
</h1>

<!-- コンポーネント追加 -->
<app-get-wild-video></app-get-wild-video>

コンポーネントの生成・追加は以上です。
簡単ですね！

Web APIコール

Web APIをコールするサービスを生成します。

$ ng g service get-wild-video
installing service
  create src/app/get-wild-video.service.spec.ts
  create src/app/get-wild-video.service.ts
  WARNING Service is generated but not provided, it must be provided to be used

サービスにAngular2のHttpライブラリをinjectします。
このHttpライブラリでWeb APIを叩きます。

  import { Injectable } from '@angular/core';
  import { Http } from "@angular/http";         // <--- 追加
  import { Observable } from 'rxjs/Observable'; // <--- 追加
  import 'rxjs/add/operator/map';               // <--- 追加

  @Injectable()
  export class GetWildVideoService {
  　
    // inject
    constructor(private http: Http) {
    }

    // 追加
    fetch() {
      return this.http.get('http://localhost:3000/items')
        .map(response => response.json());
    }
  }

サービスを src/app/app.module.ts のprovidersに追加します。

  @NgModule({
    declarations: [
      AppComponent,
      GetWildVideoComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule
    ],
    providers: [
      GetWildVideoService // <--- 追加
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

コンポーネントにサービスをinjectしてサービスからのレスポンスを受け取ります。

  import { Component, OnInit } from '@angular/core';
  import { GetWildVideoService } from "../get-wild-video.service"; // <--- 追加

  @Component({
    selector: 'app-get-wild-video',
    templateUrl: './get-wild-video.component.html',
    styleUrls: ['./get-wild-video.component.css']
  })
  export class GetWildVideoComponent implements OnInit {

    items: any[];

    // inject
    constructor(private getWildVideoService: GetWildVideoService) { }

    ngOnInit() {
      // 追加
      this.getWildVideoService.fetch()
        .subscribe((data) => {
            this.items = data;
        });
    }

  }

コンポーネントのテンプレートにレスポンスを出力します。

  <p>
    get-wild-video works!
  </p>

  <!-- 追加 -->
  <ol>
    <li *ngFor="let item of items">{{item.name}}</li>
  <ol>

Web APIと通信してレスポンスを出力できました。

イベントハンドリング

クリックイベントのハンドラは(click)で指定します。
Angular1のng-clickにあたるものですね。

<ol>
  <li *ngFor="let item of items"><a href="" (click)="clicked()">{{item.name}}</a></li>
<ol>

イベントハンドラはコンポーネントに実装します。

    clicked() {
      alert("解けない愛のパズルを抱いて");
    }

まとめ

angular-cli、なかなかいい感じの使い心地です。
自動生成された半完成品に必要なことを追加していく形で進められるので、Angular2へのハードルをグッと下げてくれる印象です。
多機能でproduction向けの開発環境としても十分使えそうです。
コンポーネントをサクサク生成してアプリを組み立てていくのは楽しいですね。

明日は臼井さんの「Go言語における標準正規表現ライブラリのパフォーマンスとアルゴリズム、及びこれらとの付き合い方」です。お楽しみに！

エウレカでは、一緒に働いていただける方を絶賛募集中です。募集中の職種はこちらからご確認ください！皆様のエントリーをお待ちしております！

angular-cliで始めるAngular2

angular-cliのインストール

アプリの作成と起動

コンポーネントの生成

Web APIコール

イベントハンドリング

まとめ

Recommend

To Make a Service, a COOL UI is Not Everything!

Go言語でAWSのサービスを使ってみる ~SQS・DynamoDBを試す~