Remove # from URL AngularJS Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 27 of angularjs tutorial in
this video we'll discuss how to remove
hash from URLs this is continuation to
part 26 so please watch power 26 before
proceeding notice within the URL we have
the hash symbol no matter to which page
you go to we have a hash symbol in the
URL to remove this hash symbol there are
four simple steps the first step is to
enable html5 mode routing to enable
html5 mode routing we are going to
inject dollar location provider service
into the config function so let's flip
to visual studio within our script or
J's file we have our config function
right here at the moment we are
injecting dollar route provider
let's also inject dollar location
provider and then we are going to use
html5 mode function and then pass it
true to enable html5 mode routing that's
the first step the second step is to
remove hash symbol from all the links in
index dot HTML so let's go to index dot
HTML
notice within every link we have called
a hash forward slash we can get rid of
those two symbols now because we are
making use of html5 more routing that's
our second step the third step is to
include this URL rewrite rule in web
config file now basically this rewrite
rule is telling that any request for a
URL should be rewritten to index dot
HTML however there are some exceptions
there are some conditions and the
conditions are if the request is for a
file or for a directory or if it's a Web
API request then we don't want this rule
to be processing that request all the
other requests should be mapped to index
dot HTML which is our layout page into
that layout page all the other partial
templates will be injected so that's the
reason why we are redirecting every
request to index dot HTML so let's
include this rewrite rule in web config
file in the interest of time I
already type the required configuration
so let's copy it from the notepad and
paste it within our web config file
that's our third step last and the final
step is to set this base href element to
the location of your single page
application and they should go within
the layout page so in our index dot HTML
I am going to include base href element
and I'm going to set this to false lash
so basically what this is telling is
that the layout view which is the page
into which all the other partial
templates will be injected is present
within the root directory of our
application so at the moment index dot
HTML this is present in the root
directory that's why we have set base
href to a forward slash in case if that
index dot HTML is present in a different
folder maybe something like my app then
your href will be my app in our case
it's present in the root directory so we
have just included a forward slash there
so those are the four steps that are
required to remove that hash symbol from
the URL so with all these changes let's
rerun the page and look at this when I
type for example slash home look at that
VR on the home page similarly when we go
to courses we are on the courses page
and slash students takes us to students
page now we have clean URLs so these are
the four simple steps to require to
remove that hash from URL in angular
thank you for listening and have a great
day