Best deep linking fix?

[Lee Whitney]

I've come to the conclusion that deep linking using only Angular, or any client solution, is weak sauce and something I don't want to inflict on users.

This is because of the inability use deep links without hashbangs.  For example links from other sites won't work, and the user can't bookmark a deep link.  Not a knock against Angular, I don't think any framework can fix this.  Also if you love hashbangs being visible to the user even with HTML5 browsers, then this is not really an issue.

So it seems a server solution is required.

Any ideas on the simplest solution to pair well with Angular?

[Peter Bacon Darwin]

Not sure what browser you are using but # fragments are totally bookmarkable.  Can you show an actual example of these issues?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[Lee Whitney]

Hi Peter, yes it works with hashes, but only with hashes.

I think users having to see meaningless (to them) symbols in URLs is a step backwards, and cleaner URLs have many benefits besides looking nicer.

So for me, the ideal is to have an angular app with a deep link like "BookStore.com/Japan/Ninjas".  No hash required for other sites to link to the page, and book marking still works.

[Peter Bacon Darwin]

Did you try turning on html5Mode?  The only thing you need to do server side is to make sure that any of the potential urls, if the user browses to them directly, returns your app.

[Lee Whitney]

Oh yes HTML5 is on, it's just the server piece I need and was wondering what other people are doing.

Because of backend services like Parse.com I haven't had to setup a web server for my app.

Except for this issue, I think you could actually develop a site without a web server, just using anyplace that hosts files for the html and js.

[coogan...@gmail.com]

I'm struggling with this issue myself and it seems like you will definitely need to write some server-side code to pass through the clean routes you'd like to be able to access directly. 

I personally don't really see the value of having a clean HTML5 url (w/o a #) if the link 404s when you click it...

The official angularjs.org site uses a (fairly simple) node webserver to handle deep url linking. See the full code on GitHub.   

As I understand it, a regular expression checks for routes that need to be handled by the main Angular app (i.e. guide, api, tutorial but not css, image, or other static files). Those routes are rewritten in node to /index.html which serves the main angular app.

What's trickier is how Angular finds its way to the full route you intended (for example, http://docs.angularjs.org/guide/bootstrap routes correctly to the sub-partial). As I understand it, Node preserves the requested url and then Angular checks it on load and serves the correct view. Line 352 in http://docs.angularjs.org/js/docs.js seems to do this.

You can see this in action by going to http://docs.angularjs.org/guide/TEST_URL, the page still renders and the breadcrum is even updated, despite no partial being rendered.

In summary, get your server to identify all your routes / deep-links (hopefully using a regex) and forward them cleanly (preserving the URL) to index.html which can read the url and render the correct partial.