Geek Answers Handbook

AngularJS Ui-Router nested views do not work with html5mode

I am using AngularJS with ui-router and I have a problem with nested views when using Html5Mode . This problem only occurs with html5, if I do not use it, everything works fine. I tried to work with the base <base href="/"> , but did not work.

In addition, the problem occurs only inside nested views, on the main ui-view this is normal.

This is the code I'm using:

index.html

 <div> <ul> <li ui-sref="menu">Menu</li> <li ui-sref="user">User</li> <li ui-sref="contact">Contact</li> </ul> <div ui-view autoscroll="false"></div> </div>

child template .html

 <div class="container"> <div> <ul> <li ui-sref="user.data">My Info</li> <li ui-sref="user.order">My Order</li> <li ui-sref="user.budget">My Budget</li> </ul> </div> <div ui-view></div> </div>

app.js

 .state("user", { url: "/User", templateUrl: "content/user.html", controller: "UserCtrl" }) .state('user.data', { url:"/MyData", templateUrl: "content/user/user_data.html", controller: 'UserCtrl' })

If I use html5 WITH `, I can navigate, but when I refresh the page, I get errors like this:

Resource interpreted as Stylesheet but transferred with MIME type text/html

And if I use WITHOUT <base href="/" /> , then it does not work at all. But then again, only for the child ui-view the parent view still works.

+4
source share
1 answer

I still do not have such a problem, so my knowledge is limited, but I heard a few things that can help you. As this ui.router tutorial says:

HTML5 mode

The UI Router frame gives you full control over the URLs created for your site, allowing you to enable HTML5 mode. when enabled, this mode does not generate a hash (#), but uses the HTML5 history API to create clean URLs. The only cautionary approach is that you should create your application to work under each generated path, and not just in the root, which is common in most single-page applications.

Hope this helps! Greetings.

+1
source

More articles:


All Articles