WordPress REST API を使用しており、AngularJS アプリには次のような状態があります。
.state('public.blog', {
abstract: true,
url: '/blog',
template: '<ui-view/>',
})
.state('public.blog.home', {
url: '/',
templateUrl: 'public/blog.html',
controller: 'PublicBlogCtrl',
controllerAs: 'vm',
})
.state('public.blog.post', {
url: '/:slug',
templateUrl: 'public/blog.post.html',
controller: 'PublicBlogPostCtrl',
controllerAs: 'vm',
})
たとえば、「 http://example.com/blog/what-is-angularjs 」のような記事があります。次のようにアプリケーション内のリンクをクリックすると、正常に動作します。
<a ui-sref="public.blog.post({ slug: post.slug })">
しかし、問題は、ブラウザのアドレス バーに直接URL ' http://example.com/blog/what-is-angularjs ' を書き込むときです。これを行うと、angular は URL を処理できず、それをどの状態とも一致しない間違った URL として認識し、$urlRouterProvider.otherwise('/404');を探します。マイ404 - Not Found
ページを表示します。
それで、何が悪いのですか?
更新番号 1
スラッグ投稿のスラッグをパラメーターとして送信すると問題が発生しますが、投稿の ID を使用して投稿を取得すると、問題なく動作します。だから、wp-api のスラッグに何か問題があると思います。
更新番号 2
コントローラーは次のようになります。
function PublicBlogPostCtrl($scope, $stateParams, WPService) {
var vm = this;
WPService.getPost($stateParams.slug).success(function(res) {
$scope.post = res[0];
}).error(function(err) {
console.error(err);
});
}
app.controller('PublicBlogPostCtrl', PublicBlogPostCtrl);
そして、WPService.getPost
以下のように:
WPService.getPost = function(slug) {
return $http.get('wp-json/wp/v2/posts/?filter[name]=' + slug).success(function(res, status, headers) {
return res;
}).error(function(err) {
return err;
});
};