Yet Another IE9 Compatibility Problem

[Yale Kaul]

I've been working on an AngularJS/Rails app that must support IE9. From what I've read, I should set html5Mode to true in my AngularJS config, which will use the HTML5 History API for browsers that support it, and fall back to hashbang URLs for older browsers. All of the Angular stuff in my app is rooted at /v2/challenges/.

In the fantastic ng-book, it says:

"The back-end server will have to support URL rewriting on the server side. To support HTML5 mode, the server will have to make sure to deliver the index.html page for all apps. That ensures that our Angular app will handle the route."

What does that mean specifically? 

If my AngularJS content is at /v2/challenges/new (which appears as /#!/v2/challenges/new in IE9),

...what does that mean for me in terms of the URL rewriting I need to do on the server side?

Thanks!

[Alesei N]

it means, all the routes that you have set up in your SPA, should have corresponding Rails routes. So when you are hitting that route directly in browser, your rails app can serve html that has references to your angular app javascript and styles.

In case of hash bang and ie9 it depends how far you want to go, your root route, should serve mark up that has references to javascript and styles, so once app loads it can react to /#!/v2/challenges/new. There are other things you can do, for example if some one comes from normal url from search, but user agent is ie9, you could redirect to root with hash bang equivalent of that route. 

[Yale Kaul]

Thanks so much for your reply, Alesei.

So if I'm understanding you correctly, the flow for an IE9 visitor is this:

1. User loads /v2/challenges/new, 

2. Angular rewrites to /#!/v2/challenges/new 

3. Browser ignores everything after #, and loads '/' 

4. Server serves up '/', which must have references to Angular scripts

--

5. This is the part I'm still not understanding. Once I get to the root route, the Angular router takes over? How does it differentiate between someone requesting /#!/v2/challenges/new  and someone requesting root route?

Thanks again!

[Alesei N]

I think this should make it bit more clear:

1) User enters site at /v2/challenges/new

   1.1) default: browser that supports html5 history would then serve index view from that route, index view has all the references to JS/CSS. Angular app loads, sees its at /v2/challenges/new and does what it needs to do for that route.

   1.2) user agent is ie9: you would have to redirect them to root of domain.com plus appending this route to it via hash bang domain.com/#/v2/challenges/new. So at the end you actually redirecting to domain.com/#/v2/challenges/new.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/0cFJSAi68xw/unsubscribe.
To unsubscribe from this group and all its topics, 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.

[Yale Kaul]

That mostly makes sense to me. 

The part I'm still confused about is 1.2. 

I'm able to make the server redirect to /#/v2/challenges/new for IE9, but how will Angular know to do the same thing at /#/v2/challenges/new and /v2/challenges/new (no hashbang)?

In other words, I load /v2/challenges/new in Chrome and serve the index route, which has all my Angular routes set up. One of those routes is:

$routeProvider

        .when('/v2/challenges/new', {

            templateUrl: '/assets/templates/new.html',

            controller: 'BuildController'

    

... so Angular correctly loads the correct controller and template.

But if I load /v2/challenges/new in IE9, and then I configure Rails to redirect to /#/v2/challenges/new, what should happen then? I realize that answer is probably fairly specific to my app, but maybe there's a  general answer.

Again, I really appreciate your help so far. This is super confusing to me.

(Sorry for the odd delay; had to step away from this problem for a few days)

[Alesei N]

correct me if I am wrong, if you load /v2/challenges/new in ie9, you get base route resolution in angular app right? instead of /v2/challenges/new you get default page loaded right?

[Yale Kaul]

That is correct.

[Alesei N]

so to fix that, you need to convert this route for ie9 into domain.com/#!/v2/challenges/new from domain.com/v2/challenges/new.

you could also may be look into polyfil https://github.com/browserstate/history.js/ might be something that you can work around.

[Yale Kaul]

re: history.js... Yes, I was briefly considering that, but I imagined that I would have to monkeypatch Angular in order to make it work

[Alesei N]

either way, you will need to accommodate that hashbang conversion for ie9 if no polyfil is put in place for history. So I would just redirect to root path and append hashbang version of url.

----------------------------

 
Alesei Narkevitch / ales...@bzik.net / 224.392.2592

 

linkedin.com/in/aleseinarkevitch

github.com/gnrlbzik

twitter.com/gnrlbzik

stackoverflow.com/users/201244/gnrlbzik

forrst.me/gnrlbzik/posts

coderwall.com/gnrlbzik

coderbits.com/gnrlbzik