前回サーバーに対する$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’