How to use a strong URL-aware navigation/routing pattern in Lightning?

Question

I've asked a similar question already for Lightning Communities. This question is about the same requirements, but in general.

There are many different containers (or environments) for lightning components like the S1 Mobile App (S1), Lightning Experience (LE), Standalone Lightning Apps, etc.)

As far as I understood, Lightning as a framework is primarily designed for SPAs (single page applications), where you technically reside on a single URL while all the navigation take place by loading new pages (or views or components or partials) into the staging page.

Now S1 and LE the navigation in the URL happens after the # - there will be paths composed like /one/one.app#/sObject/Account/home

Looking at the URL, it reminds me much of AngularJS, where routing is one of the most important basic concepts. In general without taking care of the routing, SPAs tend to loose some very powerful features compared to classic multi page apps:

• working Browser forward/backward navigation
• usable Browser history
• ability to deep-link record-detail-views
• ability to open links in new tabs/windows (right-click > open in new tab/window | middle-click > open in tab)

So S1 and LE are taking care of this and most things just do work. A flaw I noticed, is that the title tag isn't set, so the history consist only of many entries named just "Lightning Experience" and all deep links you save are labeled all the same, but this could be easily fixed by Salesforce.

Now if you are not in S1/LE, the routing feature seems not to be present. I'm missing it in:

• Standalone Lightning Apps
• Communities

The following I would like to find out:

• can we use the routing feature right now? If yes:
  • where is the routing and navigation mechanism documented?
  • How can I use this routing mechanism in general for my own Standalone Apps?
  • In S1/LE I would like to know, how I can use it for my own navigation to sub-components e.g. sub-navigations between custom list- and detail-views?
• If no:
  • has anybody found a workaround, e.g. using AgularJS or something else?

Answer 1

What I found out so far in calls with Salesforce is that the feature from S1/LE isn't exposed for developers yet. I couldn't find out if it's on the roadmap or might have an ETA.

It would be very helpful, if we could find out more on the situation. In my opinion this is a crucial feature for building powerful desktop apps, where the "mobile first" paradigm isn't the only thing which counts... working with multiple monitors, multiple side by side windows, sending deeplinks to collaborators, etc. are basic habits of almost all of my clients.

Looking at some of Salesforces new UIs like the new "Help & Training" (which is actually written in AngularJS, as @Christian Carter commented), I have concerns, that in this respect we might see more and more of sub-optimal UIs in the future.

Answer 2

It sounds like what you are looking for is URL-Centric Navigation.

There is a system event called aura:locationChange that you can handle:

<!-- In Aura Application -->
<aura:handler event="aura:locationChange" action="c.handleLocationChange"/>

Then from the event, you can get the fragment after the # from the token parameter.

// In Controller
handleLocationChange : function (component, event, helper) {
    console.log(event.getParam("token"));
}