初心者マークのAngular.js

雪国生まれなのに寒いのが苦手な@Uemmra3です;;;
この記事はAngularJS Advent Calendar 2014 - Adventarの4日目の記事です。
昨日はMitsuru Ogawaさんのいま一番気に入っているAngularJSのプロジェクト構成 | I am mitsuruogでした。
開発するのに直感的に分かり易いディレクトリ構成って、特にデスマに佳境に入って来た時には結構重要ですよね。


自己紹介
今年の3月まではたこ焼き都市のOsaka(Macのフォントではない)のSIerで働いていて、"フロントエンド is 何?"な状態です。
2013年のカレー Advent Calendar 2013 - Adventarで仲良くなった@tan_go238さんの主催するKnockoutJS勉強会 in Kansai(3月) - connpassで発表を行うという暴挙に出ました。Knockout.jsの日本語ドキュメントサイトを運営されている@ken_zookieさんの発表の後に、図らずも息子にレーザーポインタでケツを狙われていたという笑いにあふれる発表でした。
そういう中でAngularJSについても聞いた事がある程度で、Knockoutよりは重めのフレームワーク、という印象を持っている程度です。MVCは分かるけどMVVMの概念がいまだ理解できてません。

そういう初心者がAdvent Calendar駆動で、ドットインストールのAngularJS入門
http://dotinstall.com/lessons/basic_angularjs
をやってみる事にしました。

実行環境はこんな感じです。
会社の事務とか総務用のPCなのでYEOMANとかでインストールせずに試しています。

OS: Windows 7 Professional sp1(32bit)
ブラウザ: Google Chrome バージョン 39.0.2171.71 m
テキストエディタ: Sublime Text 2.0.2
AngularJS:1.2.27 (1.3.Xでも良かったのですが、元が1.0.1だったので変にハマりたくなかった)

で試した記録や感想を置いておきます。

  1. 1.AngularJSとは何か?

AngularJSの紹介です。ここは特に問題ないでしょう。

  1. 2.はじめてのAngularJS

いきなりハマりました;;;
htmlタグに ng-app を指定するのを忘れていました。

scriptタグの指定はこのように:

  1. 3.コントローラーを使ってみよう

htmlとjs(というかjsonデータ)の連動のサンプルです。なかなか面白い!

  1. 4.フィルターを使ってみよう

問題発生!
通貨の単位指定で
{{68000*200|currency:"\"}}
ではダメで
{{68000*200|currency:"\\"}}
としないと動かない模様。

  1. 5.ループで使えるフィルター

件数を絞るフィルターlimitToや、並べ替えできるフィルターorderByや、formの値で絞るフィルターfilterがある。
それぞれUnixのhead、sort、grepに近い動作で、パイプで接続できるのもなんとなくそれっぽい。

  1. 6.編集ページの一番下のもろもろはどう使うのか?

ループで使える変数を色々紹介。変数は$で始まる模様。
$index は0始まり。
最初でも終わりでもないフラグの$middleというのが面白い。

  1. 7.コントローラーのネストとイベント

子供のコントローラから親のイテレータを呼べる!のがポイント。
というか、この動作がフロントエンドだけでできるのが面白い!
OSC広島で@albatrosaryさんがしゃべってらしたMEANスタックというのはこういう背景なのだろう。

  1. 8.フォームの基本を学ぼう

フォーム入門の前半部分。
preタグの中にuser|json という書き方でデバッグができる模様

  1. 9.エラーメッセージを表示する

バリデーション、または入力チェック。
formタグにnovalidateをつけてブラウザのvalidationを停止するらしい。
入力必須や文字列長などを簡易にチェックできる。エラーメッセージはng-showとかng-hideとか。

いったん飯を食うぞ。

  1. 10.フォーム部品を設置しよう (1)
  2. 11.フォーム部品を設置しよう (2)
  3. 12.フォーム部品を設置しよう (3)

明日は中国地区のFirefoxOS勉強会にも来て頂いた@sakamakiさんの記事です。
GoogleI/O 2014で発表されたMaterial Designの記事、私、気になります!