Vistas de AngularJS en WordPress

4 minutos de lectura

Tengo un problema con mi función AngularJS en mi aplicación de WordPress. Lo que quiero crear es un SPA, para que el sitio web (no es un blog, solo estoy usando WP como CMS) funcione con fluidez y sin recargar en los teléfonos móviles. Para lograr este objetivo, decidí incluir AngularJS en WordPress (si esta no es la mejor solución, dímelo :)). Después de hacer algunos tutoriales que me explicaron el tema de las “vistas” en AJS, traté de hacerlo yo mismo en un documento html separado y funcionó muy bien.

Entonces mi problema se resume, que mi SPA está dividido en 3 columnas. El de la izquierda es un poco estático (solo información básica), el segundo siempre tiene el contenido más nuevo a través de WP (que también funciona muy bien) y la columna de la derecha debe cambiar su contenido haciendo clic en uno de los enlaces del “contenido más nuevo”. . ¿Entiendes mi idea hasta aquí? 🙂 Entonces, como puedes adivinar, realmente no quiere funcionar.

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



<div class="content"> <!-- open class="content"-->
<a href="https://stackoverflow.com/?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-->

–>

Ahora mismo no funcionará, seguro. Agradecería si me ayudan a solucionar este problema. Por cierto, comencé a programar hace aproximadamente 5 semanas, ¡así que podría haber algunos errores realmente estúpidos de un novato! 🙂

Saludos Yannic 🙂

Creo que angular es bastante exagerado aquí. Podría considerar simplemente usar jquery (que viene con WordPress). Haga que los enlaces en su “contenido más nuevo” activen las funciones de jquery que insertan el contenido solicitado mediante una solicitud ajax en el cuadro de la derecha.

WordPress tiene una buena funcionalidad AJAX incorporada: http://codex.wordpress.org/AJAX
Esto podría ser de sumo interés para usted: http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side

idea básica es registrar una función con un gancho con el wp_ajax_nopriv_ (‘sin privilegios’) enganche y solicítelo usando algo como esto:

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’ debe ser igual a las cosas que le antepusiste wp_ajax_nopriv_. ajax_url debe apuntar a admin_url('admin-ajax.php'). Puedes usar wp_localize_script() para hacerlo accesible en su js.

  • Muchas gracias por esa rápida respuesta. Probaré jQuery ahora, pero ¿es posible con jQuery cambiar la URL y la Vista pero NO recargar todo? Traté de averiguarlo en Google, pero no encontré una respuesta satisfactoria.

    – Yannic Hansen

    2 de septiembre de 2013 a las 10:22

  • jQuery no incluye ninguna función de enrutamiento. Pero caminos parece un complemento razonable y rápido de integrar. No pensé en las cosas de enrutamiento cuando inicialmente sugerí jQuery, pero angularjs es mucho más de lo que necesita. Todavía recomiendo hacer esto usando jQuery. No dude en preguntar si necesita más ayuda.

    – ahoeret

    2 de septiembre de 2013 a las 12:15

  • Ok, solo quiero darte las gracias! Al final, todo funciona bien. ¡Buena comunidad aquí!

    – Yannic Hansen

    02/09/2013 a las 15:41

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad