no_picture

Rails で AngularJs を使おうとしてみた

<htmlday> 2013でやったことプラスアルファ。 足りなかった部分はすごい広島 #4内で調査しました。 <htmlday> では AngularJS で遊びました 前にAngularJSを利用したときの復習 AngularJS を rails で使うのに使えそうな gemの調査 <html ng-app> と書けないの時の対処方法 AngularJS を rails で使うのに使えそうな gemの調査 とりあえず、Ruby Toolboxで angularを検索してみました。 候補としては angular-rails anglurajs-rails angular-gem angular-rails-engine と、乱立状態でした。他にもありましたけど、見る元気はありませんでした。 結論をまとめておくと 素の AngularJs でいいのなら angularjs-rails generatorなど、もしかすると便利になるものがあるかもしれないのが angular-gem という感じでした。 まずは、angular-rails を試しました。generator などついていますが、AngularJSの本体が更新されていない状態でした。 また、添付されている angle.js を読み込みすると動作しなかったりと問題もちらほらありました。 次にみたのは angularjs-rails です。これは Javascriptが添付されているだけのシンプルなものでした。添付されているものも最新で、unstable な最新バージョンも添付されていました。読み込みたいだけならこれで良さそうです。x unstableなバージョンをよみこむ場合は application.js に //= require_tree ./angular/unstable と、かけば良さそうです。 3番目に angular-gem です。前述の angularjs をフォークして複数のversion のAngularJSを取りこんでいたりと、なかなか意欲的です。 4つ目は angular-rails-engin です。angular_include_tag というヘルパーを提供してくれて、必要に応じて読込みして使う感じになるようです。 とりあえず、 angular-gem を試していこうかなと思います。

no_picture

AngularJSで遊んだときのメモ

広島ウェブシステム開発勉強会で、AngularJSで遊んだのでそのメモ。 AngularJSってなんぞ Googleとコミュニティによって開発されているWebアプリケーション作成のためのフレームワークらしいです。Googleという名がでてくるように、保守性の高そうな設計がしてある印象を受けました。非常に使いやすかったです。 DOM操作が必要にならない工夫もしてある印象。 特徴としては、 規約をもちいた、ViewとModelの自動化と knockoutJSのようにモデルの変更を検知して自動的に画面が更新される mix-inのようにコントローラへ機能を追加でき、引数からオブジェクトをうけとることで、スコープの制限をしていること htmlに埋め込まれる式は Javascriptではなく、AngularJSのDSLでシェルのパイプのような流れるようなコードが記述できる コンポーネント化しやすい構造 なのかなぁ。印象ですが。スコープをうまく設計してあると思いました。 Angular 日本語の意味は角度っぽいです。由来が全然検討がつきません。 チュートリアルをひととおりやってみました。 http://docs.angularjs.org/tutorial/ github で公開されてるサンプルコードを追っていきます。 node.js は必須ではないです。Mac では pkg が用意されていて簡単にインストールできるのでいれてしまったほうが楽だと思います。 以下、 各章のメモです。 step ごとの diff をみながらすすめぬのがよさそうです。 見ている step を checkout してgit show などなど。 step0 bootstrap $ git checkout -f step-0 して $ scripts/web-server.js でサーバが起動する http://localhost:8000/app/index.html にアクセスすると Nothing here yet! と表示される。 ng-app 命令 <html ng-app> Angular Application のルート要素を指定する 二重の波括弧内に式がかける {{'hoge'}} かける式は Angular Expression であって JavaScriptではないらしい ng-appの指定したモジュールを DOMContentLoaded イベント時に自動で読込む