Angularjs: Modifying the url using $locationProvider.html5Mode

Question

I am trying to modify the url of my angularjs app . Initially my urls were http:localhost:8080/a/web/app/index.html#/ and http:localhost:8080/a/web/app/index.html#/next

when I inserted the following code to my app.js

 var App =angular.module('App', [ 'ngCookies', 'ngResource', 'ngRoute', ]) .config(function ($routeProvider,$locationProvider) { $routeProvider .when('/', { templateUrl: '/a/web/app/views/main.html', controller: 'ctrl_main' }) .when('/next', { templateUrl: '/a/web/app/views/next.html', controller: 'ctrl_next' }); $locationProvider.html5Mode(true); });

My new urls became http:localhost:8080 and http:localhost:8080/next . My problem is when I tried to reload the page at http:localhost:8080/next , 404 Not Found error is coming

JB Nizet · Accepted Answer · 2014-03-29 18:29:49Z

1

That's expected with html5 mode. The browser, if you ask it to reload, will send a request to the URL it has in its location bar.

So you need to configure the server to actually send back the index.html page for all the bookmarkable URLs you use in the angular application. The whole page will reload, the angular app will restart, the $route service will restart, and will invoke the controller and display the partial configured for the URL.

answered Mar 29, 2014 at 18:29

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sarath Pv Over a year ago

is there any way to redirect to the same page were reload is made , rather than index.html from server?

JB Nizet Over a year ago

That's what I explained in my answer. Re-read it. The browser will load /foo/bar from the server. The server will send back the contents of the index.html page. The angular app will reload, and the router will display the page of the application that is mapped to /foo/bar.

Sarath Pv Over a year ago

hi ,when I send back the index.html url from server, for a reload at /foo/bar ,as you said the angular app reloaded ,but now the $location.path is pointing to /a/web/app/index.html , not /foo/bar ,so it is loading the default(.otherwise) route

JB Nizet Over a year ago

You shouldn't redirect to index.html. You should serve the contents of index.html directly from the URL /foo/bar.

Robbie Smith Over a year ago

Yeah, this is still not working for me. Is there anything special I need to do to my .htaccess file? This is my last rule RewriteRule ^ index.html [L], but my /admin/classes is getting confused when I reload the page. Here is my ui-router state for this url. $stateProvider. state('admin.classes',{ url:'/classes', templateUrl:'app/partials/admin/classes.html', controller:'AdminClassesCtrl' });

|

Vitaly Supruniuk · Accepted Answer · 2017-04-19 07:11:33Z

I know the answer is a bit outdated, but in my case adding <base> attribute to index.html helped, for example:

<base href="/a/web/app/">

Collectives™ on Stack Overflow

Angularjs: Modifying the url using $locationProvider.html5Mode

2 Answers 2

6 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Linked

Related