AngularJSのチュートリアルを動かす
AngularJSの公式チュートリアルを実際に動かしてみます。 といっても、何も難しいことではないんですけどね・・・
https://docs.angularjs.org/tutorial
まずはチュートリアルをcloneします。Macにはgitは標準で入っているようですので安心。
$ git clone --depth=14 https://github.com/angular/angular-phonecat.git
とりあえず動かしていましょう。
$ cd angular-phonecat/
$ npm start
bowerがインストールされました。後々インストールしようとしていたのでまぁOKです。
Karmaとか個別に動かさずにnpmで動かしてねって言ってるのでそうします。詳しくはまだわかってないのですが、多分直下にあるpackage.jsonが適切に設定されているから正しく動いているんでしょうね。
Starting up http-server, serving ./ on port: 8000
Hit CTRL-C to stop the server
ターミナルが占拠されました。終わらせるためにはプロセスを殺す必要があるんですね。 ブラウザで以下のURLを叩くと、画面が出てきました。
http://localhost:8000/app/index.html
チュートリアルの別のステップにするためには、checkoutしなおしてあげれば良いみたいです。
ちなみにチュートリアルの各ページの先頭にcheckoutのためのコマンドが書いてありますので、コピっとペっとしてあげればOKです。
$ git checkout -f step-0
Note: checking out 'step-0'.
You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.
If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:
git checkout -b new_branch_name
HEAD is now at 0c189aa... step-0 bootstrap angular app
※何故かハマってしまったことなんですが、cloneした後すぐにstep-0でcheckoutするとjqueryのモジュール読み込みがうまくいかないようで、正しく動かなくなってしまいます・・・なので、最初に起動してからcheckoutして動かしたほうが良さそうです。まぁstep-0はホントにHelloWorldなのでわざわざ動かすほどのものでもない気がしますが・・・
次はテストもしてみましょう。先ほどのターミナルとは別の端末を開いて以下のコマンドを実行です。
$ npm test
ブラウザが立ち上がりました。またターミナルを占拠されています。
Chrome 34.0.1847 (Mac OS X 10.9.2): Executed 1 of 4 SUCCESS (0 secs / 0.037 secs
Chrome 34.0.1847 (Mac OS X 10.9.2): Executed 2 of 4 SUCCESS (0 secs / 0.042 secs
Chrome 34.0.1847 (Mac OS X 10.9.2): Executed 3 of 4 SUCCESS (0 secs / 0.045 secs
Chrome 34.0.1847 (Mac OS X 10.9.2): Executed 4 of 4 SUCCESS (0 secs / 0.048 secs
Chrome 34.0.1847 (Mac OS X 10.9.2): Executed 4 of 4 SUCCESS (0.207 secs / 0.048 secs)
テストも成功しているみたいですね。
今回はtest/unit配下に4つファイルがあり、それらが実行されているようですね。テストにはKarmaが動いて、test/karma.conf.jsの設定にそって動いているようです。（という雰囲気をpackage.jsonから感じます・・・）
ちなみに、Karmaの面白いのが、テストのプロセスが上がっている間はファイルを監視しています。
テストの中身を変更すると、即座にテスト結果がログとして流れます。試しにテストを失敗させたりするとErrorがでます。
Chrome 34.0.1847 (Mac OS X 10.9.2): Executed 1 of 4 (1 FAILED) (0 secs / 0.036 s
Chrome 34.0.1847 (Mac OS X 10.9.2): Executed 2 of 4 (1 FAILED) (0 secs / 0.04 se
Chrome 34.0.1847 (Mac OS X 10.9.2): Executed 3 of 4 (1 FAILED) (0 secs / 0.043 s
Chrome 34.0.1847 (Mac OS X 10.9.2): Executed 4 of 4 (1 FAILED) (0 secs / 0.045 s
Chrome 34.0.1847 (Mac OS X 10.9.2): Executed 4 of 4 (1 FAILED) (0.358 secs / 0.045 secs)
なるほど、この2つのプロセスを立ち上げながら開発進めていく感じなんですね。
※実際はtest/karma.conf.jsにあるautoWatchがtrueになっているからですね。デフォルトの設定ということなのできっと推奨なんでしょうね。
これでチュートリアルはひと通り動きましたかね？細かいところを見てみるとまだまだ掘り下げたいところがたくさんあったのですが、そのへんは徐々に調べていきたいと思います。
