AngularJS ui router html5mode

ui router remove hash
angularjs ui router remove hash
remove # from url angularjs ui router
ui router without hash
angular ui router no hash
angular ui router remove #
ui router refresh page
angular ui-router refresh page
angularjs ui-router browser refresh
angularjs ui-router reload state
angularjs ui-router reload page
angular ui router html5mode not working

In this video we will discuss how to configure HTML5 mode routing in an angular application that is using ui-router.

The steps required to configure HTML5 mode routing are same whether you are using ngRoute or ui-router. In Part 27 of AngularJS tutorial we have already discussed how to configure HTML5 mode routing for ngRoute.

Step 1 : Enable html5mode routing. To do this inject $locationProvider into config() function in script.js and call html5Mode() method passing true as the argument value.

var app = angular
.module(“Demo”, [“ui.router”])
.config(function ($locationProvider) {
$locationProvider.html5Mode(true);
})

Step 2 : Remove # symbols from the URLs if there are any. In the sample application that we have been working with, does not have any # symbols as we have used ui-sref attribute instead of href attribute to create links.

Step 3 : Include the following URL rewrite rule in web.config. This rewrite rule, rewrites all urls to index.html, except if the request is for a file, or a directory or a Web API request.

[system.webServer]
[rewrite]
[rules]
[rule name=”RewriteRules” stopProcessing=”true”]
[match url=”.*” /]
[conditions logicalGrouping=”MatchAll”]
[add input=”{REQUEST_FILENAME}” matchType=”IsFile” negate=”true” /]
[add input=”{REQUEST_FILENAME}” matchType=”IsDirectory” negate=”true” /]
[add input=”{REQUEST_URI}” pattern=”^/(api)” negate=”true” /]
[/conditions]
[action type=”Rewrite” url=”/index.html” /]
[/rule]
[/rules]
[/rewrite]
[/system.webServer]

Step 4 : Set the base href to the location of your single page application. In the head section of index.html include the following line.
[base href=”/” /]

Important : Place the [base href=”/”] element just below the [title] element in the head section of index.html page. Otherwise the application does not work as expected when you refresh the student details page.

With all the above changes HTML5 mode routing should work as expected. Notice all the URLs are clean without any # symbols.

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video