{"id":1159,"date":"2016-08-30T00:55:30","date_gmt":"2016-08-29T15:55:30","guid":{"rendered":"https:\/\/n8finch2024.local\/?p=1159"},"modified":"2019-06-30T07:01:38","modified_gmt":"2019-06-29T22:01:38","slug":"using-angular-display-content-genesis-using-wp-rest-api","status":"publish","type":"post","link":"https:\/\/n8finch2024.local\/using-angular-display-content-genesis-using-wp-rest-api\/","title":{"rendered":"Using Angular to Display Content in Genesis Using the WP REST API (Part 2)"},"content":{"rendered":"

This is the second\u00a0post in a three part series on using Genesis and Angular. Part 1 can be read here<\/strong><\/a>, and Part 3 can be read here<\/strong><\/a>.\u00a0<\/em><\/p>\n

In my last post on the subject<\/a><\/strong>, 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?<\/p>\n

Ok, so, we’ve got some work cut out for us. Let’s dive back in. Unless otherwise noted, everything is in functions.php<\/code>\u00a0and custom.js<\/code><\/p>\n

Note:<\/strong>\u00a0this 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!<\/p>\n

Let’s get start…<\/p>\n

<\/p>\n

Hello World with $https<\/code> Posts and the Rest API<\/h2>\n

The first thing that we want to do is get our “Hello World” going for Angular in Genesis. This isn’t too hard, and we just need to do two things:<\/p>\n

    \n
  1. Create a view area that will display our posts (we already have one: example<\/code>).<\/li>\n
  2. Request the posts from the WP REST API using Angular’s $https<\/code>\u00a0service.<\/li>\n<\/ol>\n

    Sounds simple, right? Here’s what we need to do. First, we add the view:<\/p>\n