kakakakakku blog

Weekly Tech Blog: Keep on Learning!

はじめて AngularJS で遊んでみた

AngularJS ドットインストール

最近 AngularJS を使ってるって話をよく聞くのに全く使ったことがなかったので，またドットインストールにお世話になってみた．まぁ AngularJS のバージョンが多少古いってのはあると思うけど，そもそも AngularJS ってどんな感じなの？っていうのを知ることが目的なので，特に問題ないという判断で．凄く勉強になった．

全12回をザッと通してみて，ああ確かに簡単にフロントをリッチにできるなという印象．ドットインストールの例だと API 叩いて json を受け取るみたいなアーキテクチャの例はないけど，そこはまた別のサンプルなど見て勉強すれば良いかなと思ってる．

自分のメモ書き

  • input に ng-model を紐付けると入力値がそのまま表示されてビックリ
<input type='text' ng-model='name'>
<p>{{name}}</p>
  • ドットインストールをやるだけなら素直に 1.0.1 を使う

AngularJS — Superheroic JavaScript MVW Framework を見ると，最新版が 1.3.8 になってたから，そのバージョンで script を読み込んだけど，そうすると ng-controller の指定でエラーになった．ちょっと調べてみたところ 1.3.0-beta.15 以降で仕様が変わってるみたいなので，ここは素直に 1.0.1 にした．

javascript - Why is my Angular controller undefined? - Stack Overflow

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
  • filter の機能は結構良さそう

filter を使えば簡単に表示形式を変えられたりできるし，ng-repeat と filter の組み合わせで検索フィルターを作れるのはかなり凄い感じがした．

AngularJS: API: filter

  • controller を入れ子に

ng-click でスコアをインクリメントするのも簡単だった．

  • フォームまわり

フォームのバリデーション回りは流石にリッチに書けるなーという印象が強かったのと，json filter で状態を確認できる Tips は良いなと．

<pre>{{user | json}}</pre>

Rails との関係

最近はプロダクトで Rails 中心に使ってるので，Rails + AngularJS っていう組み合わせで相乗効果出せないかな？というのが気になるので，引き続き勉強してみる．