It’s good to see you in the latest post of my Building themes with AngularJS and JSON REST API series, I hope you enjoy the previous tutorial about pagination in AngularJS WordPress theme. Today I want to show you how to deal with “page not found” scenario in our project. You might be a little bit surprised that we’ve sort of talked about it when we learned the “
otherwise” method in
$routeProvider. It turns out that we still have a few things to cover. So if you have a couple of minutes, just open your favorite code editor and get started.
0. Getting started
From the project repository on GitHub you can get an AngularJS WordPress theme last time we’ve built. If you’re new here, in the series of tutorials I just tried to share my learning path about building a WordPress theme with AngularJS. So far we’ve built one with category archives and pagination, and also a functional search form in it. You can just download it and focus on this tutorial right away, though I do encourage you to check other posts out in your spare time.
1. The “otherwise” method in $routeProvider
As I mentioned in the beginning, the first “page not found” scenario we can easily deal it with the
otherwise method in
Here’s the route paths we’ve set so far:
So if someone visits our site at a random location, for example, “http://siteurl.com/a-fake-path”, she/he will fallback to the “
otherwise” method because the path “
a-fake-path” doesn’t match any route path. With code above she/he will be redirected to the homepage, now let’s enhance the
otherwise method with two params:
controller, just like what we did in those
Just checkout line 28-31, I set a new template
404.html and a new
404 controller, let’s see what do they look like:
Please note the
404.html should be in the
partials directory, and the
404 controller should be in your
scripts.js. Now if you visit the site with a fake path, you’ll see our 404 page like this:
2. When a post doesn’t exist
The second “page not found” scenario is that a visitor may come to a page perfectly match a route path, let’s say if someone visits a post which have been deleted, the location should match our “
/blog/:ID” path, but AngularJS will fail when requesting the post from WP REST API with the
If we just leave it alone we’ll get a blank page when we visit such locations. It’s very confused to any visitor so we should definitely improve it.
In such cases (the route path matches but the post doesn’t exist), we can use the
error method in
$http service to get the error response from WP REST API:
At line 8-14, I did the following things:
- line 8: Besides
res, we also add
statusparameter to the
- line 9: When the error status is
404, a typical “page not found” status code, we’ll manipulate our view to notify our users.
- line 10-12: We add a new property to
is404and set it to
true, change the document title to “Page not found” and add an
errorMessageproperty which is the error message we get from the response.
After that we also need to update our
content.html template so we can display the error message when the post not found:
You can see that I use
ng-if to conditionally display two divs based on the
is404 property. Now when we visit the sample post above again, we can see why it is not found:
The WP REST API provides very clear responses so we can easily spot the issue. For example, if we change the post ID to a string, WP REST API would send us a different error message:
3. When a category doesn’t exist
Now you get the idea that we need to check all route paths to ensure there are corresponding “page not found” messages for each of them.
If you try to add an error method like we did in the
Content controller, you would be surprised that it didn’t work. That’s because when we use the endpoint “
taxonomies/category/terms/?filter[slug]=slug-not-exists” to get terms, it will return an empty array instead of error responses if the term doesn’t exists.
So in such cases, we’ll use a different approach to deliver our error message:
At line 10-13, we check if the response is an empty array, if so, we set the document title and the
pageTitle property to “Category not found”. And we also add a new paragraph to display the error message in the
main.html (at line 17):
The result page would be like the following screenshot:
4. When a paged archive doesn’t exist
The last “page not found” scenario is when a paged archive doesn’t exist. For example, if you change the “posts per page” settings to a larger number, like from 6 to 10, paged archives with higher numbers will be missing.
It’s kind of funny that we have to use another approach to check if the
page parameter is correct. Atn line 12-15, we do so by checking if
- isNaN, which means if the
currentPagevariable is “Not-A-Number“.
- larger than the headers(‘X-WP-TotalPages’). If so, such pages should not exist.
And we update the document title and
pageTitle property accordingly.
Don’t forget that we’ve also created the category paged archive from last tutorial, so let’s modify the
Category controller again (at line 24-27):
It’s not just about “page not found”
I hope now you get the idea that why I’m writing this tutorial to talk about all scenarios, because it’s really not just about “page not found”. As a developer we should also consider user experience whenever we can, so providing descriptive error messages is the least we can do.
I promise you in the next tutorial I’ll show you how to tidy up our
scripts.js by creating an AngularJS service. In the meantime, you can download the final theme from the GitHub repository and have some fun.
Don’t hesitate to contact me if you have any question when following these tutorials I wrote. I’ll get back to you as soon as I can.
I’m a senior web developer helping clients build their websites to grow businesses. Currently I’m based in Taipei, Taiwan.
I write things about WordPress, AngularJS and life. Whenever you’d like to find someone to talk about these topics, just get in touch!