Mastering Ember Js - 3 Our First Ember Route Video Lecture | Build Web Applications: Ember.js - Web Development

hello guys this is lemon sunny of code
logical and in this tutorial video we're
going to be creating our first route
okay hold on a minute then we just do
that the last time yes we made our route
definition but actually that URL does
not have its own route in the sense that
okay let's just start coding and
everything should be get clear all right
so let's say we wanted our application
to handle stuff like links so if you
remember from the last tutorial video we
have a first route here called first
route and we're going to make sure that
any time that we click on this h2 here
that says our route we want to put up an
alert saying H it's too late
so in ember templates there it is all
works using handle does which we'll get
to in another video but for now if you
want to call an action inside your
controller or your route what you do is
just type curly braces these two that
tells handlebars that I'm trying to do
something umber related so you just say
action and then whatever action you want
to call you put it in strings so let's
say haven't clicked but so what's the
issue here when we run this and we in
the browser ember will scream at us and
tell us that we don't do not have a
handler for that click event so let's
just refresh the browser here and when I
click this and look at the control ember
would say nothing handled action handled
click header clicked so let's go back in
our code and actually rectify them so we
can define actions in two places first
either in our route or in our controller
mostly you'd wanna depends how you wanna
shot your application but I'd normally
put it in controller but just because we
are explaining how the route works we'll
put it in the route and in a later video
we'll try the controller so by
convention
whatever you name
your route let's say if the route has
two parts you want to normally camelcase
them but with that instead of starting
with a small letter you start with a
capital letter so in this case we'll
stay up first route and ember will
automatically associate this route name
with this route here so this is the
route definition and this is the actual
route which if we didn't create ember
will do for us anyway
but we have to overwrite these things we
want to give it more custom work to do
so first route equal to ember third
route third extent and any time you're
defining a route you have to extend the
Ember order so in here if we want to
create an action we just straight
property called actions and it's a hash
inside the house we can create any event
handler we want so in this case we want
to create a header click event handler
so we created here and it's going to be
a function so when we click on the
header now this one's also run and
inside it let's put an alert they're
saying had a clicked so let's go back
you know browser will refresh this page
so now we'll we click everything goes
right you see an alert pop-up so click
and then a lot didn't pop up so let's
see what happened since nothing handled
option headache late so let's go back in
this and see what happened ah okay this
brings me to something else okay since
we named these first route we actually
have to add something called route at
the end as well so amber knows that it's
around the reason for that is if we
didn't remove these first here and just
call it first
we wouldn't sorry we wouldn't need this
second route but sees there's a route
after first route this first route is
actually part of the route name and
route at the end just tells and but this
is actually a route so in this case we
will just leave first route there just
as an education for all of us this
normally it is kinda doesn't make sense
but you wouldn't want to say for a brown
but education purposes let's leave it
there I'm gonna refresh now let's click
yeah we should get that alert okay so
that works now a lot of pop rock so
basically that's what an Amber route
does for you if you want to add behavior
and stuff like if you want your route to
have a special model associated with it
as this each loop here which is
associated with that index route will
come to models in another video but just
a snippet to explain to you what an
Amber out does alright so in the next
video we'll have a look at something
else maybe a controller and we'll
actually attach this action to the
controller and I'll explain something
special about controllers okay so thanks
for watching guys
I'll see in another video bye