In my tutorials of AngularJS WordPress theme, I’ve always put
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:
You should realize now that with my hint in the first paragraph, it has to do with the position of
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.
- If you use the project files from my previous tutorial, please add
index.phpfirst, 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.
index.phpto 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
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.
I’m a senior web developer helping clients build their websites to grow businesses. Currently I’m based in Taipei, Taiwan.
I write things about WordPress, AngularJS and life. Whenever you’d like to find someone to talk about these topics, just get in touch!