Skip to content

Instantly share code, notes, and snippets.

@yoren yoren/404.html
Last active Mar 12, 2016

Embed
What would you like to do?
When Page Not Found In Your AngularJS WordPress Theme
<h1>Page Not Found</h1>
<p>Sorry, but nothing can be found at this location.</p>
<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>
<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>
// ...
//404 controller
app.controller('404', function() {
document.querySelector('title').innerHTML = 'Page not found | AngularJS Demo Theme';
});
// ...
// ...
//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');
}
});
}
});
}]);
//...
//...
//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');
});
}
});
}]);
//...
//...
//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;
}
});
}]);
//...
//...
//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';
}
});
}]);
//...
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'
});
}]);
@CodeDecent

This comment has been minimized.

Copy link

CodeDecent commented Jan 29, 2016

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.