環境は以下のとおりです。
rails 4.2.3
angularJs 1.4.5
##問題
Angular + rails のSPAで、rootURLにアクセスしたときに、全ページがレンダリングされてしまう。なお、angularではngRouteを使っており、html5modeにしています。
例えば、初めのアクセスから、products/:idのパスへ移動したときはng-viewの部分だけが置き換わるのですが、ルートURLのパス("/")に移動した時だけng-viewだけでなくすべてのビューがレンダリングされてしまいます。
まずrailsのルーティングです。
routes.rb(一部)
get 'products/:id' => 'layouts#index' root to: 'layouts#index'
layouts_controller.rb
class LayoutsController < ApplicationController def index render "layouts/application" end end
application.html.slim(一部)
head meta charset="utf-8" base href="/" body ng-app="myApp" = render "layouts/navigation" .container .ng-view
次にangularのルーティングです。
app.js.coffee.erb
app = angular.module('myApp', ['ngResource', 'ngRoute']) app.config ($httpProvider) -> authToken = $("meta[name=\"csrf-token\"]").attr("content") $httpProvider.defaults.headers.common["X-CSRF-TOKEN"] = authToken app.config(['$routeProvider','$locationProvider', ($routeProvider, $locationProvider) -> $locationProvider.html5Mode true $routeProvider.when '/', templateUrl: "<%= asset_path 'home/top.html' %>", controller: 'TopController' $routeProvider.when '/products/:product_id', templateUrl: "<%= asset_path 'products/show.html' %>", controller: 'ProductController' $routeProvider.otherwise redirectTo: '/' ]) $(document).on 'page:load', -> $('[ng-app]').each -> module = $(this).attr('ng-app') angular.bootstrap(this, [module])
自分の見立てでは、
railsのルートroot to: 'layouts#index'
と
angularのルート$routeProvider.when '/', templateUrl: "<%= asset_path 'home/top.html' %>", controller: 'TopController'
が被っていて、毎回railsのルートが呼ばれた後にangularのルートが呼ばれているのだと思いますが、解決方法がわかりません。
自分の理解不足もあり、上に挙げたコード以外のところに何か記述してあげないといけないのかもしれませんが、調べてもわからない現状です。どなたか、ご教授いただければ幸甚です。
あなたの回答
tips
プレビュー