Linking Between Routes
In this lesson, we'll learn how we can link between the routes we have defined in our application. We'll also learn about the importance of HTTP Method verbs and resources to standardize our route definitions.
- Author
- Tom Gobich
- Published
- Jan 24
- Duration
- 7m 52s
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
Transcript
Linking Between Routes
-
(upbeat music)
-
- Cool, so we're on our way.
-
We have two different pages,
-
both of which are using HTML
-
to render out some form of content.
-
However, having to manually update the URL ourselves
-
to get between these two pages is a little bit cumbersome
-
and we can't really expect our users
-
to go through that flow.
-
So how can we provide links to these different pages
-
on the pages themselves?
-
Let's go ahead and hide our browser back away.
-
And we left our browser on the homepage.
-
So we'll start there.
-
The first thing that we can try
-
is just to use raw HTML.
-
So we can have a navigation
-
with some form of a link with an href
-
that points to our slash movies route.
-
And then we could say movies right there.
-
We can also add a link back to the homepage
-
so that we can just copy and paste this
-
onto our various pages.
-
So now we have both a link for the homepage
-
and for our movies page.
-
Let's copy the navigation as a whole
-
and let's jump over to our movies page
-
where we can paste this navigation in.
-
So now we have a navigation element
-
on both our movies and our homepages.
-
If we dive back into our browser,
-
we'll see that immediately reflected.
-
We're on our homepage at the moment.
-
So let's try clicking into our movies page
-
and it worked.
-
And we can go back to our homepage
-
and it works too.
-
So this is great and it definitely works.
-
It's perfectly valid HTML.
-
However, there's a better way that we can do it
-
that's a little bit more future safe
-
should our URLs change at any point in time
-
throughout our applications life.
-
So let's go ahead and hide our browser back away
-
and take a look at that approach.
-
We'll dive back into our routes
-
and let's get each of our routes an identifier.
-
For our homepage, in order to do this,
-
we just need to chain off of the route definition itself,
-
the method as.
-
And then we provide this as method,
-
a name for our route.
-
For our homepage, we can just call it home.
-
And for our movies page, it's as.
-
And we'll keep to resourceful name.
-
So we'll do movies and this will serve as our show route.
-
I'll go ahead and save this so that our formatter runs
-
and I'll scroll down just briefly.
-
So now if you recall back to when we were talking
-
about the various HTTP methods
-
that we can use to define our routes with,
-
there's the get requests, post, put, patch and delete.
-
These not only make up different actions,
-
which what they represent,
-
but they can also represent resources.
-
With the route that we have so far,
-
we're on our way to making a movies resource.
-
If the word resource here is tripping you up,
-
you might think of it as an entity
-
or maybe even an object within the real world.
-
You might physically have a movie
-
and you might have a collection of movies.
-
So similarly to how we have a linter within our code base
-
to help keep our code itself standardized,
-
resources kind of do the same thing
-
for our route definitions.
-
They're gonna help keep them standardized
-
throughout the various different resources
-
that our application may have.
-
Now to help showcase what a resource
-
in its entirety might look like,
-
we're gonna get rid of our movies route here temporarily
-
and we're gonna stub some routes
-
that would make up an entire resource.
-
We're gonna end up undoing this portion right here.
-
This is strictly just for demonstration purposes.
-
So we're gonna have our router,
-
we're gonna have a get request for slash movies
-
and I'm just gonna stub a handler.
-
In this particular route within our resource,
-
we could name movies.index.
-
Within a resource, this route would serve
-
as our listicle route.
-
So it's the route that would be in charge
-
of listing all of the movies that we have.
-
It's our library or our collection of movies.
-
I'm gonna give this a copy and we'll paste it again
-
because if you have a collection of movies,
-
you're gonna need a way to also show an individual movie.
-
That's where you do movies slash
-
and then some identifier for that particular movie.
-
This might be something like my awesome movie.
-
It's just a URL safe string or identifier
-
that we can relate back to a single movie.
-
In terms of naming this route,
-
this would be the movies.show route.
-
Now we just went out and bought a new movie
-
so we need a way to add a movie to our collection.
-
That's where we would use a post HTTP method
-
so that we can post data to our slash movies route.
-
And since post is different from get,
-
the AdonisJS routing system will use
-
the requests HTTP method to match it up
-
to the routes HTTP method to determine
-
which of these two routes should be used
-
whenever we make a request to slash movies.
-
In terms of our posts name,
-
this would be called movies.store
-
because we're storing a movie
-
into the underlying movies resource.
-
Well, now the movies release date just got pushed back
-
so now we have to update it within our movies collection
-
to reflect that change.
-
So we can use put to designate
-
that we want to now update our movie.
-
We then need to identify which particular movie
-
we want to update.
-
And just like with our show route,
-
we would need some form of unique identifier
-
to identify what movie it is that we wanna update.
-
And that identifier would also need to be URL safe
-
so we can copy what we have for our show
-
and paste it into our put.
-
And the name for this route would be movies.update.
-
But now we need both an update and a creation form
-
so that we can actually input the different data we'll need
-
to both create the movie and update the movie.
-
So for creating, this could be something like
-
a get request to movies/create.
-
And the name for this would then be movies.create.
-
Now for our update form, this would be relatively similar
-
except it would be movies.
-
We would need to uniquely identify what movie it is
-
that we want to update.
-
And then instead of creating it, we could edit it.
-
And the name for this route would be movies.edit.
-
Well, that movie just got canned.
-
So now we don't need it within our resource at all.
-
So let's go ahead and define a way to delete it.
-
So that's where we would use the delete HTTP method.
-
We don't wanna delete all of our movies.
-
So again, we need to uniquely identify what movie it is
-
that we want to delete.
-
So we'll paste that in there.
-
And the name for this route would then be movies.destroy.
-
Now you might be wondering why destroy
-
instead of delete here.
-
There's a couple of reasons,
-
but the easiest of which to understand
-
is that within JavaScript, delete is a reserved word.
-
Highlighted by the red annotation here within my theme
-
and destroy just kind of helps us circumvent
-
using a reserved word
-
while still having the underlying same meaning
-
of deleting out some form of a record.
-
So these are the different routes that make up a resource.
-
And there's a different route per action
-
that we could perform for that particular resource as well.
-
And again, the different HTTP methods
-
that we're using to define the routes
-
allow us to reuse routes over and over again,
-
but with different purpose and meaning.
-
So let's go ahead and get rid
-
of all of these different routes
-
and get back to just our movies route with our handler.
-
Okay, so we're back.
-
So following along with the convention
-
that we just defined for our resource,
-
this particular route's purpose
-
is to show a particular movie's details.
-
It's our movies.showRoute.
-
So we know that we need some form of unique identifier
-
to specify what movie exactly we want to show.
-
So let's do my awesome movie within our URL here.
-
So now that we've updated our URL
-
to keep with resourceful naming,
-
if we were to jump back into our browser
-
at this point in time,
-
and we try to go to our movies route,
-
well, uh-oh, we no longer have just a slash movies.
-
So our link is out of date.
-
Let's go back to our homepage and hide our browser away.
-
And that's one reason why it's good to stay away
-
from hard URLs that are linking to other pages
-
inside of your application.
-
And that's where those names that we've given
-
our different routes come into play.
-
They uniquely identify the individual routes
-
that we'll have within our application
-
so we can dive back into our homepage
-
and we can make use of them.
-
So just like with our movies page,
-
we're using double curly braces
-
to plop the actual movie's name onto our H1.
-
We can use those same double curly braces
-
to access a method that's on edges state called route.
-
And this route can accept a route identifier
-
and it will automatically build out the URL
-
to serve that individual route.
-
So for our homepage, we called that route home
-
so we can provide the identifier just home there.
-
And that route's gonna match the hard-coded URL
-
that we had previously of just being a slash.
-
For our movies, however,
-
if we do double curly braces here, route,
-
we called this route movies.show.
-
And the route that it's going to generate for this one
-
will not match the hard-coded URL.
-
Previously, we just had slash route
-
and now this route's gonna change
-
from that hard-coded just slash movies
-
to now it's gonna be slash movies slash my awesome movie
-
to keep in line with the underlying URL
-
that we have on the route definition
-
for our movies.show route.
-
So let's copy our updated navigation from our movies page
-
and let's paste it on our homepage, just like so.
-
Give this a save.
-
And now we can jump back into our browser.
-
Let's give our movies page one more try.
-
And there we go.
-
So now not only do we see my awesome movie,
-
but we're also now at the URL slash movies
-
slash my awesome movie.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!