はじめて AngularJS で遊んでみた

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

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

自分のメモ書き

  • inputng-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 controller undefined? - Stack Overflow

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

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

AngularJS: API: filter

  • controller を入れ子に

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

  • フォームまわり

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

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

Rails との関係

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

AngularJSとRailsの丁度良い関係を探る | mah365
AngularJSとRailsの丁度良い関係を探る:コード解説編 | mah365
APIサーバを Rails、フロントエンドを AngularJS で開発する [その①] - Qiita
APIサーバを Rails、フロントエンドを AngularJS で開発する [その②] - Qiita
APIサーバを Rails、フロントエンドを AngularJS で開発する [その③] - Qiita
AngularJSとRails4を組み合わせる - ワザノバ | wazanova
AngularJS on Rails | GMOメディア エンジニアブログ