Last active
March 12, 2016 23:54
-
-
Save yoren/8d6e804dab78e6dd11bc to your computer and use it in GitHub Desktop.
When Page Not Found In Your AngularJS WordPress Theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Page Not Found</h1> | |
<p>Sorry, but nothing can be found at this location.</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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="« Previous Page" next-label="Next Page »"></posts-nav-link> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ... | |
//404 controller | |
app.controller('404', function() { | |
document.querySelector('title').innerHTML = 'Page not found | AngularJS Demo Theme'; | |
}); | |
// ... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ... | |
//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'); | |
} | |
}); | |
} | |
}); | |
}]); | |
//... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//... | |
//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'); | |
}); | |
} | |
}); | |
}]); | |
//... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//... | |
//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; | |
} | |
}); | |
}]); | |
//... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//... | |
//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'; | |
} | |
}); | |
}]); | |
//... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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' | |
}); | |
}]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you!