Step by Step Ruby on Rails

Ruby on Railsで実際にWebサイトを構築する手順をまとめています。

AngularJSとRails4でRestアプリ作成(5)AngularJSのresourceを使ってshowアクションを追加

前回サーバーに対する$resourceサービスのRESTアクション(create、index、show、update、destroy)をサービスとして定義しましたので、このサービスを使ってshowアクションを追加します。
 
1)AngularJSのルート設定にshowを追加
 
$ vi app/assets/javascripts/mymodule.js.erb

mymodule.config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
    .when("/users/:id", {
      templateUrl: "<%= asset_path('users/show.html') %>",
      controller: "UsersShowCtrl" })

※$locationProviderのhtml5Mode デフォルトは無効で、URLにhttp://www.example.com/#/aaa/のようにハッシュ(#)が追加されますが、html5Modeを有効にしてハッシュがつかない形にします。
 
2)showページのテンプレートを追加
 
$ vi app/assets/templates/users/show.html

<h3>ユーザー詳細情報</h3>
<div>
  <h5>ユーザー名</h5>
    {_{user.name}}
  <h5>メールアドレス</h5>
    {_{user.email}}
</div>

 
3)showページに対応するAngularJSコントローラを定義
 
$ vi app/assets/javascripts/mymodule.js.erb

mymodule.controller("UsersShowCtrl", function($scope, $routeParams, userResource) {
  $scope.user = userResource.show({ id: $routeParams.id });
});

 
4)Railsコントローラを設定
 
$ vi app/controllers/users_controller.rb

def show
  @user = User.find(params[:id])
  render json: @user
end

 
5)インデックスページにshowページへのリンク追加
 
$ vi app/assets/templates/users/index.htm

 :
<td>
  <a href="/users/{_{user.id}}">詳細</a>
</td>
 :

 
6)ブラウザリロード対策
 
トップページからの遷移では問題なく表示出来ましたが、ブラウザリロードなどで"http://localhost:3000/users/1"に直接アクセスすると"No route"のエラーとなってしまうため、とりあえず下記ルート設定を追加しました。
 
$ vi config/routes.rb get 'users/*other', to: 'layouts#index'