はちゅにっき

こっちのブログはまったり更新

Angular CLI を使って Angular2 RC3 で Tour of Heroes

Angular2 が RC 版ということで、さわってみることに。 とりあえず公式のチュートリアル Tour of Heroes をやります。

完成品

github.com

チャプターごとにコミットを分け、さらにタグを打っています。

Angular CLI を使うと簡単に Github Pages に Deploy できるとのことでしたので、実際に払い出しもしてみました。

https://hatyuki.github.io/tour-of-heroes/

あら簡単。

公式の Live Example が動かなくなっているので、今がチャンス?

予備知識

Angular1 は以下の記事で書いた程度にしか使ったことがなく、とりあえず概要・概念くらいは分かる感じ。

AngularJS で Semaphore したい - はちゅにっき

TypeScript も本格的に使ったのは初めてでした。 gulpfile.babel.js を何度か書いたことがあるので、ES6 の知識がある程度役立ちました。 const let () => { } くらいだけどね!

今回は「Angular CLI を使ったら簡単だよ」と だまされた 教えてもらったので Angular CLI を使ってみることにしました。 実際にある程度お手軽ではある。

というわけで、だいたいほぼ初めてさわる感じです。

そのた

チュートリアルを普通に進めていくと 6. Routing で「チュートリアルで使っている Router は Deprecated だけどな!」って言われるので、以下のマニュアルを泣きながら読んで進めて行く感じでした。

angular.io

正しいドキュメントがあるって素晴らしい。

あとチュートリアルを進めるだけだと「そこの要素にそのスタイル適用されないよね?」みたいなところがありますが、そこはスキップしました。

てすと?なにそれおいしいの。

環境の構築

Angular CLI をインストール

npm install -g でインストールするようドキュメントにはあるけれど、試しに使ってみたいだけなのでグローバルではなくローカルにインストール。 Angular CLI は npm のリポジトリから取得すると少し古かったので、Github から直接取得。

mkdir angular2
cd angular2
npm install --save-dev https://github.com/angular/angular-cli.git

direnv を利用して ng コマンドへの PATH を通しておく。 こういうときは direnv がとても便利ですね。

direnv edit .

# エディタが開いたら以下を記述
layout node

ng init

angular-cli をローカルでインストールした場合、その場で ng new をすると怒られてしまう。

どうやら package.json の位置を見てプロジェクトのルートを決めているようなので、 いったんプロジェクト用のディレクトリを作成し npm init --yes してから ng init する。

mkdir tour-of-heroes
cd tour-of-heroes
npm init --yes
ng init --style=scss

ためしに --style=scss を指定してみた。

package.json を上書きするかと尋ねられるが、ダミーで作っただけなので迷わず Yes

あとは Angular CLI で作成されたファイルをベースに開発をしていけば OK。

お世話になったコマンド

  • サーバの起動
npm start
  • Component / Class / Service の作成
ng generate component NAME
ng generate class NAME
ng generate service NAME
  • がっかり
ng generate route
ng github-pages:deploy

こんな感じかな?

これだけのコマンドで他は気にしなくていいんだからお手軽ですね。

感想

Angular CLI を使うとひな形が作成されるので簡単だったと思います。 SystemJS の部分とかもある程度は自動でやってくれるみたいなので。

Angular2 についてはチュートリアルをやった限りでは好印象ですが、Angular1 のときのように本気で使うと学習コストは高そうですね。たぶん。 チュートリアルをやった程度では、できたつもりになっているだけで全然理解していないって説もある。

TypeScript、というか ES6 の文法になって、書いていて楽しいなぁと思える部分も多かったので、リリースされる前にもう少しさわってみようかなぁと思います。