angular-cliで始めるAngular2

この記事はEureka Advent Calendar 2016 19日目の記事です。

18日目はサルバさんの「年末なのでtext/template周りを歩いて回ってみた」でした。

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

2016年も終わろうとしていますが、2016年といえばAngular2がリリースされた年でした。

そんなAngular2アプリをサクサク作れるツールがangular-cliです。

https://cli.angular.io/

image

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ポートでサーバーが起動します。

image

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と通信してレスポンスを出力できました。
image
イベントハンドリング
クリックイベントのハンドラは(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言語における標準正規表現ライブラリのパフォーマンスとアルゴリズム、及びこれらとの付き合い方」です。お楽しみに!
Like what you read? Give eureka_developers a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.