AngularJS Visualizzazioni in Wordpress

Question

Ho un problema con la mia funzione AngularJS nella mia applicazione Wordpress. Quello che voglio creare è una SPA, in modo che il sito Web (non è un blog, sto solo usando WP come CMS) sta funzionando correttamente e senza ricaricare sui telefoni cellulari. Per raggiungere questo obiettivo, ho deciso di includere AngularJS in Wordpress (se questa non è la soluzione migliore, per favore dimmi :)). Dopo aver realizzato alcuni tutorial che mi hanno spiegato l'argomento delle "viste" in AJS, ho provato a farlo da solo in un documento html separato e ha funzionato benissimo.

Quindi il mio problema è sumarized, che la mia SPA è divisa in 3 colonne. Quello di sinistra è un po 'statico (solo informazioni di base) il secondo ha sempre il contenuto più recente tramite WP (che funziona benissimo) e il colum giusto dovrebbe cambiare il suo contenuto cliccando su uno dei link del "contenuto più recente" . Hai capito la mia idea fino a qui? :) Quindi, come puoi immaginare, non vuole davvero funzionare.

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

->

Non funziona in questo momento, di sicuro. Apprezzerei se mi aiutassi a risolvere questo problema. BTW ho iniziato a programmare circa 5 settimane fa - quindi potrebbero esserci dei miskates davvero stupidi di un principiante! :)

Saluti, Yannic :)

Answer 1

Penso angolare è piuttosto un peso inutile qui. Potresti prendere in considerazione l'utilizzo di jquery (fornito con WordPress). Crea i link nelle tue funzioni jQuery di "contenuto più recente" che inseriscono il contenuto richiesto utilizzando una richiesta Ajax nella casella a destra.

WordPress ha alcune funzionalità bel AJAX costruito in: http://codex.wordpress.org/AJAX Questo potrebbe essere di maggior interesse per voi: http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side

idea di base è che si registra una funzione con un gancio con le wp_ajax_nopriv_ ('no privilegi') Gancio e richiedere utilizzando qualcosa di simile:

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' dovrebbe essere uguale alle cose che il prefisso wp_ajax_nopriv_. ajax_url deve puntare a admin_url('admin-ajax.php'). Puoi usare wp_localize_script() per renderlo accessibile nel tuo js.