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
私はここで何か間違っているのですか?ここに続く正しいアプローチは何ですか?
私はRuby on Railsに慣れていませんが、Angular/JSアプリケーションの観点からは、通常、登録されていないルートにどのページを配信するかを指定していないときに発生します。通常、この問題は、index.htmlがすべての不特定のルートに対して提供されたページであることを確認することで修正されています。 – Himmel
@Himmel純粋な角型アプリではなく、htmlページもほとんどありません。私はレールの各側面にカスタムを書く必要があると思う。 – Abhilash