There is 4 simple steps- Remove #from the URLs in Angular.
Step 1: Enable Html5mode Routing. To does this inject $locationProvider into config () function in script.js and call Html5mode () method passing true as the AR Gument value. With this change the config function would now look as shown below.
. config (function ($routeProvider, $ Locationprovider) {$routeProvider. When ( "/home" "templates/home.html" " HomeController "}). When ( "/courses" "Templates/cour ses.html " "Coursescontroller" }). When ( "/students" "Templates/studen ts.html " "Studentscontroller" }) $locationProvider. Html5mode ( true
Step 2: In index.html, remove # symbols from the links. The links in index.html should look as shown below.
<ahref= "Home">Home</a><ahref= "Courses">Courses</a><ahref= "Students">Students</a>
Step 3: Include the following URL rewrite rule in Web. config. This rewrite rule, rewrites all URLs to index.html, except if the request was for a file, or a directory or a Web API reque St.
<system.webserver> <rewrite> <rules> <Rulename= "Rewriterules"stopprocessing= "true"> <MatchURL=".*" /> <conditionslogicalgrouping= "MatchAll"> <Addinput= "{request_filename}"MatchType= "Isfile"negate= "true" /> <Addinput= "{request_filename}"MatchType= "Isdirectory"negate= "true" /> <Addinput= "{Request_uri}"pattern= "^/(API)"negate= "true" /> </conditions> <Actiontype= "Rewrite"URL= "/index.html" /> </Rule> </rules> </rewrite></system.webserver>
Step 4: Set the base href to the location of your single page application. The head section of index.html include the following line.
<href= "/"/>
Part, Remove # from URL AngularJS