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.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

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.

var app = angular
.config(function ($locationProvider) {
})

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.

[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]
[/rule]
[/rules]
[/rewrite]

[base href="/" /]

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

[persistencej]

Your Tutorials are so helpful to the beginners ... Thanks a lot Venkat!

[harshamaharshi]

Thanks Venkat, excellent explanation skills

[jaseelaka]

In server side iam using node js, so there ia no web config file so how i put third step of html 5 mode

[FACTFOX]

Janab refresh karne pe nhi chal rha. Help me out please.
Thank you.

[prashantmaske]

sir, can you please add tutorials on digest cycle, watch apply, dugest

[dmmohnd]

+kudvenkat Sir, how can i use the web.config ( the code in it ) step number 3
in php . you are using Asp ?

[chengtie]

I have a MEAN stack project, and I don't see web.config where the rewriting rules should be put...

[dineshtestuser]

what we have to do, if we don't have web.config file?

[dhirajkatekar]

Hi Sir, Your tutorials are very nice, I want a little help from you, I want to know that how to convert those URL rewrite rule for .htaccess file for apache or php server.

[nayyarnayyar]

Hi Venkat Sir, Please let us know how to implement Asp.net Identity in our applicaton .
Please upload the video for that .. thxxx in advance

[rakeshtejaswi]

Hi,

To remove hash..(#)..from URLs..i am...using angular ui router to display pages..i have googled and tried many ways..but no use..files paths are missing..while i am trying to test locally using xampp .. path is being considered..directly from localhost..in between folder is missing..

Can any one suggest how to fix this issues..

Thanks

[John_Ridley]

One thing that is never explained, why would I care if there's a # in the URL? Is there an eventual reason for this, or is it just "ugly"

[amitmoral]

Hello every one I am using wamp server. I do every thing but # tag not removing from url. anyone can help me?

[mindeng]

I got an error when I used kud'code.

I used the code

a.activeState{
background-color:black;
color:white
}

It's working fine. anyone know the

[mehmetizci]

you know that Angular 2 is actually on beta and almost everyone trying to follow the cutting edge technologies. Why would you upload Angular 1 videos in 2016 April ? just curious..

[MagnificentKnight]

Hello +kudvenkat Sir,
Sorry for the irrelevant commentary, but I want to be responded quickly, so I asked for help on your most recent post.

Sir would you please help me with using slug in MVC urls?
I have a URL like "WebSite/package-details/4"
here "WebSite" is controller,
"package-details" is action,
and "4" is id,

I want it like
here "tours" is action,
"package-details" is also an action linked on "tours" view,
and "desert-safari-dubai" is a package name with "id = 4"

If you have some free time to brief me or have an article which can help me out exactly with this problem then please link it over here.

Cardiac Regards
Jehangir Wahid

[Albshr]

When I added the data from SQL server is hidden and the custom data from last topic also hidden
If I remove everything is working properly
the base line below title and web.config code is correct as you explained
What you expect?