0

angular'#'を削除しましたが、それは機能しますが、角度の代わりにレールでテンプレートを探して、テンプレートを見つけられません。レールでhtml5modeの角度経路を修正するようにリダイレクト

角度ルート

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のルート私は<base href="/">にベースを設定しているapplication.html.erbにも

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 

..

もしそのルートページ(localhost:3000)ページリフレッシュは機能しますが、そのth e検索ページhttp://localhost:3000/searchまたは動作しない他のページ。

しかし、使用しない場合は、すべてが正常に動作します。html5mode私はここで何か間違っているのですか?ここに続く正しいアプローチは何ですか?

+0

私はRuby on Railsに慣れていませんが、Angular/JSアプリケーションの観点からは、通常、登録されていないルートにどのページを配信するかを指定していないときに発生します。通常、この問題は、index.htmlがすべての不特定のルートに対して提供されたページであることを確認することで修正されています。 – Himmel

+0

@Himmel純粋な角型アプリではなく、htmlページもほとんどありません。私はレールの各側面にカスタムを書く必要があると思う。 – Abhilash

答えて

0

以下のように、requireBaseプロパティを無効にすることができます。

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

さらに、$ routeProvider.otherwise( "home")と指定してください。また、それは動作するはずです。

+0

私はそれを私のapplication.html.erbでやったことがあります。また、質問にも言及されています。 – Abhilash

+0

まだまだ動かない... – Abhilash

+0

レールからのリダイレクトが問題です... – Abhilash

関連する問題