Skip to content

Instantly share code, notes, and snippets.

@yoren yoren/main.html
Last active Sep 16, 2015

Embed
What would you like to do?
Previous / Next Posts Links In AngularJS WordPress Theme
<!-- ... -->
<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>
<posts-nav-link prev-label="&laquo; Previous Page" next-label="Next Page &raquo;"></posts-nav-link>
// ...
//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){
$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');
});
});
}]);
// ...
// ...
//Main controller
app.controller('Main', ['$scope', '$http', function($scope, $http) {
$http.get('wp-json/taxonomies/category/terms').success(function(res){
$scope.categories = res;
});
$http.get('wp-json/posts/').success(function(res, status, headers){
$scope.posts = res;
$scope.pageTitle = 'Latest Posts:';
document.querySelector('title').innerHTML = 'Home | AngularJS Demo Theme';
$scope.currentPage = 1;
$scope.totalPages = headers('X-WP-TotalPages');
});
}]);
// ...
// ...
//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);
$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({
redirectTo: '/'
});
}]);
// ...
// ...
//searchForm Directive
app.directive('searchForm', function() {
return {
restrict: 'EA',
template: 'Search Keyword: <input type="text" name="s" ng-model="filter.s" ng-change="search()">',
controller: ['$scope', '$http', function ( $scope, $http ) {
$scope.filter = {
s: ''
};
$scope.search = function() {
$http.get('wp-json/posts/?filter[s]=' + $scope.filter.s + '&filter[posts_per_page]=-1').success(function(res){
$scope.posts = res;
$scope.pageTitle = 'Search Results:';
$scope.currentPage = 1;
$scope.totalPages = 1;
});
};
}]
};
});
// ...
@yoren

This comment has been minimized.

Copy link
Owner Author

yoren commented Apr 12, 2015

The original blog post: Pagination in AngularJS WordPress Theme

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.