Pseudo Code

[stephenplusplus]

@ProLoser: It's interesting reading your solution, as I was working on my own, which is quite similar. I didn't want to pollute #1 with my code ideas below, so I thought a new topic to discuss the interface might be helpful. Personally, once I know how I want to start using something, it makes it a lot easier to understand how to go about implementing it.

So, here's what my idea looked like:

.when('/long-form', {
  templateUrl: 'views/long-form.html',
  controller: 'LongForm',
  resolve: 'getSomeData',
  andWhen: {
    '/:step': {
      templateUrl: 'views/long-form/step.html',
      controller: 'LongFormStep',
      resolve: 'getSomeMoreData'
    }
  }
})

These andWhens can be nested deeper, following the definition of the route object.

/long-form

behaves as normal

/long-form/first-step

accessed directly from URL entry:

1. adds templateUrl and resolve values from /long-form $route to array of dependencies
2. adds templateUrl and resolve values from andWhen['/:step'] $route to array of dependencies
3. resolve array of dependencies
4. compile long-form.html and link to LongForm scope
5. compile long-form/step.html and link to LongFormStep scope

accessed coming from /long-form or another /long-form/sub-page:

*/long-form.html would have already been resolved, compiled, and linked to the LongForm controller.

1. adds templateUrl and resolve values from andWhen['/:step'] $route to array of dependencies
2. resolve array of dependencies
3. compile long-form/step.html and link to LongFormStep scope

Here's what the template HTML would look like, adding a new route directive to embed the views.

long-form.html

<h1>Awesome Form!</h1>
<div>
    <p>Thanks, {{name}} for filling out our form! You're just swell.</p>
    <h2>Here's what you've filled out so far!</h2>
    <ul>
        <li ng-repeat="field in data">{{field}}</li>
    </ul>
    <form>
        <route root>
            <p>Since this is your first time here, we need some basic information.</p>
            First Name: <input ng-model="data.firstName">
            Last Name: <input ng-model="data.lastName">
        </route>
        <route view="step" />
    </form>
    <marquee>This should never skip a beat!</marquee>
</div>

When long-form.html is compiled, only the matching route directive would be included. So, when a user is loading /long-form/first-step, long-form.html would compile the <route view="step" />. The value of the view attribute is connected to the andWhen key. That way, when <route view="step" /> is compiled, it knows where to grab the template from. Then it's business as usual for the injected template and controller.

I wish I had time to contribute more on this. My 11 week old daughter thinks I love JavaScript more than her, so my hands are tied. There are obviously a lot of changes that would need to be made for an idea like this to work. Is this within the scope of what this project and its team are attempting to accomplish?

Thanks everyone for taking on this issue! I look forward to following the progress and hopefully spending time helping out.

[vincentdieltiens]

I @stephenplusplus ! Thanks for your idea :)

This is more or less that the idea that immerge from #1. But with a marquee tag :D

[stephenplusplus]

Haha, well, nobody really mentioned what the template would look like (at least that I found), which is a very important piece of this puzzle.

[vincentdieltiens]

Well, in my solution, it's pretty the same as yours. replace your route directive by a multi-view directive like :
<div multi-view="viewName"></div> ;-)