Best IT Recipes

AngularJS: how to enable $ locationProvider.html5Mode with deeplinking

When you enable html5Mode in AngularJS via $locationProvider.html5Mode(true) navigation seems to be distorted when you land a page deeper on the site.

eg:

  • http://www.site.com
    when I go to the root, I can click all the links on the site, Angular $routeProvider will take over the navigation of the site and load the correct views.

  • http://www.site.com/news/archive
    but when I go to this URL (or hit the update when I am on deeplink, as above), this navigation does not work as I expect. First of all, as Documentation for $ locationProvider.html5Mode , we catch all the URLs on the server, similar to the otherwise route in angular and return the same html as the root domain. But if I then check the $location object from the run angular function, it tells me that http://www.site.com is my host and /archive is my path . $routeProvider comes in a .otherwise() since I only have /news/archive as a valid route. and the application does strange things.

Perhaps the rewriting on the server should be done differently or I need to specify the material in angular, but at the moment I don't know why Angular can see the path without the /news segment.

example main.js:

 // Create an application module var App = angular.module('App', []); App.config(['$routeProvider', '$locationProvider', function AppConfig($routeProvider, $locationProvider) { $routeProvider .when( '/', { redirectTo: '/home' }) .when('/home', { templateUrl: 'templates/home.html' }) .when('/login', { templateUrl: 'templates/login.html' }) .when('/news', { templateUrl: 'templates/news.html' }) .when('/news/archive', { templateUrl: 'templates/newsarchive.html' }) // removed other routes ... *snip .otherwise({ redirectTo: '/home' } ); // enable html5Mode for pushstate ('#'-less URLs) $locationProvider.html5Mode(true); $locationProvider.hashPrefix('!'); }]); // Initialize the application App.run(['$location', function AppRun($location) { debugger; // -->> here i debug the $location object to see what angular see as URL }]);

Edit on request, more detailed information on the server side: the server side is organized by routing the zend structure and processes its own routes (for serving data in the interface at specific URLs /api ), and at the end there is a general route, if any the route is not connected, it serves the same html as the root route. therefore, it mainly serves the html homepage on this disabled route.

Update 2 after studying the problem, we noticed that this routing works fine, since it is on Angular 1.0.7 stable, but it shows the behavior described above in Angular 1.1.5 unstable.

I checked the change logs, but so far I have not found anything useful, I think we can either present it as an error, or unwanted behavior associated with a specific change that they made, or just wait and see, get a correction in a later version so that be released stable version.

+62
angularjs
Aug 13 '13 at 16:51
source share
5 answers

This problem is explained by the use of AngularJS 1.1.5 (which was unstable and obviously had some error or other routing implementation than in 1.0.7)

returning to 1.0.7, the problem instantly resolved.

We tried version 1.2.0rc1, but did not finish testing, because I had to rewrite some functions of the router, since they pulled it out of the kernel.

In any case, this problem is fixed when using AngularJS vs 1.0.7.

+8
Aug 21 '13 at 12:07 on
source share

I learned that there are no errors. Just add:

 <base href="/" />

to your <head /> .

+80
Nov 12 '13 at 16:23
source share

It was the best solution I found after more time than I admit. Basically, add target = "_ self" to each link you need to ensure the page reloads.

http://blog.panjiesw.com/posts/2013/09/angularjs-normal-links-with-html5mode/

+10
Oct. 14 '14 at 18:13
source share
  • Configuring AngularJS

$ location / switch between html5 and hashbang mode / link rewriting

  1. Set up your server:

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#wiki-how-to-configure-your-server-to-work-with-html5mode

+7
Mar 12 '14 at 20:19
source share

my problem is solved with:

add this to your head:

 <base href="/" />

and use this in app.config

 $locationProvider.html5Mode(true);
+3
Jan 29 '17 at 17:47
source share


More articles:


All Articles