This is the third post in a three part series on using Genesis and Angular. Part 1 can be read here, and Part 2 can be read here.
Routing is part of the magic of web applications, and not something that we really think about when we’re developing WordPress sites since it’s basically taken care of for us in using the nav menu and full on links with page reloading. But this project was all about skipping the page load, and having a view area that will dynamically load posts and pages, an “app-like state” some might say.
Using Genesis and Angular to display posts and pages in an app-like state wasn’t super straightforward. While it opened a few extra cans of worms I wasn’t expecting, adding routing for both posts and pages has proven to be super interesting, and got me digging into WP core as well to find some answers.
Let’s review the goals of 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 Angular on posts and pages
Ok, this is going to be a bit of a beast, so let’s get truckin’…