n8finch

//*Add the base "/" to the head for pretty routing.
add_action( 'wp_head', __NAMESPACE__ . '\add_base_location_provider_to_wp_head' );

function add_base_location_provider_to_wp_head() {
	echo '<base href="/">';
}

n8finch

add_filter( 'wp_setup_nav_menu_item', __NAMESPACE__ . '\filter_nav_menu_items', 1 );
function filter_nav_menu_items( $menu ) {
	$post_type = ( $menu->object ); //gets post type

	//if post type is a page, then create a new URL
	if ( $post_type === 'page' ) {
		$menu_url  = $menu->url;
		$new_url   = '/pages' . str_replace( 'https://n8finch.dev/', '/', $menu_url );
		$menu->url = $new_url;
	}

n8finch

<article class="single-post post type-post status-publish format-standard has-post-thumbnail entry"
         ng-controller="pageView">
    <header class="entry-header">
        <h2 class="entry-title">{{post.title.rendered}}</h2>
    </header>
    <img class="attachment-post-image size-post-image wp-post-image" ng-src="{{post.featured_image_src}}"/>
    <div class="entry-content">
        <p ng-bind-html="post.content.rendered | to_trusted"></p>
    </div>
    <footer class="entry-footer">

n8finch

.controller('pageView', ['$scope', '$http', '$stateParams', function ($scope, $http, $stateParams) {
      console.log('pageView running');
      $http({
        url: 'https://n8finch.dev/wp-json/wp/v2/pages?filter[name]=' + $stateParams.slug,
        cache: true
      }).success(function (res) {
        $scope.post = res[0];
      });
    }])

n8finch

<div ng-controller="Posts" ng-repeat="post in posts">
    <article class="single-post post type-post status-publish format-standard has-post-thumbnail entry">
        <header class="entry-header">
            <h2 class="entry-title"><a href="/posts/{{post.slug}}/">{{post.title.rendered}}</a></h2>
            <p class="entry-meta">Posted by {{post.author_name}} on {{post.date | date:'longDate'}}</p>
        </header>
        <img class="attachment-post-image size-post-image wp-post-image" ng-src="{{post.featured_image_src}}"/>
        <div class="entry-content">
            <p ng-bind-html="post.excerpt.rendered | to_trusted"></p>
            <p><a href="/posts/{{post.slug}}/">Read more...</a></p>

n8finch

<article class="single-post post type-post status-publish format-standard has-post-thumbnail entry"
         ng-controller="singleView">
    <header class="entry-header">
        <h2 class="entry-title">{{post.title.rendered}}</h2>
        <p class="entry-meta">Posted by {{post.author_name}} on {{post.date | date:'longDate'}}</p>
    </header>
    <img class="attachment-post-image size-post-image wp-post-image" ng-src="{{post.featured_image_src}}"/>
    <div class="entry-content">
        <p ng-bind-html="post.content.rendered | to_trusted"></p>
    </div>

n8finch

.controller('singleView', ['$scope', '$http', '$stateParams', function ($scope, $http, $stateParams) {
      console.log('singleview running');
      $http({
        url: 'https://n8finch.dev/wp-json/wp/v2/posts?filter[name]=' + $stateParams.slug,
        cache: true
      }).success(function (res) {
        $scope.post = res[0];
      });
    }]);

n8finch

//ROUTES
    .config([ '$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
        .state('posts', {
          url: '/',
          controller: 'Posts',
          templateUrl: ajaxInfo.template_directory + 'assets/templates/app-index.html'
        })
        .state('single', {

n8finch

angular.module('myApp', ['ngResource', 'ui.router'])
    //CONTROLLERS
    .controller('Posts', ['$scope', '$http', function ($scope, $http) {
      $http({
        url: 'https://n8finch.dev/wp-json/wp/v2/posts',
        cache: true
      }).success(function (res) {
        $scope.posts = res;
      });

n8finch

genesis-angular-gulp
  |__assets
    |__js
      |__app.js (our Angular app)
    |__templates
      |__app-index.html (our main list of posts from Part 2)
      |__page.html (our page view for Pages)
      |__single.html (our single view for individual Posts)