creating an Angularjs factory to render WP REST API data

Question

I am trying to create an Angular Factory which will create an injectable object to which I can use anywhere in my application. I am doing this inside a WordPress theme. The factory is supposed to handle a lot of the Javascript commands without much code.

In my assets/js/angular-theme.js I created the injectable for my theme:

var wpApp = new angular.module('wpAngularTheme', ['ui.router', 'ngResource']);

This should work with my factory, I attempted to enqueue as should be done inside the functions.php file of a WordPress theme. I was about to follow the instructions here:

https://docs.angularjs.org/api/ngResource

but it seems Google no longer supports the CDN for angular-resource.js

See for yourself here:

https://docs.angularjs.org/api/ngResource

If I am correct, then it seems the instructions in the angular doc may be out of date. Anyway, I continued on and developed my files in this manner:

assets/js/angular-theme.js:

// To use $resource inside your controller/service you
// need to declare a dependency on $resource.
var wpApp = new angular.module('wpAngularTheme', ['ui.router', 'ngResource']);

//The next step is calling the $resource() function with your REST endpoint.
// This function call returns a $resource class representation which can be
// used to interact with the REST backend. The Posts function is to take the new
// Injectable called $resource
wpApp.factory('Posts', function($resource){
    return $resource(appInfo.api_url + 'posts/:ID', {
        ID: '@id'
    })
});

wpApp.controller('ListCtrl', ['$scope', 'Posts', function($scope, Posts) {
    console.log('ListCtrl');
    $scope.page_title = 'Blog Listing';
    Posts.query(function(res){
        $scope.posts = res;
    });
}]);

 wpApp.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/');
    $stateProvider
        .state('list', {
            url: '/',
            controller: 'ListCtrl',
            templateUrl: appInfo.template_directory + 'templates/list.html'
        })
})

My templates/list.html:

<h1>{{page_title}}</h1>

<pre><code>{{posts | json}}</code></pre>

functions.php:

<?php

class wp_ng_theme {

    function enqueue_scripts() {

        wp_enqueue_style('bootstrapCSS', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', array(), '1.0', 'all');
        wp_enqueue_script('angular-core', 'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js', array('jquery'), '1.0', false);
        wp_enqueue_script('angular-resource', 'https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.6.6/angular-resource.js', array('angular-core'), '1.0', false);
        wp_enqueue_script('ui-router', 'https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js', array('angular-core'), '1.0', false);
        wp_enqueue_script('ngScripts', get_template_directory_uri() . '/assets/js/angular-theme.js', array('ui-router'), '1.0', false);
        wp_localize_script('ngScripts', 'appInfo',
            array(

                'api_url'           => rest_get_url_prefix() . '/wp/v2/',
                'template_directory'    => get_template_directory_uri() . '/',
                'nonce'         => wp_create_nonce('wp_rest'),
                'is_admin'          => current_user_can('administrator')
            )
        );
    }
}

$ngTheme = new wp_ng_theme();
add_action('wp_enqueue_scripts', array($ngTheme, 'enqueue_scripts'));

?>

But I am not getting the WP REST API data rendering on the browser.

Answer 1

Being that you are doing this as part of a WordPress theme and I don't see anything wrong with what you have done so far, I am going to say, just try refreshing your page, opening it in incognito and/or shutting down your server and restarting it if you are working locally with MAMP or similar service.

See if that helps, WordPress loves to cache. If this does help, keep this guide handy for future reference: http://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/