AngularJS + RequireJS + Feature oriented directory structure - how to use relative paths in templateUrl?

Question

I've seen a bunch of posts recommending using a directory per feature with angular. Today I've added RequireJS (AMD) to a new angular application I'm working on. I was using script tags at the end of the body tag, then I did some AMD restructuring and everything magically became 300% better.

It was all going great, the AMD style require supported relative paths when working with JS files, but with templateUrl, it starts at the root instead of in the directory I'm in. I've seen solutions like reading the "currently executing script file", I doubt that approach would work with AMD.

Is there a trick I don't know about to pass the path from somewhere? I don't mind doing some work per file, but I really don't want to do something like templateUrl: baseUrl + 'template.view1.html' everywhere I use templateUrl.

I'm using ui-router, if it matters (first day, yay).

Answer 1

What about using require.toUrl(...)

Take a look to the official docs: http://requirejs.org/docs/api.html#modulenotes-urls

Answer 2

I am using something like this

angular.module('...', ['...'])
    .constant('basePath', 'app/path/to/something/')

and later

templateUrl: basePath + 'morePath/myFile.html',

Answer 3

I have a little project, angular-require-lazy trying to mix RequireJS and Angular. In it I have written the templateCache AMD plugin, working as:

require(['templateCache!./navbar.html',...], function(navbarTemplate, ...) {...});

So, the proper template is loaded (using RequireJS's text! plugin under the hoods - so it is compilable with r.js too). The object you get (the navbarTemplate argument in the example above) has 2 properties, one is the actual loaded text and one the URL, under which the text is registered with Angular's templateCache. You can then use it as:

require(['templateCache!./navbar.html',...], function(navbarTemplate, ...) {
    ...
    // will give you the correct URL, with `./` expanded properly
    // the text is already registered with Angular
    templateUrl: navbarTemplate.path
    ...
});

Unfortunately, I haven't gotten into making angular-require-lazy compatible with ui-router yet, so you cannot use it as is. The code of the plugin (really small) might give you some idea for your own implementation of this feature:

define(["module", "./currentModule"], function(module, currentModule) {
    "use strict";

    /** RequireJS module loader entry point. */
    function load(name, parentRequire, onload, config) {
        parentRequire(["text!" + name], function(t) {
            if( !config || !config.isBuild ) {
                currentModule.run(["$templateCache", function($templateCache) {
                    $templateCache.put(name, t);
                }]);
            }
            onload({
                text: t,
                path: name
            });
        });
    }

    return {
        load: load
    };
});

(The currentModule is angular-require-lazy - specific, you will have to replace at least that with the current Angular module.)