AngularJS Views in Wordpress

Question

I have got a problem with my AngularJS function in my Wordpress-Application. What i want to create is a SPA, so that the Website(its not a blog, i'm just using WP as CMS) is working fluently and without reloading on mobile-phones. To achieve this goal, i decided to include AngularJS in Wordpress (if this isnt the best solution, please tell me :) ). After i made some Tutorials that explained to me the topic of the "views" in AJS, i tried to do it myself in a seperate html-document and it worked great.

So my problem is sumarized, that my SPA is divided in 3 colums. The left one is kind of static (just basic informations) the second one has always the newest content via WP (that works great, too) and the right colum should change its content by clicking on one of the links of the "newest content". Do you understand my idea till here? :) So, as you may guess - it doesnt really want to work.

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

-->

It won't work right now, for sure. I would appreciate if you help me to solute this problem. BTW i started programming about 5 weeks ago - so there might be some really stupid miskates of a newbie! :)

Greetings, Yannic :)

Answer 1

I think angular is quite an overkill here. You might consider just using jquery (which ships with WordPress). Make the links in your "newest content" fire jquery functions which insert the requested content using an ajax request into the right box.

WordPress has some nice AJAX functionality built in: http://codex.wordpress.org/AJAX This might be of highest interest for you: http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side

basic idea is you register a function with to a hook with the wp_ajax_nopriv_ ('no privileges') hook and request it using something like this:

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' should be equal to the stuff you prefixed with wp_ajax_nopriv_. ajax_url needs to point to admin_url('admin-ajax.php'). You can use wp_localize_script() to make it accessible in your js.