Tidy Up Your AngularJS WordPress Theme With A Service

main.html

<!-- ... -->

<p>{{data.pageTitle}}</p>
<ul>
	<li ng-repeat="post in data.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.html

<div class="posts-nav-link">
	<a ng-if="data.currentPage>1" href="{{postsNavLink.prevLink}}" class="prev-link">{{postsNavLink.prevLabel}}</a>
	<span ng-if="data.currentPage>1 && data.currentPage<data.totalPages" class="sep">{{postsNavLink.sep}}</span>
	<a ng-if="data.currentPage<data.totalPages" href="{{postsNavLink.nextLink}}" class="next-link">{{postsNavLink.nextLabel}}</a>
</div>

scripts-04.js

// ...

//Main controller
app.controller('Main', ['$scope', 'WPService', function($scope, WPService) {
	WPService.getAllCategories();
	WPService.getPosts(1);
	$scope.data = WPService;
}]);

// ...

scripts-07.js

// ...

//Paged controller
app.controller('Paged', ['$scope', '$routeParams', 'WPService', function($scope, $routeParams, WPService) {
	WPService.getAllCategories();
	WPService.getPosts($routeParams.page);
	$scope.data = WPService;
}]);

// ...

scripts-08.js

// ...

//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', 'WPService', function ( $scope, WPService ) {
			$scope.filter = {
				s: ''
			};
			$scope.search = function() {
				WPService.getSearchResults($scope.filter.s);
			};
		}]
	};
});

// ...

scripts-10.js

// ...

//Category controller
app.controller('Category', ['$scope', '$routeParams', '$http', 'WPService', function($scope, $routeParams, $http, WPService) {
	WPService.getAllCategories();
	$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.data.pageTitle = 'Category not found';
		} else {
			$scope.current_category_id = res[0].ID;
			WPService.getPostsInCategory(res[0], $routeParams.page);
		}
	});

	$scope.data = WPService;
}]);

// ...

scripts.js

// ...

//Main controller
app.controller('Main', ['$scope', '$http', 'WPService', function($scope, $http, WPService) {
	WPService.getAllCategories();
	$scope.data = WPService;

	$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', 'WPService', function($scope, $routeParams, $http, WPService) {
	WPService.getAllCategories();
	$scope.data = WPService;

	$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';
		}
	});
}]);

wp-service-02.js

function WPService($http) {

	var WPService = {
		categories: [],
		posts: [],
		pageTitle: 'Latest Posts:',
		currentPage: 1,
		totalPages: 1
	};

	WPService.getAllCategories = function() {
		if (WPService.categories.length) {
			return;
		}

		return $http.get('wp-json/taxonomies/category/terms').success(function(res){
			WPService.categories = res;
		});
	};

	return WPService;
}

app.factory('WPService', ['$http', WPService]);

wp-service-03.js

// ...

WPService.getPosts = function(page) {
	return $http.get('wp-json/posts/?page=' + page).success(function(res, status, headers){
		WPService.posts = res;
		WPService.pageTitle = 'Latest Posts:';
		document.querySelector('title').innerHTML = 'Home | AngularJS Demo Theme';

		WPService.currentPage = page;
		WPService.totalPages = headers('X-WP-TotalPages');
	});
};

return WPService;

// ...

wp-service-06.js

function WPService($http) {

	var WPService = {
		categories: [],
		posts: [],
		pageTitle: 'Latest Posts:',
		currentPage: 1,
		totalPages: 1
	};

	function _updateTitle(documentTitle, pageTitle) {
		document.querySelector('title').innerHTML = documentTitle + ' | AngularJS Demo Theme';
		WPService.pageTitle = pageTitle;
	}

	// ...

	WPService.getPosts = function(page) {
		return $http.get('wp-json/posts/').success(function(res, status, headers){
			_updateTitle('Home', 'Latest Posts:');

			WPService.posts = res;
			WPService.currentPage = page;
			WPService.totalPages = headers('X-WP-TotalPages');
		});
	};

	return WPService;
}

app.factory('WPService', ['$http', WPService]);

wp-service-07.js

function WPService($http) {

	// ...

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

			if ( isNaN(page) || page > headers('X-WP-TotalPages') ) {
				_updateTitle('Page Not Found', 'Page Not Found');
			} else {
				if (page>1) {
					_updateTitle('Posts on Page ' + page, 'Posts on Page ' + page + ':');
				} else {
					_updateTitle('Home', 'Latest Posts:');
				}

				WPService.posts = res;
				WPService.currentPage = page;
				WPService.totalPages = headers('X-WP-TotalPages');
			}
		});
	};

	return WPService;
}

app.factory('WPService', ['$http', WPService]);

wp-service-08.js

function WPService($http) {

	// ...

	WPService.getSearchResults = function(s) {
		return $http.get('wp-json/posts/?filter[s]=' + s + '&filter[posts_per_page]=-1').success(function(res, status, headers){
			_updateTitle('Search Results for ' + s, 'Search Results:');

			WPService.posts = res;
			WPService.currentPage = 1;
			WPService.totalPages = headers('X-WP-TotalPages');
		});
	};

	return WPService;
}

app.factory('WPService', ['$http', WPService]);

wp-service-09.js

function WPService($http) {

	// ...

	function _setArchivePage(posts, page, headers) {
		WPService.posts = posts;
		WPService.currentPage = page;
		WPService.totalPages = headers('X-WP-TotalPages');
	}

	// ...

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

			if ( isNaN(page) || page > headers('X-WP-TotalPages') ) {
				_updateTitle('Page Not Found', 'Page Not Found');
			} else {
				if (page>1) {
					_updateTitle('Posts on Page ' + page, 'Posts on Page ' + page + ':');
				} else {
					_updateTitle('Home', 'Latest Posts:');
				}

				_setArchivePage(res,page,headers);
			}
		});
	};

	WPService.getSearchResults = function(s) {
		return $http.get('wp-json/posts/?filter[s]=' + s + '&filter[posts_per_page]=-1').success(function(res, status, headers){
			_updateTitle('Search Results for ' + s, 'Search Results:');

			_setArchivePage(res,1,headers);
		});
	};

	return WPService;
}

app.factory('WPService', ['$http', WPService]);

wp-service-10.js

function WPService($http) {

	var WPService = {
		categories: [],
		posts: [],
		pageTitle: 'Latest Posts:',
		currentPage: 1,
		totalPages: 1
	};

	// ...

	WPService.getPostsInCategory = function(category, page) {
		page = ( ! page ) ? 1 : parseInt( page );
		_updateTitle('Category: ' + category.name, 'Posts in ' + category.name + ' Page ' + page + ':');

		var request = 'wp-json/posts/?filter[category_name]=' + category.name;
		if ( page ) {
			request += '&page=' + page;
		}

		return $http.get(request).success(function(res, status, headers){
			_setArchivePage(res, page, headers);
		});
	};

	return WPService;
}

app.factory('WPService', ['$http', WPService]);

Code snippets refer to: Tidy Up Your AngularJS WordPress Theme With A Service