AngularJS on Rails
AngularJSとrailsの連携に関するメモです。
参考は以下のサイトを参考にしました
まずはRailsプロジェクトを作成しておく。
Gemfileには今回AngularJSと連携するためにangular-gemを追加しておく。
gem 'angular-gem'
ちょっと前にやったので忘れてしまったが、多分
を実行。
rails g angular:install
次にAngularJSの設定。
今回はeventsテーブルのデータの一覧表示なので、関連するcoffeescriptファイルたちは次のようになる(JSでなくcoffeescriptで書いてます）
app/assets/javascript/application.js に以下を追加
18 //= require app
19 //= require_tree ./angular
app/assets/javascript/app.js.coffee
window.App = angular.module('LifePhotos', ['ngResource'])
app/assets/javascripts/angular/controllers/events_ctrl.js.coffee
1 App.controller 'EventsCtrl', ['$scope', ($scope) ->
2 $scope.message = "Angular Rocks!"
3 ]
4 App.controller 'EventsCtrl', ['$scope', 'Events', ($scope, Events) ->
5 $scope.events = Events.query()
6 ]
app/assets/javascripts/angular/services/events.js.coffee
1 App.factory 'Events', ['$resource', ($resource) ->
2 $resource '/events/event_list'
3 ]
続いてRailsのコントローラは、
app/controller/events_controller.rb
10 def event_list
11 @events = Event.all
12 render json: @events, status: 201
13 end
そしてview側。
app/views/layouts/events.html.erb
1
2
3
4LifePhotos
5
6
7
8 <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
9 <%= csrf_meta_tags %>
17 途中省略
28
29
30
31 <%= javascript_include_tag "application" %>
app/views/events/index.html.erb
<div class="content" ng-controller="EventsCtrl">
<div class="content_div">
<u;1 ng-show="events.length" style="list-style:none;padding:0">
件数：{{events.length}}
<li ng-repeat="event in events">
{{event.title}} {{event.start}} から {{event.end}} | <a href='/events/{{event.id}}' >詳細</a>
</li>
</u1>
</div>
<br>
</div>
