This month is “Angular August“, and so I’ve been focusing on learning Angular (1, not 2 yet… but soon!). I’ve set myself several tasks learning angular, one of which is developing a starter Genesis child theme using Angular and Gulp (since I’ve been wanting to check out and use Gulp more too… I still love you, Grunt). Here is what I’m trying to do with this project:
Primary objective: Create a view area that will display all the contents of posts and pages without a page reload using Genesis and Angular.
Do this by:
- Adding markup to my Genesis child theme
- Fetching data with the WP REST API and Angular
- Routing the data with Angular on posts and pages
If you’ve used Angular, you know you need to specify
ng-view in your html markup so that your Angular app will run. This is easy to do with a starter theme like _’s, but if you’re building on top of a framework like Genesis, you need to use the available
hooks and filters to manage your markup.
I’m a part of the community at WP Developer Club and KnowtheCode.io, and Tonya does a great job walking through the
markup.php file and structure in Genesis. Check it out and join up if you’re thirsty for knowledge!
So, here’s how I finally landed on the markup I needed to be able to add the basic Angular directives to my Genesis Markup…
(Note: Unless otherwise noted, all PHP goes in the