Join Roy Sivan for an in-depth discussion in this video Creating an AngularJS Template, part of AngularJS and WordPress: Building a Single-Page Application.
- View Offline
- Now that the list controller has been created,…we need some HTML to display the data.…I'm going to go ahead and create a new directory…within my theme called templates.…Within templates, I'm going to create a new file.…I'm going to save it as list.html,…and when the route matches properly,…the right controller and this template will load.…We're going to start by putting in just a simple h1,…and displaying the page_title,…which I defined in the controller.…If you're unfamiliar with the double curly brackets,…this is how we display data that we have defined…in the controller.…
Before I continue showing all the latest blog posts…that I got from the API,…I just want to look at all the data.…So I'm going to create a pre tag and a code tag,…and just look at posts,…which is the object that was created…upon return from the API query,…and I'm going to filter it with json,…so it shows up as json,…and I'm going to save.…Now we're ready to connect the route…to the template and controller,…so that we can actually view all the code…
In this course, Roy Sivan shows how to build a single-page web app with WordPress, AngularJS, and the WordPress REST API plugin. Roy also reviews creating controllers and routes to get a basic understanding of building a multiview single-page app. Plus, get some tips to transition your single-page app to a native mobile app with AppPresser.
- Setting up WordPress
- Creating the AngularJS components, including the controller and route
- Connecting WordPress and AngularJS
- Connecting views
- Adding and displaying custom data
- Using a plugin to show advanced custom field (ACF) data on the template