Join Roy Sivan for an in-depth discussion in this video Creating an AngularJS Template, part of Building a Single-Page Application with AngularJS and WordPress.
- 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…
Author
Roy Sivan
Released
12/15/2015In 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
Skill Level Intermediate
Duration
Views
-
Introduction
-
Welcome45s
-
-
1. Intro to AngularJS and JSON REST API
-
2. Getting Started with AngularJS
-
Creating the Angular app1m 30s
-
Creating an AngularJS Route1m 43s
-
-
3. Connecting AngularJS and WordPress
-
Conclusion
-
Advanced techniques2m 8s
-
Next steps56s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Creating an AngularJS Template