Angular CLI を使って Angular2 RC3 で Tour of Heroes
Angular2 が RC 版ということで、さわってみることに。 とりあえず公式のチュートリアル Tour of Heroes をやります。
完成品
チャプターごとにコミットを分け、さらにタグを打っています。
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 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
- Github Pages に Deploy
ng github-pages:deploy
こんな感じかな?
これだけのコマンドで他は気にしなくていいんだからお手軽ですね。
感想
Angular CLI を使うとひな形が作成されるので簡単だったと思います。 SystemJS の部分とかもある程度は自動でやってくれるみたいなので。
Angular2 についてはチュートリアルをやった限りでは好印象ですが、Angular1 のときのように本気で使うと学習コストは高そうですね。たぶん。 チュートリアルをやった程度では、できたつもりになっているだけで全然理解していないって説もある。
TypeScript、というか ES6 の文法になって、書いていて楽しいなぁと思える部分も多かったので、リリースされる前にもう少しさわってみようかなぁと思います。