v5 update - working for issue #5

functions.php

@@ -1,5 +1,7 @@
 <?php
 
+require 'inc/custom-routes.php';
+
 function apiCheck(){
 	if ( !is_plugin_active( 'WP-API/plugin.php' ) ) {
 	  add_action( 'admin_notices', 'apiError' );

inc/custom-routes.php

@@ -0,0 +1,39 @@
+<?php
+global $myplugin_api_mytype;
+
+class angular_theme_routes {
+
+	function __construct() {	
+		$this->init();
+	}
+
+	function init() {
+		global $myplugin_api_mytype;
+		add_filter( 'json_endpoints', array( $this, 'register_routes' ) );
+	}
+
+	function register_routes( $routes ) {
+		$routes['/post_by_slug'] = array(
+			array( array( $this, 'get_post_by_slug'), WP_JSON_Server::READABLE ),
+		);
+
+		// Add more custom routes here
+
+		return $routes;
+	}
+
+	function get_post_by_slug() {
+
+		$slug = $_GET['slug'];
+		$return['slug'] = $slug;
+
+		$return['post'] = get_page_by_path( $slug, ARRAY_A, 'post' );
+
+		$response = new WP_JSON_Response();
+		$response->set_data( $return );		
+		return $response;
+
+	}
+}
+
+new angular_theme_routes();

js/angular-app.js

@@ -7,7 +7,7 @@ app.config(function($routeProvider){
 		controller: ListCtrl,
 		templateUrl: Directory.url+'/list.html'
 	});
-	$routeProvider.when('/view/:id', {
+	$routeProvider.when('/post/:slug', {
 		controller: ViewCtrl,
 		templateUrl: Directory.url+'/view.html'
 	});
@@ -44,34 +44,15 @@ app.filter('to_trusted', ['$sce', function($sce){
 }]);
 
 // ANGULARJS FACTORIES
-app.factory('Posts', function($http){
-	var domain = '';
-	return {
-		'update': function($scope){
-			$http.get(MyAjax.resturl+'/posts', $scope.data).then(function(response){
-				$scope.posts = response.data;
-			});	
-		},
-		'save': function(post){
-			$http.put(MyAjax.resturl+'/posts', post).then(function(response){
-				//$scope.posts = response.data;
-			});	
-		},
-		'delete': function(postId){
-			return $http.post(MyAjax.resturl+'/posts/delete_post', postId, {
-				params: {
-					nonce: token,
-					id: postId
-				}
-			});
-		}
-	};
+app.factory('Posts', function($resource){
+	return $resource(MyAjax.resturl+'/posts/:id?_wp_json_nonce='+wpApiOptions.nonce, {id: '@id'}, {
+		update: {method: 'PUT'},
+	});
 });
 
-// ANGULARJS FACTORIES
-app.factory('PostsNew', function($resource){
-	return $resource(MyAjax.resturl+'/posts/:id?_wp_json_nonce='+wpApiOptions.nonce, {id: '@id'}, {
-		update: {method: 'PUT'}
+app.factory('PostsBySlug', function($resource){
+	return $resource(MyAjax.resturl+'/post_by_slug/:id?_wp_json_nonce='+wpApiOptions.nonce, {id: '@id'}, {
+		update: {method: 'PUT'},
 	});
 });
 
@@ -93,12 +74,12 @@ app.factory('Users', function($resource){
 /** CONTROLLERS **/
 
 // LIST CTRL ( FOR BLOG LISTING )
-function ListCtrl($scope, $http, Posts, PostsNew){
+function ListCtrl($scope, $http, Posts){
 	$scope.data = {};
 	$scope.$root.openPost = false;
 
 	// GET LATEST POSTS
-	$scope.posts = PostsNew.query();
+	$scope.posts = Posts.query();
 
 	// ADD NEW POST FUNCTION
 	$scope.add = function(){
@@ -129,7 +110,7 @@ function ListCtrl($scope, $http, Posts, PostsNew){
 			var deleteConf = confirm('Are you sure you want to delete '+post.title);
 			if(deleteConf){
 				$scope.posts.splice(index,1);
-				PostsNew.delete({id:post.ID});
+				Posts.delete({id:post.ID});
 			}
 		}
 	};
@@ -142,14 +123,14 @@ function ListCtrl($scope, $http, Posts, PostsNew){
 	// SAVE POST FUNCTION
 	$scope.save = function(){	
 		if($scope.$root.openPost.newPost){
-			PostsNew.save($scope.$root.openPost, function(response){
+			Posts.save($scope.$root.openPost, function(response){
 				Posts.update($scope);
 				$scope.$root.openPost = false;
 				jQuery('#save').modal('hide');
 			});
 		} else {
 			$scope.$root.openPost.id = $scope.$root.openPost.ID;
-			PostsNew.update($scope.$root.openPost, function(res){
+			Posts.update($scope.$root.openPost, function(res){
 				Posts.update($scope);
 				$scope.$root.openPost = false;
 				jQuery('#save').modal('hide');
@@ -165,16 +146,20 @@ function ListCtrl($scope, $http, Posts, PostsNew){
 
 
 // VIEW CTRL ( FOR SINGLE )
-function ViewCtrl($scope, $http, $routeParams, Comments, PostsNew){
-
-	// GET COMMENTS
-	PostsNew.get({id:$routeParams.id}, function(res){
-		$scope.ViewPost = res;
-		$scope.ViewPost.comments = Comments.query({id:$routeParams.id});
-	});
+function ViewCtrl($scope, $http, $routeParams, Comments, Posts, PostsBySlug){
 
+	$scope.data = {
+		slug: $routeParams.slug
+	}
 
-	$scope.openComment = {id: $routeParams.id, comment_post_ID:$routeParams.id};
+	// GET COMMENTS
+	PostsBySlug.get($scope.data, function(res){
+		Posts.get({id:res.post.ID}, function(res){
+			$scope.ViewPost = res;
+			$scope.ViewPost.comments = Comments.query({id:res.ID});
+			$scope.openComment = {id: $scope.ViewPost.ID, comment_post_ID:$scope.ViewPost.ID};
+		})
+	});	
 
 	// SAVE NEW COMMENT
 	$scope.savecomment = function(){
@@ -184,21 +169,21 @@ function ViewCtrl($scope, $http, $routeParams, Comments, PostsNew){
 			jQuery('form#comment-form input[type="text"], form#comment-form input[type="email"], form#comment-form textarea').val('');
 
 			// REFRESH COMMENTS
-			$scope.ViewPost.comments = Comments.query({id:$routeParams.id});
+			$scope.ViewPost.comments = Comments.query({id:$scope.ViewPost.ID});
 
 			// RESET openComment
-			$scope.openComment = {id: $routeParams.id, comment_post_ID:$routeParams.id};
+			$scope.openComment = {id: $scope.ViewPost.ID, comment_post_ID:$scope.ViewPost.ID};
 
 
 		});
 	};
 }
 
 // PAGE CTRL ( FOR PAGES )
-function PageCtrl($scope, $http, $routeParams, Comments, PostsNew){
+function PageCtrl($scope, $http, $routeParams, Comments, Posts){
 
 	// GET COMMENTS
-	PostsNew.get({id:$routeParams.id}, function(res){
+	Posts.get({id:$routeParams.id}, function(res){
 		$scope.ViewPost = res;
 		$scope.ViewPost.comments = Comments.query({id:$routeParams.id});
 

list.html

@@ -7,9 +7,9 @@
 				    <ng-include  src=" dir+ '/block.php?id=2&title=true&v=2' "></ng-include>
 				    <h3>Latest Posts</h3>
 				    <article ng-repeat="post in posts" class="projects">
-					    <a class="title" href="#/view/{{post.ID}}">{{post.title}}</a>
+					    <a class="title" href="#/post/{{post.slug}}">{{post.title}}</a>
 					    <p ng-bind-html="post.excerpt | to_trusted"></p>
-					    <a class="btn btn-primary btn-small" href="{{site + '#/view/' + post.ID}}">Read More >></a>
+					    <a class="btn btn-primary btn-small" href="{{site + '#/post/' + post.slug}}">Read More >></a>
 					    <!-- EDIT -->
 					    <div ng-show="$root.user" class="edit">
 						    <button ng-click="delete($index, post)" class="btn btn-mini">Delete</button>

readme.md

@@ -1,10 +1,14 @@
 WordPress Angular Theme
 =======================
 
-NEW VERSION
-=============
+NEW VERSION UPDATE - 5.0
+==========================
 
-I have just released version 4.0 which includes the functionality added in thanks to the JSON API WordPress Plugin. As I make more of the functionality use this RESTful API, I still have the AJAX fallbacks in the functions.php file. 
+Version 5.0 is a minor refactor.  
+It includes removal of all AngularJS factory code, replacing some code.
+
+MAJOR UPDATE -
+Posts are now viewable via url route `/posts/post-slug`, not by ID anymore, I will be releasing a forwarder for ID -> slug routing soon.  
 
 What? Why?
 ==========

style.css

@@ -2,7 +2,7 @@
 Theme Name: WpAngularJS
 Theme URI: http://www.roysivan.com/angular-wordpress-theme
 Description: Bringing AngularJS technology to WordPress. Theme front end is built using Twitter Bootstrap with some minor styling done by Roy Sivan. This theme is built to help build a Single Page Application using WordPress and AngularJS.
-Version: 4.0
+Version: 5.0
 Tags: WordPress, AngularJS, JavaScript, RESTful, API, Angular, Client Side Application, Single Page Application
 Author: Roy Sivan
 Author URI: http://www.roysivan.com

view.html

@@ -1,4 +1,3 @@
-	<!-- LOOP THROUGH POSTS / ROWS -->
 	<div class="row projects">
 	    <div class="col-sm-12">
 	      <h2>{{ViewPost.title}}</h2>