1

I tried to use AngularJS with the plugin JSON API. I have no error but the route doesn't work, and the page doesn't print the partials/... ?

I changed the permalinks to %postName%.

I use MAMP and my link is: http://localhost:8888/angular-wp.

The JSON content works: http://localhost:8888/angular-wp/api/get_posts/

The routeScope had two values empty.

main.html

<p>main</p>
<a href='/demo'>This links to /demo</a>
<ul>
  <li ng-repeat='post in posts'>
    <a href='{{post.slug}}'>{{post.title}}</a>
  </li>
</ul>

demo.php

{{post.content}}
<p>demo :)</p>

index.php

<!DOCTYPE html>
<html lang='en' ng-app='app'>
<head>
    <meta charset='UTF-8' />
    <title>hooo</title>
</head>
<body>
  <header>
    <h1>
      <a href='/'>Worcamp 2014</a>
    </h1>
  </header>

  <div ng-view>TODO: have angular infect the content here via ajax</div>

  <footer>&copy; <?php echo date('Y'); ?> worcamp</footer>

  <script src='<?php echo get_template_directory_uri(); ?>/bower_components/angular/angular.js'></script>
  <script src='<?php echo get_template_directory_uri(); ?>/bower_components/angular-route/angular-route.js'></script>
<script type='text/javascript'>
  <?php $pathTheme = get_template_directory_uri(); ?>
  angular.module('app', ['ngRoute'])
    .config(function($routeProvider, $locationProvider) {
      $locationProvider.html5Mode(true);

      $routeProvider
        .when('/', {
          templateUrl: '<?php echo $pathTheme; ?>/partials/main.html',
            controller: 'Main'
        })
        .when('/:slug', {
          templateurl:  
            '<?php echo $pathTheme; ?>/partials/demo.php',
            controller: 'Slug'
        });
        //.otherwise({ redirectTo: '/'});
      })
      .controller('Main', function($scope, $http, $routeParams){
        $http.get('/api/get_posts/').success(function(res) {
          $scope.posts = res.posts;
        });
      })
      .controller('Slug', function($scope, $http, $routeParams){
        $http.get('/api/get_posts/?slug=' + $routeParams.slug).success(function(res) {
          $scope.post = res.post;
        });
      });

</script>
</body>
</html>
1

Doublecheck if there’s a “nobase” error in your console. If so, according to the AngularJS documentation, and fix.io (credits for this answer go to the author of that post) the base tag is to the rescue.

<html ng-app="app">
<head>
    <base href="/angular-wp/">
    <title>AngularJS Demo Theme</title>
<?php wp_head(); ?>

Please note the “/angular-wp/” is the sub-context in this case (the test url is like “http://localhost/angular-wp/”), you should replace it accordingly. If you set the wrong base href, you’ll get an error like this or this.

0

If you think about switching the Plugin: I did used "WP REST API" Plugin (wich implements WP API) and then $http.get('WPURL/wp-json/posts', function (data, ...) {...}), that worked perfect.

You get the Posts featured image for example via data[post-index].featured_image.source, see all properties via console.log(data[0]).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.