Join Roy Sivan for an in-depth discussion in this video Connecting the two views (list and single), part of AngularJS and WordPress: Building a Single-Page Application.
- View Offline
- Now that we have both the listing view…and the detail view working…with the URLs appropriately,…let's connect the two.…I'm going to go ahead to Sublime,…and open up the list view,…and I'm going to put in an a tag.…Normally, in HTML, you would use the href…as you're referring, and you'll pass in the URL there.…Since we're using Angular UI router,…we're actually going to use UI sref,…which stands for the state,…and here the state is detail, passing in the post.id…lets the detail know which ID it needs to go to.…
I'm going to hit Save, Referesh in Chrome.…First let's go to the listing page,…and here you're going to see…Click here to read more.…I'm going to click, and it takes me right there,…and I can go back.…Just to make sure this works properly,…I'm going to create some more posts.…So first I'm going to add a new one,…Another post to test the app.…(mumbles)…I'm going to use bold just to trick up and make sure…the HTML works properly,…and I'll Publish that,…and I'm going to hit Refresh.…
Now we see two posts here on the listing page,…
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