@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 andWhen
s 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:
- adds templateUrl and resolve values from
/long-form
$route to array of dependencies
- adds templateUrl and resolve values from
andWhen['/:step']
$route to array of dependencies
- resolve array of dependencies
- compile
long-form.html
and link to LongForm
scope
- 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.
- adds templateUrl and resolve values from
andWhen['/:step']
$route to array of dependencies
- resolve array of dependencies
- 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.