Mastering Ember Js - 25 Nested Routes Video Lecture | Build Web Applications: Ember.js - Web Development

hello everyone this is lemon sunny
off-court logical and today's video
we're gonna have a look at nested routes
so up until now we've just been dealing
with one level of routes but in today's
video we'll be seeing how we can put
routes inside another route
so before we start digging in deep I
just want to make one clear distinction
so up until now we've been doing
something like route they start route
inside here and let's say you have
articles in there ok and then we just
pass in another parameter called path
safe first-class articles ok so there's
another type of route called resource so
you declare it by saying disturb
resource and then same parameters as you
pass into a route or with an extra
parameter so articles and then you click
path but it accepts one extra parameter
which is function basically inside this
function is where you can declare your
other shop runs so since this is the
main function and you're declaring
either routes or resources inside that
so when you create resources you can put
all the routes inside it so let's just
cut this and put it inside here so let's
say you want to visit a URL in your
browser say umm articles and you want to
create a new article so you want to do
something like articles for /nu remember
this is not a dynamic segment it's
different it's just a two-level route so
how do we create something like that and
the answer is very easy you just use
resources so inside there you can do
another route so we say new and the path
is new basically we can do something
like this rock as well and pass in say
edit that we'll be creating something
like articles 4 / edit
and we have another one us here that
would be a string of power slash edit
but there's just one slight difference
here since this is new we don't have any
dynamic segments like ID but anytime you
want to edit route sorry an article you
must provide ID of the article you want
to edit so the second route here which
is inside the articles resource most
Harper than on the segment or ID okay so
but before we dive into the browser
refresh let me comment this out I'm
sorry
becoming the internal part out let's
just have a resource there or let me
just come in all of it out I want to
show something I will just create a
regular route so let's say this started
route and we'll just call it articles
with a path or articles okay so back in
our browser that's just refresh it's
from the previous video let's do this
and go to our inspector okay so let's
just see all the routes we have right
now we just have an articles route and
we don't have any other routes but let's
remove this
and uncomment all of this out now we
must we will have but a route but we
should be having the nested routes as
well
okay let's refresh this just take a note
of what's gonna happen here when i
refresh yes inspector routes as you can
see a whole bunch of routes gaming okay
so basically we have this top-level
route a resource is the same as a route
but it's a special route that can have
all around inside it so this article's
route is a resource but it's also around
so it's sub routes a loading route and
error around which ember creates for you
automatically with every router as you
can see here for right now don't worry
about those but the ones we created a
new route and the editor of the index
routes that's very interesting
okay so if we happen to visit this
resource directly in the URL like this
or slash articles there is no ember
takes the articles template as your
containing template and then grow loads
the articles index template inside of
that so let me show you quickly in
handlebars what I mean just going on
index dot HTML and I'll just quickly
copy days just to show you so we'll
change the ID add an ID there from say
index sorry articles
and inside there will have h3 let's
write articles template test so let's
have another okay actually let's load
this in the browser so I saw something
with a fresh face as you can see inside
the articles template okay
so let's create another template for
this route here since we have one for
these articles let's create one for this
new route and we'll see how to show that
okay I'll copy this and before I create
this ID for the new route let's inspect
the routes here so if you want to get an
idea of what you should name your route
good place to look is in the end of an
inspector we have the articles new route
here and the template name should be
having an ideal of articles for /nu okay
so we should have articles for / new and
that's just given by the dynamic route
here so we have articles I was last new
and for the editors well we'll have
articles for / edit okay now let's
refresh this let's change the template
was inside of the articles / new
template and say inside articles for /
new so we can see a difference there i
refresh again so now if you visit for /
new forget that
they say be Shonda but it's not okay
let's see what happened
aha okay that's actually the point I was
wanting to me so you might be wondering
hmm
this template here why didn't it render
and the reason for that is these
particles here is not it's like a
container for every stock route so this
article's template that I showed here is
corresponding to this top-level resource
so am automatically creates for you
credit for us index inside of that
articles template okay so if we want to
show any of these routes here we must
create something either we don't create
this template at all just remove this
now when we go when i refresh this we
also see inside the articles four slash
new template that's because ember
created this template for us like we did
here but what we didn't add there was
the outlet okay so this outlet here will
render any stock template like article
slash new but if we remove it it will
not render on those sub templates just
likewise this outlet here inside the
application template renders any sub
template which is the articles and this
articles also since it's a resource
we'll we'll have to put the outlet
inside there so it can't render any sub
template so now that I've added this
outlet here when I go back to articles
and I refresh we should see an error
because I didn't create the articles for
slash index template okay so we have to
create them now since I explicitly added
this round index there okay so we will
do that now articles has indexed
so let's say it's like the article
/index advice when i refresh now we
should see that template me wonder okay
we still have an error let's see what
that is
since the URL articles to talk much
anywhere else in your application
okay that's because we are missing this
and that's here hey guys so it says
inside the articles for stock index
template so if you're wondering why we
need the index part just take it as if
we defined it here automatically we will
have to create a template for it but if
we remove it we don't have to create a
template for it okay so think of it as
think of a resource as a containing
route for other routes and think of the
template for the resource as a
containing template for the other sub
routes inside that resource just like
the application template is also a
containing template for any sub
templates
okay so my hope that is clear guys I
know this was slightly more complicated
than a lot of stuff we've done before
what does usual just drop me a line on
the comments below myself would like to
clear up anything so thanks for watching
once more I will see you soon in another
video
Cheers bye bye