Join Roy Sivan for an in-depth discussion in this video Creating a single post template and route, part of AngularJS and WordPress: Building a Single-Page Application.
- View Offline
- Now that we have a Blog Listing Page working with route…controller and template, let's create the route control…and template for a single page or a blog detail page.…I'm going to open up Sublime.…I'm going to create a new statement.…I'm going to call it Detail.…I'm going to tell the url to be /posts/.…And just like when we created our factory, I'm going to…pass in ID, so that we have an ID of the posts that we want.…Control will be DetailCtrl, which we will have to create.…And the template will be appInfo.template_directory,…templates, and we'll call it detail.hmtl.…
So first let's create a new controller.…wpApp.controller, Detail Control, this will…also take in scope.…This will also take in a new injectable object called…StateParams in our original posts factory.…StateParams are variables that come from the url…into the controller.…In this case, we are going to need the post ID to get…the correct information for the posts that we are viewing.…Just to make sure that this view works, let's just start out…with a console log of the StateParams.…
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