Category: Angular

Filed under: Angular, Blog, Web Development

Genesis and Angular: Adding Routing to Posts and Pages (Part 3)

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:

  1. Adding markup to my Genesis child theme
  2. Fetching data with the WP REST API and Angular
  3. Routing the data Angular on posts and pages

Ok, this is going to be a bit of a beast, so let’s get truckin’…

Continue reading

Filed under: Angular, Blog, Web Development

Using Angular to Display Content in Genesis Using the WP REST API (Part 2)

This is the second post in a three part series on using Genesis and Angular. Part 1 can be read here, and Part 3 can be read here

In my last post on the subject, we left off with two-way bindings to show that our Angular markup was working in Genesis. That’s great! But we want to use Angular to display content in Genesis using the WP REST API, right?

Ok, so, we’ve got some work cut out for us. Let’s dive back in. Unless otherwise noted, everything is in functions.php and custom.js

Note: this is not best practice, as you want to keep your code in modular files, but hey, this is just a quick bootstrapping example… We’re just learning here!

Let’s get start…

Continue reading

Filed under: Angular, Blog, Web Development

Adding Angular Markup to a Genesis Child Theme (Part 1)

This is the second post in a three part series on using Genesis and Angular. Part 2 can be read here, and Part 3 can be read here

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:

  1. Adding markup to my Genesis child theme
  2. Fetching data with the WP REST API and Angular
  3. Routing the data with Angular on posts and pages

If you’ve used Angular, you know you need to specify ng-app and 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 function.php file and all JavaScript has been enqueued from a main.js file)

Continue reading

Filed under: Angular, Blog, Web Development

Angular Learning Resources for Angular August

For the month of August, I’ve been diving into Angular, and so far, it’s much easier for me to grasp than BackboneJS. That’s ok, Backbone, I’ll come back to you later!

I’ve started compiling some resources I’ve been using to learn Angular as well, and am putting them here. I’ll be updating this from time to time as I go through these materials and build out some apps.

https://angularjs.org/

Continue reading