使用rails在html5mode中重定向到正确的角度路线

Question

我使用html5Mode 删除了angular 中的'#'，它可以工作，但是当我刷新它在rails 中寻找模板而不是角度并抛出找不到模板的错误时。

角度路线

app.config([
    "$stateProvider", "$urlRouterProvider","$locationProvider",
    function ($stateProvider, $urlRouterProvider, $locationProvider) {
        $stateProvider
            .state("home", {
                url: "/",
                controller: "homeCtrl",
                templateUrl: "angular/templates/home.html"
            })
            .state("/dashboard", {
                url: "/dashboard",
                templateUrl: "angular/templates/dashboard/dashboard.html"
            })
            .state("/dashboard.active", {
                url: "/active",
                templateUrl: "angular/templates/dashboard/active.html",
                controller: "activeCtrl"
            })
            .state("/dashboard.inactive", {
                url: "/inactive",
                templateUrl: "angular/templates/dashboard/inactive.html",
                controller: "inactiveCtrl"
            })
            .state("/dashboard.drafts", {
                url: "/drafts",
                templateUrl: "angular/templates/dashboard/drafts.html",
                controller: "draftsCtrl",
                resolve: {
                    drafts: function (DashboardFactory) {
                        return DashboardFactory.drafts();
                    }
                }
            })
            .state("/room", {
                url: "/rooms/:id",
                templateUrl: "angular/templates/rooms/show.html",
                controller: "roomsCtrl",
                resolve: {
                    room: function (RoomFactory, $stateParams) {
                        var roomId = $stateParams.id;
                        return RoomFactory.show(roomId);
                    }
                }
            })
            .state("/search", {
                url: "/search?:latitude&:longitude",
                templateUrl: "angular/templates/search.html",
                controller: "searchCtrl",
                resolve: {
                    search: function (SearchFactory, $stateParams) {
                        var latitude = $stateParams.latitude;
                        var longitude = $stateParams.longitude;
                        return SearchFactory.search(latitude, longitude);
                    }
                }
            })
            .state("/conversations", {
                url: "/conversations",
                templateUrl: "angular/templates/conversations/conversations.html",
                controller: "conversationsCtrl",
                resolve: {
                    conversations: function (ConversationFactory) {
                        return ConversationFactory.showConversations();
                    }
                }
            })
            .state("/messages", {
                url: "/conversations/:id/messages",
                templateUrl: "angular/templates/conversations/messages.html",
                controller: "messagesCtrl",
                resolve: {
                    conversations: function (ConversationFactory, $stateParams) {
                        var conversationId = $stateParams.id;
                        return ConversationFactory.showMessages(conversationId);
                    }
                }
            })
            .state("/notifications", {
                url: "/notifications",
                templateUrl: "angular/templates/notifications/notifications.html",
                controller: "notificationsCtrl",
                resolve: {
                    notifications: function (NotificationFactory) {
                        return NotificationFactory.getNotifications();
                    }
                }
            });

        // use the HTML5 History API
        $locationProvider.html5Mode(true);
    }
]);  

铁路路线

Rails.application.routes.draw do
  require 'sidekiq/web'
  mount Sidekiq::Web => '/sidekiq'

  devise_for :users,
             :path => '',
             :path_names => {:edit => 'profile'},
             :controllers => {:registrations => 'registrations'}
  resource :pages, only: [:edit] do
    collection do
      patch 'update_password'
    end
  end

  resources :conversations, only: [:create, :index] do
    resources :messages, only: [:create, :index]
  end

  resources :notifications do
    collection do
      post :mark_as_read
    end
  end


  root 'pages#home'
  get '/general' => 'pages#general'
  get '/drafts' => 'rooms#drafts'
  get '/active' => 'rooms#active_listings'
  get '/inactive' => 'rooms#inactive_listings'
  get '/search' => 'pages#search'
  get '/change_password' => 'pages#change_password'



  resources :rooms do
    post :make_active
    post :make_inactive
    resources :photos, only: [:index, :create, :destroy]
  end

  mount ImageUploader.direct_endpoint, at: "/attachments/images"

end

同样在application.html.erb 中，我已将基数设置为<base href="/">..

如果它的路由页面(localhost:3000) 页面刷新工作..但如果它的搜索页面http://localhost:3000/search 或任何其他页面它不会工作。

但是当不使用html5mode 时，一切正常。我在这里做错了吗？在这里遵循的正确方法是什么？？

Answer 1

您可以禁用 requireBase 属性，如下所示。

 $locationProvider.html5Mode({
    enabled: true,
    requireBase: false
  });

请指定 $routeProvider.otherwise("home")。还。它应该可以工作。