Recommended UI Router Practices

[MatthewVita]

Is there a best practice with Rupert + Angular UI Router in terms of Jade templates or should one specify the resulting .html template directories in the static config object?

Thanks

[DavidSouther]

@gah-boh and I are working on a best practices with UI routing in general over at https://github.com/gah-boh/song-flux and related, but my usually approach is for a route to have a template: '<my-directive />', then myDirective references whatever templateUrl and controller are appropriate.

[MatthewVita]

What about the cases where a more "general" template is preferred over a directive? Is that not supported?

[gah-boh]

You can definitely have a template file there that composes all your components. It usually has the same name as my module. For example: users/ |_users.html

[MatthewVita]

@gah-boh, I'm talking about with Rupert, not with the song-flux project

[gah-boh]

Oops! My bad, I didn't look at what repo I was in.

[DavidSouther]

I think @gah-boh was a bit off the cuff, but still generally correct. For instance, if I had a User Profile page, which needed the <user-detail> and the <user-contributions> components, I'd have a route with

src/client/users/
    template.html
    route.js
    detail/
        detail-template.html
        detail-directive.js # (includes controller)
    contributions/
        contributions-template.html
        contributions-directive.js

Then in route.js

`templateUrl: 'users'`

and users/template.html would be

<div class="userpage">
    <user-detail />
    <user-contributions />
</div>

[MatthewVita]

@gah-boh: It's all good. C:

@DavidSouther: Thanks for the example. You've answered my question in terms of not needing to configure a static asset object to point at resulting html template(s). In regards to Rupert best practices, it seems like writing html for templates (as opposed to Jade) is mandatory if one wishes to reference it in UI Router (or use partials in general)... would using Grunt to compile Jade to actual HTML files within the relevant /client directory be a good idea to consider?

Not trying to enforce Jade > HTML dogma, but rather am speaking on consistency (picking one and sticking with it) really.

[DavidSouther]

There is no difference in how Rupert pre-populates the Angular $templateCache between html, jade, or a hypothetical Markdown preprocessor. Any templateUrl that uses $templateCache will work with any markup tool in Rupert's stassets configuration.

On Tue Dec 23 2014 at 2:26:46 PM Matthew Vita notifications@github.com wrote:

@gah-boh https://github.com/gah-boh: It's all good. C:

@DavidSouther https://github.com/DavidSouther: Thanks for the example. You've answered my question in terms of not needing to configure a static asset object to point at resulting html template(s). In regards to Rupert best practices, it seems like writing html for templates (as opposed to Jade) is mandatory if one wishes to reference it in UI Router (or use partials in general)... would using Grunt to compile Jade to actual HTML files within the relevant /client directory be a good idea to consider?

Not trying to enforce Jade > HTML dogma, but rather am speaking on consistency (picking one and sticking with it) really.

— Reply to this email directly or view it on GitHub https://github.com/RupertJS/rupert/issues/12#issuecomment-67988752.

[MatthewVita]

I understand that Angular only cares about caching the specified template html and does not care about how the template is rendered (from Jade, Haml, etc). What I'm asking is since the Jade in Rupert isn't really placed into a resulting .html file, how can one reference a template file (from Angular UI Router, for example) that is written in Jade?

For example:

    detail/
        detail-template.html
        detail-directive.js # (includes controller)

to:

    detail/
        detail-template.jade
        detail-directive.js # (includes controller)

Thanks :smiley:

[DavidSouther]

In Rupert, you can only reference the template via the URL in the $templateCache. I think I'll write a cookbook or other wiki entry on this tomorrow.

On Wed Dec 24 2014 at 11:11:16 PM Matthew Vita notifications@github.com wrote:

I understand that Angular only cares about caching the specified template html and does not care about how the template is rendered (from Jade, Haml, etc). What I'm asking is since the Jade in Rupert isn't really placed into a resulting .html file, how can one reference a template file that is written in Jade?

For example:

detail/
    detail-template.html
    detail-directive.js # (includes controller)

to:

detail/
    detail-template.jade
    detail-directive.js # (includes controller)

Thanks [image: :smiley:]

— Reply to this email directly or view it on GitHub https://github.com/RupertJS/rupert/issues/12#issuecomment-68086110.

[MatthewVita]

Okay, that answers my question (sorry if I wasn't very clear on my question from the start).

Angular's $CacheFactoryProvider has setters/getters for the template cache (key-value) so it's probably an easy cookbook entry to write up. Would using a default static assets directory for Jade's resulting html files be a good idea or would you consider that messy?

[DavidSouther]

In the stassets approach, that would be very messy - stassets aims to be in-memory only.

On Wed Dec 24 2014 at 11:20:04 PM Matthew Vita notifications@github.com wrote:

Okay, that answers my question (sorry if I wasn't very clear on my question from the start).

Angular's $CacheFactoryProvider has setters/getters for the template cache (key-value) so it's probably an easy cookbook entry to write up. Would using a default static assets directory for Jade's resulting html files be a good idea or would you consider that messy?

— Reply to this email directly or view it on GitHub https://github.com/RupertJS/rupert/issues/12#issuecomment-68086307.

[MatthewVita]

I figured that would be your response*, but felt my question was still worth considering. A cookbook entry for accessing template cache should do the trick... let me know if you want me to write/review/add/etc to the entry.

*a very reasonable one, that is

[DavidSouther]

Sure, take a shot at it. The module name and cache url are generated in https://github.com/RupertJS/stassets/blob/master/lib/Watchers/Template.coffee#L17-L29

On Wed Dec 24 2014 at 11:29:14 PM Matthew Vita notifications@github.com wrote:

Closed #12 https://github.com/RupertJS/rupert/issues/12.

— Reply to this email directly or view it on GitHub https://github.com/RupertJS/rupert/issues/12#event-211851589.

[MatthewVita]

Okay, great! I'll work on this at some point today.