Wordpress의 AngularJS보기

Question

내 Wordpress-Application에서 AngularJS 기능에 문제가 있습니다. 내가 만들고 싶은 것은 SPA 다. 그래서 웹 사이트 (blog가 아니라, 나는 단지 CMS로서 WP를 사용하고있다)가 유창하게 그리고 휴대 전화로 다시로드하지 않고서 일하고있다. 이 목표를 달성하기 위해 Wordpress에 AngularJS를 포함하기로 결정했습니다 (이것이 가장 좋은 해결책이 아니라면 알려주세요 :)). AJS의 "의견"주제를 나에게 설명한 몇 가지 자습서를 작성한 후 별도의 HTML 문서로 직접 작성하려고 시도했지만 훌륭하게 작동했습니다.

내 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--> 

->

그것은 확실히 지금 작동하지 않습니다. 이 문제를 해결하는 데 도움을 주시면 감사하겠습니다. BTW 나는 대략 5 주 전에 프로그램 시작했다 - 그래서 초심자의 진짜 어리석은 miskates가 있을지도 모르다! :)

인사말, Yannic :

Answer 1

나는 각 생각은 여기에 아주 잔인한입니다. jquery (WordPress와 함께 제공됨)를 사용하는 것이 좋습니다. ajax 요청을 사용하여 요청 된 컨텐츠를 오른쪽 상자에 삽입하는 "최신 컨텐츠"fire jquery 함수의 링크를 만듭니다. 이 당신을 위해 가장 관심이있을 수 http://codex.wordpress.org/AJAX : http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side

기본적인 아이디어는 당신이 wp_ajax_nopriv_있는 후크와 함수를 등록입니다 ('아무 권한') 후크

워드 프레스에 내장 된 멋진 AJAX 기능을 가지고 그리고이 같은 것을 사용하여 요청 :

이

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에서 액세스 할 수 있습니다.