Mastering Ember Js - 8 Linking to routes or pages Video Lecture | Build Web Applications: Ember.js - Web Development

hey guys this is lament sunny of court
logical and this tutorial video we're
going to be having a look at how to make
our lives easier by creating links to
the different routes that we've been
creating so up until now we've been
having to type in a URL here some road
name so that we can go to that route but
that's not usually how you use a website
normally people click on links and then
they go to the pages or routes that they
want so I might be interlinking the
using pages or routes to me the same but
just know that I am referring to the
same thing but I'm trying to use route
as much as possible because that's what
ember calls so let's take to that but if
I do say page just know that I meant
around okay so here we are inside our up
dot JS file and I've created two routes
called first page and second page so now
we want to navigate to these routes and
just to show that we are on that
appropriate route I have created two
templates corresponding to each of the
routes first page ID and a second page
ID and we have taxi app just says this
is our first page template and this one
says it's our second page template so
back in our browser let's just try to go
to those routes so on our first page
it's displaying that this is our first
page template so having navigated to the
second page route is showing here that
this is our second place template but we
don't want to be able to always be
typing this is the URL so let's write
link let's use one of em bus link helped
us to make that easier for us so back in
our text editor let's have a look at
where that lives so up until now we have
been ignoring this handlebars
template here which has does not have an
ID so basically what Emma does is it
looks for the script tag that doesn't
have an ID and makes that the
application ID so think of it as the
parent template for all these templates
so the index template second page
template and first face anytime we
navigate to those routes they all being
put inside where these outlets are
lives okay so we'll go deeper in that in
another video but for now just stick
with me okay so where you want to put
the link hover is inside the application
template so that it is shared across all
the pages so we'll just create a quick
Peter here and if you want to link to
around what you do is you use this
handlebars helper called link so hashtag
linked to and then inside code you give
it whatever route you want to link to so
in these cases first right
Oh more like first page that's the first
route name and you close it off by
forward slash and then you say to and in
between here you can put whatever text
you want to show as the link name as the
link text so we'll say from space so
just duplicate that and in here we've
got a link to second route pane solid
inside taxi I will put a second page as
well okay now let's go in our browser we
should see and I see my link being
generated to take us no space so that
happens so when I click on first page
we're taking the first page when I click
on second page we take into secondly so
what happened here okay let's step back
a little bit so what ember does is it
understands what handlebars templates
mean so ember can pass this and
basically just spit out HTML link tags
for you without you actually having to
explicitly say that so you could go
ahead and create a P tag and just say a
href / / aspiring and for / first page
and in here you say
first page with the link and it should
work exactly as link help us here so
when I click on here we go to first page
same as these links over here
but you don't want to be typing that all
the time because sometimes you may want
to do special things in here like
passing maybe a model which we'll cover
in another video which you can't easily
do here using this conventional link
type so we'll stick to using the link
help us that emma has provided to us so
just to tell just to show that this is
exactly the same links as we use in
normal HTML we'll just inspect it and as
you can see Emma has created an a tag
for us and it does apply some classes to
it which you can override but I will
just leave that as it is and it has
created appropriate URL for us okay guys
that's it for this tutorial video and I
hope it was helpful I've seen other
videos thanks for watching
bye bye