一からRuby on Rails備忘録

Ruby on Rails Tutorial AngularJSのルート設定

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。今回は、AngularJSの機能を使って静的ページのルーティングの設定を行います。
 
home、about、help、contactなどの静的ページのルーティングの設定を行います。

1)AnguraJSのrouteの導入
 
①angular-routeをインクルード
 
$ vi app/assets/javascripts/application.js
 
//= require angular-route
 
②ngRouteを依存性の設定に追加
 
$ vi app/assets/javascripts/mymodule.js
 
myModule = angular.module(‘myModule’, [‘ui.bootstrap’,’ngRoute’]);
 
2)ルートプロバイダ、パーシャルテンプレートの設定
 
$ vi app/assets/javascripts/mymodule.js.erb

myModule = angular.module('myModule', ['ui.bootstrap','ngRoute']);

myModule.config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
    .when("/static_pages/help", {
     templateUrl: "<%= asset_path('static_pages/help.html.erb') %>"
     })
    .when("/static_pages/about", {
     templateUrl: "<%= asset_path('static_pages/about.html.erb') %>"
     })
    .when("/static_pages/contact", {
     templateUrl: "<%= asset_path('static_pages/contact.html.erb') %>"
     })
    .otherwise({
     templateUrl: "<%= asset_path('static_pages/home.html.erb') %>"
     });
});

 
3)パーシャルテンプレートファイルを作成
 
$ vi app/assets/templates/static_pages/home.html.erb
 
<h2>Home</h2>
 
同様に、aboutとhelp、contactも作成
 
$ vi app/assets/templates/static_pages/about.html.erb
$ vi app/assets/templates/static_pages/help.html.erb
$ vi app/assets/templates/static_pages/contact.html.erb
 
4)レイアウトテンプレートファイルを修正
 
Railsのビューではなく、AngularJSのルーティング、パーシャルレイアウトを使用するので<%= yield %>の部分を<div ng-view></div>に変更します。
 
$ vi app/views/layouts/application.html.erb

 :
  <%= render 'layouts/header' %>
  <div ng-view></div>
  <%= render 'layouts/footer' %>
 :

 
5)Railsのルート設定
 
①Railsのレイアウトファイルをrootにする
layoutsディレクトリ内のapplication.html.erbがrootになるようにするため、前回下記のようにLayoutsコントローラを作成しています。
 

$ vi app/controllers/layouts_controller.rb
 
class LayoutsController < ApplicationController
  def index
    render "layouts/application"
  end
end
 
$ vi config/routes.rb
  root 'layouts#index'

②デフォルトルートの設定
 
ブラウザに直接http://localhost:3000/static_pages/help入力した場合やブラウザをリロードするとno routeのエラーとなってしまうのを防ぐため、下記設定を追加してみました。

$ vi config/routes.rb
  get 'static_pages/*other', to: 'layouts#index'

 
これでリロードしてもrootにアクセスされ、no routeのエラーが発生しなくなりました。とりあえずこの設定で様子を見ようと思います。
 
6)Railsレイアウトファイルを修正
 
AngularJSのv1.3以降では、$locationサービスでhtml5モードを使用する場合、ベースURLを指定しないと下記エラーが発生してしまいます。
 
$location in HTML5 mode requires a <base> tag to be present!
 
そこでレイアウトファイルに下記baseタグを設定します。
 
$ vi app/views/layouts/application.html.erb
 

<head>
:
  <base href="/">
</head>

 
7)動作確認
 
下記URLにアクセスし、動作確認
http://localhost:3000/static_pages/help
http://localhost:3000/static_pages/about
http://localhost:3000/static_pages/contact

モバイルバージョンを終了