Mastering Ember Js - 2 Ember Router Video Lecture | Build Web Applications: Ember.js - Web Development

hello everyone this is Lambie designer
of code logical and in this tutorial
video we're going to be having a look at
the ember router so last time we looked
at how to install em bar so this time
we'll take a look at the router so first
of all before we create a route let's
determine why we need a route so I am
assuming that when you're creating
single page applications using stuff
like ember you'd want your users to be
able to go to different paths on your
website and the way you can let them do
that is to be able to type in URLs and
place it different pages so for example
let's say we want it a user to be able
to go to a URL called husband for slash
first route and right now our
application doesn't let us do that
I mean it may seem everything's ok but
when we go to the console ember is
telling us that URL first round did not
match any routes in your application and
the reason for that is we haven't
defined a route for it so let's go ahead
now and find a route with the name first
route that correspond to the URL for our
so before we do that let me just make
one distinction that your route name
doesn't have to be exactly what's inside
your URL here so you can have a route
called my route and then secondly you
have to say you can say whatever it
corresponds to in your URL so let me
just show you quickly what that means so
right now how you define routes is
inside these up the route route map here
so remember last video I said it wasn't
doing anything so in this video we'll
make it to something so inside of there
is where you define your routes on how
you do that is you say they start route
and it takes two parameters a route the
first one is the route name so let's
just say our router let's say not
necessary
first route router yeah and then the
second parameter is it takes a hush and
the hash takes a key value pair of paths
the key and the second value is actually
what corresponds in your URL so in this
case first route and you see in most M
bar to toriel's they'll make these the
same first route and first router but
they don't have to be exactly the same
but for conventions say they're usually
to say so if you just look closely I
said first router and first route they
don't have to be the same but for
conventions sake most likely you'll want
to make them the same so I'll just make
them first route here okay so now let's
go back in our browser and visit the
first route I'll refresh this page and
the error goes away so now let's try to
type first route and voila everything
seems to work right but what happened
we're still seeing welcome to M by J's
but we're not seeing anything underneath
the reason for that is if we look at our
index dot HTML file you will notice that
we do have a script tag here which is
our application template and this one
here is our index and by default ember
renders your index if you don't type
anything so in this case if we go to the
home page here it's rendering whatever
is inside here but then if we want to
render any other page we have to create
a template that corresponds to that page
so in this case we have a first round we
have to create a first round template
and how you do that is you just create a
script tag normally and give it a type
of text for /ex handle dice and inside
then you give it an ID which corresponds
to the name of your route so in this
case our route is called first route so
we'll give it that name and inside here
we can type anything we want to show up
in that round when you press it it shall
we say
our pressure out here as well I will
remove these outlet because we don't
need it for now okay so now let's go
back now browser and refresh then let's
go to first round if everything works
fine we should see our first round so
yes that works ok so just to recap what
we did in this tutorial video we went to
up the ratted up map and inside it we
created our first route and if you
remember the name of the route just what
they subtle have to be the same as the
URL and just to rectify just to make
explain that properly let me just say
first router in URL save that I'll
refresh as you can see it's giving us an
error because even though the name of
the route is first route but the URL
there is wrong so we'll say first route
in URL when I click this one should work
when i refresh the error should go away
so that's one very important distinction
I wanted to make so that's it guys this
is how you create a route in M by J s
and the name of the route here first
route has to be exactly the same as the
name of your template so in this case
how you give a name to a template is to
give it an ID and then inside there give
it a value of the name of the route you
want to link to
ok that's it guys for this video thanks
for watching I will see you in another
video bye