ui-router activates 404 instead of requested state

Question

I am using WordPress rest API and I have states in my AngularJS app as below:

    .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',
    })

And for example i have an article like 'http://example.com/blog/what-is-angularjs'. It's work fine when I clicking on a link in my application like this:

<a ui-sref="public.blog.post({ slug: post.slug })">

But the problem is when I writing the URL 'http://example.com/blog/what-is-angularjs' directly in browser address bar. When I do this, angular can't handle URL and recognize it as a wrong URL which doesn't match with any state, then it looks for $urlRouterProvider.otherwise('/404'); and shows my 404 - Not Found Page.

So whats the wrong?

UPD #1

When I send slug post's slug as parameter the issue occurs, but when I use post's ID to retrieve post, it's work fine. So I think some thing is wrong in wp-api's slug.

UPD #2

The controller looks like this:

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);

And the WPService.getPost as below:

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;
  });
};

score 1 · Answer 1 · answered Feb 07 '16 at 15:29

1

Could it be the url for blog posts? instead of /:slug, should it be /blog/:slug?

It would work from clicking on a link because you supply the state and slug directly instead of via a URL.

answered Feb 07 '16 at 15:29

SirUncleCid

187
1
7

Thanks for answering @SirUncleCid. I don't think It's cause of supplying state. It's automatically generate URL based on state and it's childs. I updated my question. – bobsilon Feb 07 '16 at 18:45
What does the controller look like? – SirUncleCid Feb 08 '16 at 00:48
Added the controller and WPService.getPost() to **UPD #2** – bobsilon Feb 08 '16 at 08:12
It still goes to 404? The only thing that I can see being a possible problem is that your getPost returns an array instead of a single post. – SirUncleCid Feb 08 '16 at 12:58
oops you right, i wrote the wrong code here, i corrected it. I using the correct one in my code and it still goes 404. Thanks for getting back to me. If I find the solution, I've put it here. – bobsilon Feb 08 '16 at 13:13
1

I still think it's an issue with the routing, specifically the url. Have you tried url: '/blog/:slug' at least? – SirUncleCid Feb 08 '16 at 14:33
Yes I changed the `public.blog.post` state's url to `/blog/:slug` and yes it's work fine as expected. But now i have two `/blog` in browser address bar, like `example.com/blog/blog/what-is-angularjs`! Whats the wrong now? – bobsilon Feb 08 '16 at 15:53
Try, perhaps, instead just 'blog', and 'blog.post', etc. – SirUncleCid Feb 09 '16 at 16:32

ui-router activates 404 instead of requested state

1 Answers1