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 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