Need up to 30 seconds to load.
[Music]
let's get into routing now
right now we have our home page which is
going to have our contact
component our contact page and also if
we scroll down we have our home page
now this won't really do for a real
world application right we're not going
to show all our pages on
one route let's see how we can route
two separate pages to two separate
components
and the angular cli already created an
app routing module for us
makes this very easy so we'll go source
app
app routing module and we talked about
this routes array a little bit earlier
here is where we define our routes we're
going to have two routes
one is path is blank which is the home
page
component and notice how typescript
automatically tells us do you want the
component property yes i do
home component and since vs code knows
that this exists typescript knows it
exists
it'll help us do the import so watch as
i click this the import automatically
happens at the top of this page
there we go and it is relative path so
it's going
slash home home component
and when you're doing es6 imports you
can remove the js or dot ts
it's already implied so this is the home
component route and then we're also
going to have another one for
path contact and notice i'm not putting
the forward slash there
that's totally fine component is the
contact
component
and that's it now our homepage will show
the home component and our contact page
will show the contact component
all of the end stuff is handled by the
angular router and the angular cli
now right now our application is still
going to show contact and home on the
same page
let's go into appcomponent.ts inside of
our template
let's remove both of these so now all we
have is app header
router outlet and app footer
and for the home page we show the home
component if we go to slash contact
we get the contact component very nice
now we don't really expect our users to
type in the url
every single time so we're going to need
some links in our header
let's go over to our header component
this is going to be a little bit more
html because of
the way bulma structures its nav bars
so we have our logo here we're going to
say here we're going to have the
menu div class
navbar menu
div class navbar start
and the reason that bulma does navbar
start is because there's also a navbar
end so if you want
links on the left side versus links on
the right side i'll show you that a
class navbar item
home and then also for contact
now bulma is hiding these i think
because
yeah because our it's trying to be
responsive and helpful so it hides them
on smaller screens so just zoom out if
you don't see yours
there we go home and contact yeah home
and contact
and then if we didn't have bar end it
goes to the end
very nice so put them wherever you like
but
home and contact these are only html
links and they don't really do anything
right now right
we need to actually tell angular hey
these links are going to be routing for
us
now to do that we're going to use what's
called a router link
and this is how angular routes to
different sections router link
home page router link contact page
so now if i click home home page contact
home contact home contact
very nice and notice there's no page
refresh since
angular helps us make single page
applications right
very responsive very quick to change
between routes
and that's all it takes to do routing
you just add the routes in
app routing module right here
and then you add the links and that's it
everything gets injected into that
appcomponent.ts
router outlet right here so all of our
pages will have the header
and the footer and then everything else
gets injected
in router outlet
![Angular 8 : Creating New Component and Redirect new Page [Example]](https://i.ytimg.com/vi/3m_oKTFWIfM/mqdefault.jpg)
