Wordpress中的AngularJS视图

Question

我的Wordpress-Application中的AngularJS功能出了问题.我想创建的是一个SPA,所以网站(它不是博客,我只是使用WP作为CMS)工作流畅,无需在手机上重装.为了实现这个目标,我决定在Wordpress中包含AngularJS(如果这不是最好的解决方案,请告诉我:)).在我制作了一些教程,向我解释了AJS中"视图"的主题后,我试图在一个单独的html文档中自己完成它并且效果很好.

所以我的问题是sumarized,我的SPA分为3个字符串.左边的是静态的(只是基本的信息),第二个通过WP总是最新的内容(也很好),右列应该通过点击"最新内容"的一个链接来改变它的内容.你明白我的想法吗？:)所以,正如你可能猜到的那样 - 它真的不想工作.

<?php get_header();?> <!-- Header + AngularJS included -->



<div class="content"> <!-- open class="content"-->
<a href="/?page_id=6">

</a>
<div class="bg-texture"> <!--open class "bg-texture/ closed in "footer"-->
    <?php while(have_posts()):the_post();?>
    <div class="col">


    <?php if (in_category('infotext')):?>
     <div class="infotext"> 




    <?php elseif (in_category('apps')):?>                
       <div class="round-borders-panel">  

   <?php elseif (in_category('righttext')):?> <!-- hier kommen die single-pages rein-->
            <?php if(function_exists('get_twoclick_buttons')) {get_twoclick_buttons(get_the_ID());}?>
        <?php endif;?>    


            <h1>
                <a href="<?php the_permalink()?>"> <?php the_title();?> </a>
            </h1>

        <?php the_content(__(''));?>
       </div>
     </div>

                <?php endwhile;?>

<?php get_the_ID('');?>


        <script src="angular.min.js"></script>

        <div data-ng-view></div>
     <script>
    var cloud = angular.module("cloud", []);

    demoApp.config(function ($routeProvider) {
    $routeProvider
            .when('/?=p<?php get_the_ID();?>,
                    {
                            controller: 'SimpleController',
                            templateUrl: '<?php get_template_part('single','');?>'
                    })
            .when('/view2',
                    {
                            controller: 'SimpleController',
                            templateUrl: 'Partials/view2.html'
                    })
            .when('/view3',
                    {
                            controller: 'SimpleController',
                            templateUrl: 'Partials/view3.html'
                    })
            .otherwise({redirectTo: '/view1'});
    });


    </script>
<!-- Loop-->

</div> <!-- Close <class="bg-texture-->

- >

当然,它肯定无法正常工作.如果你帮助我解决这个问题,我将不胜感激.顺便说一句,我大约5周前开始编程 - 所以可能会有一些真正愚蠢的新手错误!:)

问候,Yannic :)

Answer 1

我认为角度在这里是相当矫枉过正的。您可能会考虑仅使用 jquery（随 WordPress 一起提供）。使“最新内容”中的链接触发 jquery 函数，该函数使用 ajax 请求将请求的内容插入到右侧框中。

WordPress 内置了一些不错的 AJAX 功能：http://codex.wordpress.org/AJAX 这可能是您最感兴趣的： http: //codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side

基本思想是您使用（“无特权”）钩子向钩子注册一个函数wp_ajax_nopriv_，并使用如下所示的方法请求它：

jQuery(document).ready(function($) {
    var data = {
        action: 'my_action',
        whatever: 'any value to access later in php'
    };
    jQuery.post(ajax_url, data, function(response) {
        alert('Got this from the server: ' + response);
    });
});

'my_action' 应等于您以 为前缀的内容wp_ajax_nopriv_。ajax_url 需要指向admin_url('admin-ajax.php'). 您可以使用wp_localize_script()使其在您的 js 中可访问。