読者です 読者をやめる 読者になる 読者になる

Rails Webook

自社のECを開発している会社で働いています。Rails情報やサービスを成長させる方法を書いていきます

RailsでAngularJSを使ってTodoアプリを作成 - 1. AngularJSのインストール方法

Rails中級 AngularJS 連載

f:id:nipe880324:20150112194806p:plain

「RailsでAngularJSを使ってTodoアプリを作成」する連載記事を書いてみました。

「RailsでAngularJSを使ってTodoアプリを作成」の連載1回目です。
まずは、Getting Startedとして、RailsプロジェクトにAngularJSを導入する方法を説明します。

動作確認

  • Rails 4.2.0
  • AngularJS 1.3.8

目次

  1. AngularJSの導入
  2. 動作確認


AngularJSの導入

まず、Railsプロジェクトを作成します。

rails new angualrjs_test
cd angualrjs_test


次に、AngularJS - 公式ページからAngularJSの本体のファイル(angular.min.js)を取得し、vendor/assets/javascripts/に配置

curl https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js > vendor/assets/javascripts/angular.min.js
curl https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js.map > vendor/assets/javascripts/angular.min.js.map


AngularJSの設定ファイルとなるapp.coffeeを作成します。

# app/assets/javascripts/app.coffee

# AngularJSの設定ファイル
# 依存ライブラリを記述する
app = angular.module('sampleApp', [])

# CSRFのトークンを設定するようにする
app.config ($httpProvider) ->
  authToken = $("meta[name=\"csrf-token\"]").attr("content")
  $httpProvider.defaults.headers.common["X-CSRF-TOKEN"] = authToken

# AngularJSがturbolinksと一緒に動くようにする
$(document).on 'page:load', ->
  $('[ng-app]').each ->
    module = $(this).attr('ng-app')
    angular.bootstrap(this, [module])


jqueryとturbolinksも一緒に動くようにするために、jquery-turbolinksを入れます。

# Gemfile
gem 'jquery-turbolinks'
bundle install


jquery.turbolinksangular.minappapplication.jsに追記します。
(Railsが記載したjsファイルを読み込むようになります)

# app/assets/javascripts/application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require angular.min
//= require app
//= require_tree .


application.html.erbng-appディレクティブを追加します。
ng-appディレクティブ内がAngularJSにより解析されるので、その中でAngularJSが使えるようになります)

# app/views/layouts/application.html.erb
<!-- app.coffee の戦闘のangular.moduleで宣言した名前にする -->
<html ng-app="sampleApp">
...


Railsはproducton環境の場合、アセットをコンパイルすることによりAngularJSが動かなくなります。そのため、production.rbconfig.assets.js_compressor = Uglifier.new(mangle: false)を追加します。

# config/developments/production.rb

# Compress JavaScripts and CSS.
# config.assets.js_compressor = :uglifier
config.assets.js_compressor = Uglifier.new(mangle: false)
# config.assets.css_compressor = :sass


2. 動作確認

では、動作確認のために、コントローラーを作成します。

rails g controller Templates index --skip-assets


次のように記載します。
テキストフィールドにng-modelnameを定義し、それを、{{name}}でデータバインティングして動的に表示するようにしています。

# app/views/templates/index.html.erb
<h1>Templates#index</h1>

<div>
  <%= label_tag :naem, "名前" %>
  <%= text_field_tag :name, "", "ng-model" => "name" %>
</div>

<p>こんにちは、「{{name}}」さん。</p>


テキストフィールドに値をいれると、{{}}で囲んだ箇所が動的に変化することがわかるとおもいます。
f:id:nipe880324:20150112194833j:plain:w480


もし、うまく動かない場合は、JavaScriptコンソール(Chromeの場合)を開き、エラーが発生していないか確認してください。
f:id:nipe880324:20150112194844j:plain:w480


以上です。