When Page Not Found In Your AngularJS WordPress Theme

404.html

<h1>Page Not Found</h1>
<p>Sorry, but nothing can be found at this location.</p>

content.html

<div ng-if="!is404">
	<h1 ng-bind-html="post.title"></h1>
	<slick dots="true" autoplay="true" slides-to-show="1" slides-to-scroll="1" init-onload="true" data="media" style="width:300px">
		<div ng-if="image.is_image" ng-repeat="image in media">
			<img alt="{{image.title}}" ng-src="{{image.attachment_meta.sizes.medium.url}}" />
		</div>
	</slick>
	<div ng-bind-html="post.content"></div>
</div>
<div ng-if="is404">
	<h1>Page Not Found</h1>
	<p>{{errorMessage}}</p>
</div>

main.html

<search-form></search-form>
<p>Categories:</p>
<ul>
	<li ng-repeat="category in categories">
		<span ng-if="current_category_id && category.ID == current_category_id" ng-bind-html="category.name"></span>
		<a ng-if="!current_category_id || category.ID != current_category_id" href="category/{{category.slug}}" ng-bind-html="category.name"></a>
	</li>
</ul>
<p>{{pageTitle}}</p>
<ul>
	<li ng-repeat="post in posts">
		<a href="blog/{{post.ID}}" ng-bind-html="post.title"></a>
		<a href="blog/{{post.ID}}" ng-if="post.featured_image.attachment_meta.sizes.thumbnail.url"><img ng-src="{{post.featured_image.attachment_meta.sizes.thumbnail.url}}" alt="{{post.featured_image.title}}" /></a>
		<div ng-bind-html="post.excerpt"></div>
	</li>
</ul>
<p ng-if="is404">{{errorMessage}}</p>
<posts-nav-link prev-label="&laquo; Previous Page" next-label="Next Page &raquo;"></posts-nav-link>

scripts-404-controller.js

// ...

//404 controller
app.controller('404', function() {
	document.querySelector('title').innerHTML = 'Page not found | AngularJS Demo Theme';
});

// ...

scripts-category-controller-2.js

// ...

//Category controller
app.controller('Category', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
	$http.get('wp-json/taxonomies/category/terms').success(function(res){
		$scope.categories = res;
	});

	$http.get('wp-json/taxonomies/category/terms/?filter[slug]=' + $routeParams.category).success(function(res){
		if (!res.length) {
			document.querySelector('title').innerHTML = 'Category not found | AngularJS Demo Theme';
			$scope.pageTitle = 'Category not found';
		} else {
			$scope.current_category_id = res[0].ID;
			var currentPage = ( ! $routeParams.page ) ? 1 : parseInt( $routeParams.page );
			$scope.pageTitle = 'Posts in ' + res[0].name + ' Page ' + currentPage + ':';
			document.querySelector('title').innerHTML = 'Category: ' + res[0].name + ' | AngularJS Demo Theme';

			var request = 'wp-json/posts/?filter[category_name]=' + res[0].name;
			if ( $routeParams.page ) {
				request += '&page=' + currentPage;
			}
			$http.get(request).success(function(res, status, headers){
				if ( $routeParams.page && ( isNaN(currentPage) || currentPage > headers('X-WP-TotalPages') ) ) {
					document.querySelector('title').innerHTML = 'Page not found | AngularJS Demo Theme';
					$scope.pageTitle = 'Page not found';
				} else {
					$scope.posts = res;

					$scope.currentPage = currentPage;
					$scope.totalPages = headers('X-WP-TotalPages');
				}
			});
		}
	});
}]);

//...

scripts-category-controller.js

//...

//Category controller
app.controller('Category', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
	$http.get('wp-json/taxonomies/category/terms').success(function(res){
		$scope.categories = res;
	});

	$http.get('wp-json/taxonomies/category/terms/?filter[slug]=' + $routeParams.category).success(function(res){
		if (!res.length) {
			document.querySelector('title').innerHTML = 'Category not found | AngularJS Demo Theme';
			$scope.pageTitle = 'Category not found';
		} else {
			$scope.current_category_id = res[0].ID;
			var currentPage = ( ! $routeParams.page ) ? 1 : parseInt( $routeParams.page );
			$scope.pageTitle = 'Posts in ' + res[0].name + ' Page ' + currentPage + ':';
			document.querySelector('title').innerHTML = 'Category: ' + res[0].name + ' | AngularJS Demo Theme';

			var request = 'wp-json/posts/?filter[category_name]=' + res[0].name;
			if ( $routeParams.page ) {
				request += '&page=' + $routeParams.page;
			}
			$http.get(request).success(function(res, status, headers){
				$scope.posts = res;

				$scope.currentPage = currentPage;
				$scope.totalPages = headers('X-WP-TotalPages');
			});
		}
	});
}]);

//...

scripts-content-controller.js

//...

//Content controller
app.controller('Content', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
	$http.get('wp-json/posts/' + $routeParams.ID).success(function(res){
		$scope.post = res;
		document.querySelector('title').innerHTML = res.title + ' | AngularJS Demo Theme';
	}).error(function(res, status){
		if (status === 404) {
			$scope.is404 = true;
			document.querySelector('title').innerHTML = 'Page not found | AngularJS Demo Theme';
			$scope.errorMessage = 'Error: ' + res[0].message;
		}
	});

	$http.get('wp-json/media?filter[post_parent]=' + $routeParams.ID).success(function(res){
		if ( res.length > 1 ) {
			$scope.media = res;
		}
	});
}]);

//...

scripts-paged-controller.js

//...

//Paged controller
app.controller('Paged', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
	$http.get('wp-json/taxonomies/category/terms').success(function(res){
		$scope.categories = res;
	});

	$http.get('wp-json/posts/?page=' + $routeParams.page).success(function(res, status, headers){
		var currentPage = parseInt($routeParams.page);

		if ( isNaN(currentPage) || currentPage > headers('X-WP-TotalPages') ) {
			document.querySelector('title').innerHTML = 'Page not found | AngularJS Demo Theme';
			$scope.pageTitle = 'Page not found';
		} else {
			$scope.currentPage = currentPage;
			$scope.totalPages = headers('X-WP-TotalPages');

			$scope.posts = res;
			$scope.pageTitle = 'Posts on Page ' + $scope.currentPage + ':';
			document.querySelector('title').innerHTML = 'Page ' + $scope.currentPage + ' | AngularJS Demo Theme';
		}
	});
}]);

//...

scripts-route.js

var app = angular.module('app', ['ngRoute', 'ngSanitize', 'slick']);

//Config the route
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
	$locationProvider.html5Mode(true);

	$routeProvider
	.when('/', {
		templateUrl: myLocalized.partials + 'main.html',
		controller: 'Main'
	})
	.when('/blog/:ID', {
		templateUrl: myLocalized.partials + 'content.html',
		controller: 'Content'
	})
	.when('/category/:category/', {
		templateUrl: myLocalized.partials + 'main.html',
		controller: 'Category'
	})
	.when('/category/:category/page/:page', {
		templateUrl: myLocalized.partials + 'main.html',
		controller: 'Category'
	})
	.when('/page/:page', {
		templateUrl: myLocalized.partials + 'main.html',
		controller: 'Paged'
	})
	.otherwise({
		templateUrl: myLocalized.partials + '404.html',
		controller: '404'
	});
}]);

Thank you!