AngularJSとRails4でRestアプリ作成（５）AngularJSのresourceを使ってshowアクションを追加

wp-admin

3年前

前回サーバーに対する$resourceサービスのRESTアクション（create、index、show、update、destroy）をサービスとして定義しましたので、このサービスを使ってshowアクションを追加します。

１）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を有効にしてハッシュがつかない形にします。
　
２）showページのテンプレートを追加
　
$ vi app/assets/templates/users/show.html

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

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

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

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

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

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

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

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