AngularJS ui router html5mode Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 49 of angularjs tutorial in
this video we'll discuss how to use
html5 mode routing in an angular
application that's using UI router the
steps that are required to configure
html5 mode routing are same irrespective
of whether you are using ng route or UI
router in part 27 of this video series
we discussed how to use html5 mode
routing with ng route those steps are
still valid if you're using UI router
let's quickly review those steps and see
what we have implemented and what we are
at to implement for the sample
application that we have been working
with the first step is to enable html5
mode routing we do this by injecting
location provider service into the
config function and then calling its
html5 mode function passing at a value
of true let's see if we have implemented
this step let's flip to visual studio so
here we have our config function notice
at the moment we are not injecting the
location provider service so let's
inject this service and then if we
scroll down a bit notice we are already
calling html5 mode function of the
service and passing it a value of true
but this code is commented so let's
uncomment that that's our first step
enable html5 mode routing the second
step is to remove hash symbols from the
URLs now to build the URLs we are
actually using UIs ref attribute instead
of H ref attribute so within the code we
don't have any hash symbols so if we
look in index dot HTML where we are
building our links notice we are using
UI s ref attribute and we don't have any
hash symbols there in students dot HTML
same idea we don't have any hash symbols
there and in student details also we
don't have any hash symbols the third
step is to include this URL rewrite rule
in web config file we already have this
rewrite rule we implemented this in part
27 of this video series this rewrite
rule is going to rewrite all requests
to index dot HTML which is our layout
page except if the request is for a file
or a directory or if it's a web api
request and the final step is to include
this base href element in our index dot
HTML so basically this is going to point
to the location of your layout page now
if you look at our layout page which is
index dot HTML this is actually present
within the root directory of our web
application project so if you look at
the value for the space
ATF element you know it's a single four
slash meaning it's present in the root
directory of our web application project
so that's our final step so with all
these changes in place notice at the
moment we have hash symbols in the URL
so we are not using html5 mode routing
look at that wherever we go we have
those hash symbols now when I reload
this out look at what's going to happen
html5 mode routing is an action when I
go to courses look at that when we go to
students slash students when I click on
a student name we go to student details
again no hash symbols now one important
thing to keep in mind as far as this
base href element is concerned is that
in a place this just below the title
element within head section let's see
what's going to happen if I place it at
the bottom after all scripts and
stylesheets are loaded
so I'm actually placing it as the last
element and now look at this when I
reload and when I go to students look at
that we go to the student details
without any problem but at this point if
I reload this page by pressing ctrl R
look at that the application is not
working as expected
that's why include this base href
element just below the title element
within your head section before all the
scripts and stylesheets
thank you for listening and have a great
day