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 :)

Check this out: github.com/HRoger/angularpresstheme - This theme will turn wordpress into a Single Page Application. There is a demo version here as well: angularpresstheme.com — RoyRogers
– RoyRogers, Commented Feb 16, 2014 at 7:51

ahoereth · Accepted Answer · 2013-09-02 08:29:16Z

2

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.

answered Sep 2, 2013 at 8:29

ahoereth

4971 gold badge6 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yannic Hansen Over a year ago

Thank you very much for that fast answer. I will try jQuery now, but is it with jQuery possible to change the URL and the View but NOT reloading everything? I tried to figure it out on google, but i did not find a satisfactory answer.

ahoereth Over a year ago

jQuery does not ship with any routing functionality. But pathjs looks like a reasonable and quickly to integrate addon. Did not think of the routing stuff when initially suggesting jQuery, but angularjs is just much more than what you require. I still recommend doing this using jQuery. Feel free to ask if you need more help.

Yannic Hansen Over a year ago

Ok, i just want to say thanks to you! In the end, all works fine. Nice community in here!

Collectives™ on Stack Overflow

AngularJS Views in Wordpress

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related