Angular 2 routing tutorial Video Lecture | Angular 2 tutorial - Front-End Programming

this is part 30 of angular 2 tutorial in
this video we'll discuss the basics of
routing in angular so what is routing in
general routing allows us to navigate
from one view to another view let's
understand this with an example
but in our application we have got
employee list component within the
employee folder let's create another
component let's call it home component
so we can see how to navigate from home
component to employee list component and
vice versa so I'm going to place this
home component in its own folder so
let's add a new folder to the app folder
and let's name this new folder home and
we're going to place our new component
within this folder so let's right click
on this folder ad and we want to add a
new type script file and let's call this
file home dot component dot TS and as
you can see this component is very
simple and straightforward
all this is going to do is display this
message this is the home page now all
the components that we have built so far
in this video series had it select a
property we then use that select a
property as a directive where we want to
use that component but notice this
component does not have the selector
property this selector property is only
required if we plan to embed this
component inside another component using
that selector as a director instead we
are going to route to this component
using angular router that's the reason
we have omitted the selector property
now let's register this component in a
module where we want to use it at the
moment within our application we only
have one module which is our application
root module app dot module dot TS so
within this file let's import our home
component and then within the
declarations array let's specify our
home component now if a user tries to
navigate to a component that does not
exist we want to route the user to a
page not found component we don't have
that page not found component yet so
let's go ahead and create that
to place a component within this others
folder so let's right-click on the
others folder and add a new type script
file let's name this page not found dot
component dot PS and here is the code
for page not found component again this
component is pretty straightforward
notice we are using the h1 element just
to display this message the page you're
looking for does not exist notice just
like of a home component this component
also does not have the selector property
let's go ahead and register this
component also with our application
module so let's enter the required
import statement and then specify the
component as part of the declarations
array of our ng module decorator so the
component name is page not found
component so at the moment within our
application we have got three components
employee list component home component
and page not found component so let's
see how to use routing to navigate
between these three components let's
look at the steps required the first
step is to set base href element in our
application host page which is usually
index dot HTML in our application host
page we have already said this base href
element this base href element tells
angular how to compose navigation urls
so if you look at our index dot HTML
page we have already set the base HTF
element as you can see right here next
importer of the module and define our
routes so with another application route
module which is apt at module dot TS
just like how we have imported other
system modules like browser module forms
module and HTTP module let's also import
throughout the module in addition to
router module there are also importing
routes so it's nothing but an array of
route objects so if we right click on
this and go to definition we can see
zones is nothing but an array of route
objects we are going to use this to
define our routes will do that ingested
so import roto module and routes from
angular router and then make this router
module part of the imports array just
like how we have made browser module
firms module and HTTP module next let's
define our application routes to do that
I'm going to create a constant let's
call the constant app routes we can give
it any meaningful name we want since
here we are creating applications
outside called it a proud and the type
for this is going to be routes and you
know what routes is it's an array of
route objects so this array is going to
contain route objects and here is our
first route object it contains part and
component properties so what is this
route object telling angular router
basically it is telling angular Sauter
if it sees this path home appended to
the base URL then navigate the user to
home cronin similarly if we see
employees path appended to the base URL
then navigate the user to employee list
component so let's define two other
routes now what should happen if the
user navigates to the root URL that is
to localhost for slash SRC that's our
base URL so if the user navigates to
that base URL then which component do we
want to display to the user and we
specify that using an empty part so in
this case we set path to an empty string
so basically the user dint enter any
part like home employees etc s empty
it's just a base URL in that case we
want to redirect the user to a different
route and to which route do we want to
redirect the user we want to redirect
the user to home that's what we
typically do in any application if users
navigate to their fruit of the
application for example to presume
techcom then we redirect the user to
home page and that's what we are doing
here as well and what kind of path match
we want to do we want to do a full path
match
and finally let's specify the wildcard
route now if a user enters a route that
does not exist at all
for example ABC we don't have a route
called ABC so what do we want to do in
that case in that case we want to
redirect the user to page not found
component and we have already created
page not found so here are our four
routes that we have defined now we have
just created this routes object we need
to tell angular router about these
routes and the baby do that is by using
for route method of this router module
so we use the for route method and if
you notice from intellisense
it takes an array of route objects so
here we have our route objects so let's
pass that to the for food method so we
defined our routes and we are letting
the angular router know about these
routes using the for root method of the
router module one very important point
to keep in mind is the order of these
routes is very important so more
specific routes should be at the top and
gender thou should be at the bottom and
that's exactly the reason why we have
included this wildcard route in the end
for example if we enter ABC in the URL
then that path does not match any of
these routes so it falls back to this
route and it displays page not found
component since this wild-card route
matches every route it should be in the
end what happens if we place it at the
beginning if we place it at the
beginning for every route it's going to
display page not so on for example if
it's at the beginning and we type home
that matches this route and it's going
to display page not so on so more
general Gao should be at the bottom and
more specific route should be at the top
so at this point we have our route
defined our next step is to tie these
routes to the application menu so the
users can click on the application menu
items and navigate around let's create
our application menu within our route
component which is apt at component dot
tears within the in line
you template right here let me pay some
HTML notice here we have a development
with panning set to 5 pixels this is
going to give us 5 pixels padding on all
sides of the browser window and inside
this we have an unordered list and we
are using these to bootstrap classes nav
and nav tabs this is going to give us a
bootstrap navigation component I'm not
going to go into the details of
bootstrap navigation component because
we discussed that in detail in part 27
of bootstrap tutorial and inside this
unordered list we have to list items and
within the list item we have an anchor
element and on the anchor element we
have used this routered link directive
and notice this outer link directive is
pointing it to a string called home and
this routered link directive is provided
by these outer module that we have
imported within our root application
module so here we have the router module
this router module provides this router
link directive and basically this outer
leg directive is telling angular router
to navigate the user to this home path
when they click on this home link and
what should happen when the you know
angular router sees this part in the URL
that's defined within hours out in the
root application module so basically if
it sees this part within the URL then we
are asking angular router to redirect
the user to home component and that's
how the home component is displayed if
the user clicks on this home link before
we run our application let's include
this URL rewrite rule within the web
config file of our angular application
this rewrite rule tells is how to handle
routes so basically this match URL right
here rewrites everywhere L to this URL
and this rewrite URL right here should
match the base h ref URL that we have in
our index dot HTML so let's include the
URL rewrite rule within the web config
file of our angular application and then
let's run our application by pressing
ctrl f5 notice we have the applications
menu rendered as expected now let's
click on the Home tab nothing happens
and when we click on the employees tab
nothing happens either so let's launch
browser developer tools and investigate
what's going on we're on a console tab
we have three errors so let's
investigate these errors look at the
first message right here it says cannot
find primary outlet to load home
component so basically Anglet is
complaining that it does not know where
to render the home component view
template now when we click on the Home
tab we want the home component view
template to be rendered just below this
menu and along the same lines when we
click on the employees tab we want the
Employee List component view template to
be rendered below this menu and we know
this menu is present within our route
component right here so we want the
routed components view template to be
displayed just below this menu and to
tell that to angular we use this
directive router outlet and this
directive is provided by the router
module which we have imported in our
route application module so basically
this director tells angular router to
render the router components view
template at the location where we have
this directive so let's save all changes
and reload of web page notice now we
have the home component view template
displayed and when we click on the
employees tab the employee list
component view template is displayed now
here we have a problem with the service
notice we have an error message here
that's basically because our web api
service is not running so let's go ahead
and run over web api service as well
right click on web api so this project
view and we want to view it in browser
our web service is now up and running so
let's reload this web page one more time
notice now we have the list of employees
displayed and when we click on the Home
tab we have the Home component view
template and when we click on the
employees tab we have the Employee List
component view template at the women we
have a small problem we don't know which
tab is active home or employees what we
want to do is style the active tab
slightly differently so the end user
knows which tab is active and for that
we will make use of the bootstrap active
CSS class and the easiest way to apply
that active CSS class is by using
another directive called the outer link
active directive again this directive is
also provided by the router module which
we have imported and we are going to set
this to the bootstrap active CSS class
now what this director is going to do is
if this elements route matches the
active route then it applies this active
CSS class to the anchor element in our
case we actually want to apply it to its
parent that is the list item so let's
actually apply this directive on the
list item itself and let's do the same
thing with this list item let's save our
changes and reload of webpage notice now
the employees tab is styled slightly
differently and similarly when we click
on the Home tab its styled differently
so we know the Home tab is active one
important point to keep in mind is this
URL rewrite rule is required if you are
using IAS as your web server if you're
using a different web server then a
different configuration may be required
what configuration to use depends on
your web server and that is clearly
documented within the official angular
documentation if we don't have this URL
rewrite rule within the web config file
of our angular application then the
routing may not work correctly for
example when we reload this web page by
pressing ctrl R or ctrl f5 or by
clicking this reload button or
on this back of forward arrows or when
we type the URL directly within the
address bar the routing may not work as
expected let's actually prove this let's
comment the rewrite rule within web duck
config file save our changes and then
let's try to reload this web page by
clicking on this reload icon and notice
we get four zero four so routing is not
working as expected
we need this URL rewrite rule only if we
are using html5 style outs if we are
using hash style routes then it is not
required at the moment they using html5
style routes without hash in the URL
let's try to use hash Styles outs to use
hash styles out we have to set use hash
to true and we do that within the for
root method so along with the vowels we
pass an object which contains this
property use hash and we have set that
to true so with this change in place
let's run our application one more time
by pressing ctrl f5 notice the URL in
the address bar by using hash style
routing when we click on the employees
tab we see the Employee List component
view template back and forward buttons
in a browser work is expected
similarly when we click this reload
button it still works as expected and
when we type directly in the address bar
for example I want to go to the home
proud look at that it still works and if
we try to navigate to a route that does
not exist for example we don't have it
out called ABC look at what happens we
are routed to page not found component
and the text that we have in the
beautiful plate is displayed right here
and along the same lines if we try to
navigate to the route URL we should be
redirected to the home route that's what
we have specified within our route
configuration so here hash styles outing
is working even without the three write
rule in web config file thank you for
listening and have a great day