Help us understand the problem. What is going on with this article?

AngularJS with Rails

More than 5 years have passed since last update.

#tqrk07でのLTの一部です。
AngularJSとRailsを組み合わせてWEBアプリケーションを作りたい人のために書きました。

AnuglarJSをどのようにして管理するか

Bundler

Railsの中でAngularJSを扱います。
そのための準備は gem 'angularjs-rails' これだけです。
この時の主従関係は Rails が主であり、AngularJS が従であると言えます。
普段と同じように jsファイルは assets 以下に配置するので、Railsに元々備わっている asset pipeline が有効です。
Googleで"AngularJS Rails"と検索すると、こちらのやり方ばかり引っかかるので恐らくBundlerで管理するのがポピュラーなんだと思います。

ちなみに、 egghead.io では、bower-railsを使ってAngularJSを管理する方法を紹介しています。
package.jsonでAngularJSを管理するということ以外、Bundlerで管理するのと大した違いは無さそうです。

Bower

Railsとは別にAngularJS Appを構築します。
つまり、AngularJS(クライアントサイド)とRails(サーバーサイド)の役割を完全に切り離し、RailsにはAPI ServerとしてJSONをレンダリングする仕事だけを与えます。
クライアントサイドの構築にはBower, Grunt, Yeomanというようなエコシステムを利用します。

ちなみに、僕はこちらの方法を採用しています。
理由としては

  • erbの中にAngularJSのDSLが混入するのは見栄えが良くないと感じたから
  • AngularJSとRailsの境界線が曖昧だと具合が悪くなりそうだから
  • サーバーサイドのフレームワークの変更にも柔軟に対応出来るから

です。
詳細はGithubをご覧下さい。
https://github.com/nekova/animatch

Tips

このTipsは既にAngulaJS Appをbuildする段階まで来ている人向けです。
フロントエンドのエコシステムを利用してAngularJS Appの開発をする場合、Railsのasset pipelineに頼ることは出来ません。
ですから、buildをする際には、$ grunt build というタスクを実行してjsやcssをminifyします。
しかし、grunt buildでは親ディレクトリをminifyファイルの生成先に指定することは出来ないので、Rails Appのrootディレクトリにあるpublic/に直接渡すことは出来ません。
つまり、minifyしたファイルをpublicディレクトリに自分でcopyする必要があるのです。
この問題を解決するためのRake taskを用意しましょう。

build_ngapp.rake
namespace :ngapp do
  desc "run 'grunt build' and copy the dist to public dir"
  task :build do
    system('grunt build --gruntfile ngapp/Gruntfile.js')
    system('rm -rf public/*')
    system('cp -r ngapp/dist/ public/')
  end
end

まず、通常通りgrunt buildでminifyした後に、publicディレクトリを掃除します。
最後にngapp/distにあるminifyされたファイルをpublicディレクトリにコピーするというタスクです。

AngularJS, Rails and You?

AngularJSの学習コストの高さに面食らって、なかなかスピードに乗った開発が出来ませんでしたが、1ヶ月ほど触っていると徐々に感覚が掴めてきました。
僕はAngularのDSLが嫌いではないので今後も使い続けたいと思っています。
このポストが誰かの助けになれば幸いです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away