- Great, now that we have our blog list,…blog detail, and page views working,…we want to add a little bit of better URL structure.…So, instead of using the ID of the post,…we're going to use the slug,…just like Wordpress does by default.…You'll see here that it should be Awesome New Page,…but instead we get page dash 23, which, not as great.…First thing we're going to do is open up our IDE.…
We're going to go over to our page component,…and we'll see how this works.…First it grabs the ID from the URL,…then it runs our service getPage method…to grab the data from the page.…However, what if you don't have the page ID?…What if you have something else, like the slug?…This is how we're going to have to fix that.…We're going to go into our RestApiService,…and we're going to add one more method called getPostBySlug,…and we're going to pass in a post ID.…
We're going to copy our getPost, and paste it in.…But right here, where it says,…posts/, we're going to add one more change,…and we're going to do slug=, and instead of post ID,…
Author
Released
5/3/2018- Why Angular and WordPress?
- Setting up the Angular CLI and WordPress locally
- Creating services for modular code
- Creating app routes
- Creating Angular services and components
- Creating your search form
- Creating a new Angular app
- Extending with EZ Data
Skill Level Intermediate
Duration
Views
Related Courses
-
Learning Angular
with Ray Villalobos1h 40m Beginner
-
Introduction
-
Welcome1m 24s
-
What you need to know1m 13s
-
Exercise files26s
-
-
1. Angular WordPress Theme
-
Why Angular and WordPress?1m 29s
-
Create the child theme4m 3s
-
Create the app page1m 49s
-
Enqueue the scripts9m 34s
-
Creating app routes4m 12s
-
Slug vs. ID4m 49s
-
Fix WordPress redirect5m 56s
-
Use as a headless site3m 14s
-
-
2. Angular WordPress Plug-in
-
Creating Angular components3m 59s
-
Creating our search form8m 34s
-
Handling our search event6m 42s
-
Displaying results5m 1s
-
3. Headless WordPress App
-
Intro and installing plug-in1m 39s
-
Overview of WAR library2m 56s
-
Create new Angular app1m 54s
-
App component6m 54s
-
App template4m 14s
-
Extend with EZ Data2m 19s
-
-
Conclusion
-
Next steps43s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press 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: Slug vs. ID