Making WordPress Admin Bar Work With AngularJS Theme

In my tutorials of AngularJS WordPress theme, I’ve always put ng-app="app" in html tag. Maybe I haven’t mentioned, but in fact, the ng-app="app" can go with any HTML tag in your page, as long as it makes sense. For example, it’s obvious the body tag should be the second best place to insert the ng-app="app" if we’d like to enable AngularJS on the whole page.

There is another topic Ryan reminded me few days ago, he noticed the admin bar can’t work with our AngularJS theme. It looked all right, but when clicked the links, the page wouldn’t go to admin panel, but stayed on the same page without content:

In this situation, we can’t see any errors in JavaScript console, that means there is nothing wrong in our code. So what’s the real problem?

You should realize now that with my hint in the first paragraph, it has to do with the position of ng-app. The ng-app is basically a way AgularJS declares that “this part of page belongs to me“. When we set the whole html to be manipulated by AngularJS, clicking any link on the page, AngularJS will check if the pattern of the URL matches a route, then display the template accordingly.

Since the URLs in the admin bar don’t match any of the routes, it starts acting weird.

So what can we do? We need to move the admin bar to somewhere not ruled by All Mighty AngularJS.

1. If you use the project files from my previous tutorial, please add wp_footer(); to index.php first, and make sure there’s nothing like add_filter('show_admin_bar', '__return_false'); in the functions.php, or the admin bar won’t be displayed.
2. Modify index.php to code below, so admin bar can get away from AngularJS:

Another thing to note is we should add a default route to our app for the best practice. We can do so by adding otherwise method at line 15, and please note that I changed the route of content page either, or the $routeProvider will never fall back to otherwise:

Now if a visitor tries to go some page doesn’t exists, the homepage will show.

Just download the full project files on GitHub (with bonus content that I will introduce in my next article – How To Dynamically Set the Page Title). While waiting for the next post, you can find more information about ngApp on the official AngularJS documentation.

Please note if you integrate Angular Slick into your theme, this trick won’t work anymore. Not sure why I just spotted the issue. Will post solution here if I can find any.

Updated on 052715: It turned out the position of wp_footer() did the trick.