AngularJs and HTML 5 history API not working

[hyperN]

I have problem using HTML 5 History API with Angular:

    Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: $locationWatch; newVal: 8; oldVal: 7"],["fn: $locationWatch; newVal: 9; oldVal: 8"],["fn: $locationWatch; newVal: 10; oldVal: 9"],["fn: $locationWatch; newVal: 11; oldVal: 10"],["fn: $locationWatch; newVal: 12; oldVal: 11"]]

Then I've searched for solution and I've found out that this is known problem. Only "solution" I've managed to find, which worked, was wrapping history API inside setTimeout function, smth. like this:

setTimeout(function() {
            history.pushState({}, "progress", url);
        },1000);

One user mentioned that this worked for him also:

$browser.url( state.url );
history.replaceState({}, state.title, state.url );

But no luck for me. $browser is Angular's private API which $location uses, interesting thing is that if I do smth. like this:

  var url = $browser.url() + "/progress";
  $browser.url(url,true);
  console.log(window.location.href);

My new url is logged but I don't see changes in address bar i.e. $browser.url() is shown. (in Chorme this proggres is shown for brief second then it disappears)

Could this be due to my server side routing configuration ? (I'm using ASP.net MVC).

My question is, has anyone alse had any luck with $browser or found solution to this problem other than setTimeout ?

[Chris Rhoden]

Is there a reason you can't use the $location service with html5 mode enabled?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--
chrisrhoden

[hyperN]

Yes, because I manage routes using server side code, and if I do that than I would have to rewrite my routing and use Angular's, so this is solution is more convenient for me (as I plan to use this on only one page on my website)

[Chris Rhoden]

I think I may be confused – when you say that you are using server-side routing, does that mean you want to trigger a new request to the server and re-render the page? If that's the case, you shouldn't be using pushState at all, but the standard $window.location APIs. pushState will not trigger a new request.

If you're doing something fancier, like fetching data from the server asynchronously and re-rendering it in the Angular app, it will be less work to do that within the Angular routing systems (either ngRoute or ui-router) which totally support you doing this with help from the server. You'd just need to set up  a route which matched all requests and then trigger the appropriate async request to the server.

[hyperN]

I'm doing the second thing :) 

"set up  a route which matched all requests" -> on my server side  or in Angular ? 

[Chris Rhoden]

The catch-all route should be in angular, and should parameterize some portion of it. That way, when the location is changed, it will trigger the refresh of that route.

At this point, answering these questions gets more complicated depending on what you've already done and how you did it. That said, it's pretty likely that you'll be able to reduce the code you have by leveraging ui-router with a single catch-all route and the function form of `templateUrl` so that it pulls the html fragment from a URL that is based on the url active in the browser.

As far as your original request, I believe that as long as you don't have a routing library installed (i.e. you're on 1.2+ and don't have ngRoute or ui-router included on the page) using $location shouldn't actually cause any problems.

[hyperN]

Thank you very much :)