angular.js IE routing issue

Question

my app seems to be working fine in chrome and FF but in IE there is an issue with the routing.

if I declare my app as follows

var app = angular.module('category', ['ngSanitize', 'ui']);

there is no issue at all

however if i change this to include a route definition like this

var app = angular.module('category', ['ngSanitize', 'ui']).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider.
  when('/cat/', {templateUrl: '/category.inc.php',   controller: 'CategoryProductsCtrl'}).
  when('/cat/:colour_title/', {templateUrl: '/category.inc.php', controller: 'CategoryProductsCtrl'});
}]);

IE adds a # before the cat in the address bar, so rather than displaying like

example.com/cat/

it displays

example.com/#/cat/

In the IE console I get the following errors

Error: 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [["fn: function(){var a=d.url(),b=..............

I've gone through the steps here

http://docs.angularjs.org/guide/ie

and am including

JSON2, angular-ui-ieshiv.min.js html5shim.js (to make it work in IE7)

and am not using ant custom tags etc in my app. Any help would be appreciated. My app is effectively in the same state as this although I'm pulling my data from the server

http://docs.angularjs.org/tutorial/step_07

discussion about this here: groups.google.com/forum/#!msg/angular/XujWvUl0nXg/ryyB-nZpdAYJ — Casey

4UmNinja 4UmNinja · Accepted Answer · 2016-04-21T23:19:02

you could potentially set HTML5 Mode to true in your router config, and remove the "#" from the urls eg: url: 'http://your_site.com/page/home'

like so..

app.config: $locationProvider.html5Mode = true;
index.html: <base href="root_directory_here" />

[more info here, And here]

angular.js IE routing issue

1 Answers