带路由和JSON API的AngularJS

时间:2015-05-14 作者:Xavier

我尝试将AngularJS与插件JSON API一起使用。我没有错误,但路由不起作用,页面不打印部分/?

我把永久链接改为%postName%.

我使用MAMP,我的链接是:http://localhost:8888/angular-wp.

JSON内容起作用:http://localhost:8888/angular-wp/api/get_posts/

routeScope有两个值为空。

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>

2 个回复
最合适的回答,由SO网友:Pim Schaaf 整理而成

再次检查控制台中是否存在“nobase”错误。如果是,根据AngularJS文档,以及fix.io (此答案的学分转到the author of that post) 基本标签用于救援。

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

请注意“/角度wp/”是本例中的子上下文(测试url类似于”http://localhost/angular-wp/”), 你应该相应地更换它。如果设置了错误的base href,则会得到error like thisthis.

SO网友:lippoliv

如果您考虑切换插件:我确实使用了“WP REST API”插件(wich实现WP API) 然后$http.get(\'WPURL/wp-json/posts\', function (data, ...) {...}), 这非常有效。

您可以通过以下方式获得帖子的特色图片:data[post-index].featured_image.source, 通过查看所有属性console.log(data[0]).

结束

相关推荐

为什么WordPress选择数据序列化而不是json_encode?

在我加入WordPress的小时候,我看到WordPress本身及其友好的插件都在使用PHPserialize() 在许多情况下,将数据存储到db中。但在最近的一次搜索中,我发现社区对json_encode() 超过serialize().A test that proves json_encode() is better than serialize() - StackOverflowReasons why json_encode() can be used and why not - StackOve