WEBVTT

NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com

00:00:01.066 --> 00:00:07.606 align:middle
We now have two pages: the HTML
/genus/{genusName} page and the JSON endpoint.

00:00:08.196 --> 00:00:13.306 align:middle
Ok ok, the JSON endpoint isn't really a
page, at least not in the traditional sense.

00:00:13.886 --> 00:00:15.396 align:middle
But pretend it is for a second.

00:00:15.916 --> 00:00:21.766 align:middle
Pretend that we want to link from the HTML page
to the JSON endpoint so the user can see it.

00:00:22.376 --> 00:00:26.046 align:middle
Yes yes, we're going to do something
fancier with JavaScript in a minute,

00:00:26.356 --> 00:00:28.316 align:middle
but stay with me: this is important.

00:00:29.236 --> 00:00:33.076 align:middle
In show.html.twig, get rid
of all this notes stuff

00:00:33.336 --> 00:00:35.906 align:middle
because we're not passing
in a notes variable anymore.

00:00:36.396 --> 00:00:38.956 align:middle
Instead, near the top, add a new anchor tag.

00:00:39.716 --> 00:00:43.326 align:middle
I want to put the URL to
the getNotesAction page.

00:00:43.326 --> 00:00:49.276 align:middle
Fill this in with /genus/{{ name }}/notes.

00:00:49.276 --> 00:00:51.186 align:middle
Perfect right!

00:00:51.606 --> 00:00:54.376 align:middle
Wrong! Ok, only kind of wrong.

00:00:55.156 --> 00:00:59.116 align:middle
This will work: you can click
the link and go that URL.

00:00:59.676 --> 00:01:04.656 align:middle
But this kinda sucks: if I decided that I
needed to change the URL for this route,

00:01:04.976 --> 00:01:08.836 align:middle
we would need to hunt down and
update every link on the site.

00:01:09.176 --> 00:01:10.386 align:middle
That's ridiculous.

00:01:10.386 --> 00:01:16.416 align:middle
Instead, routing has a second purpose: the
ability to generate the URL to a specific route.

00:01:17.116 --> 00:01:19.636 align:middle
But to do that, you need to
give the route a unique name.

00:01:19.636 --> 00:01:27.606 align:middle
After the URL, add comma
and name="genus_show_notes":

00:01:28.376 --> 00:01:32.046 align:middle
The name can be anything, but it's
usually underscored and lowercased.

00:01:34.936 --> 00:01:38.046 align:middle
To generate a URL in Twig,
use the path() function.

00:01:38.546 --> 00:01:39.676 align:middle
This has two arguments.

00:01:39.866 --> 00:01:43.446 align:middle
The first is the name of the
route - genus_show_notes.

00:01:45.176 --> 00:01:48.706 align:middle
The second, which is optional,
is an associative array.

00:01:49.216 --> 00:01:56.246 align:middle
In Twig, an associative array is written
using { }, just like JavaScript or JSON.

00:01:56.246 --> 00:01:59.886 align:middle
Here, pass in the values for any
wildcards that are in the route.

00:02:00.716 --> 00:02:06.596 align:middle
This route has {genusName},
so pass it genusName set

00:02:06.596 --> 00:02:10.616 align:middle
to the name variable: Ok, go back and refresh!

00:02:11.786 --> 00:02:13.916 align:middle
This generates the same URL...

00:02:13.916 --> 00:02:16.956 align:middle
so that might seem kind of boring.

00:02:17.346 --> 00:02:22.436 align:middle
But if you ever need to change the URL for the
route, all the links would automatically update.

00:02:22.826 --> 00:02:26.106 align:middle
When you're moving fast to build
something amazing, that's huge.

00:02:27.156 --> 00:02:29.516 align:middle
Linking to a JSON endpoint isn't realistic.

00:02:30.116 --> 00:02:34.896 align:middle
Let's do what we originally planned: use
JavaScript to give us a dynamic frontend.