When Page Not Found In Your AngularJS WordPress Theme

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 $routeProvider.

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: templateUrl and controller, just like what we did in those when methods:

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 $http service.

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 status parameter to the error function.
• 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 $scope called is404 and set it to true, change the document title to “Page not found” and add an errorMessage property 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 currentPage variable:

• isNaN, which means if the currentPage variable 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.