Clever Geek Handbook

AngularJS + RequireJS + Object Oriented Framework - how to use relative paths in templateUrl?

I've seen a bunch of posts recommending using a directory for each function using angular. Today I added RequireJS (AMD) to a new angular app I am working on. I used tags script

at the end of the tag body

, then I did some AMD restructuring and all the magic got 300% better.

Everything is fine, AMD style require

supported relative paths when working with JS files, but with templateUrl

it starts from the root, not from the directory I am in. I've seen solutions for example read the currently executable script , I doubt this approach will work with AMD.

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

everywhere I use templateUrl

.

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

+3


source to share


3 answers


How about using require.toUrl(...)



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

+1


source


I am using something like this

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


and later

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


source


I have a small angular-require-lazy project that is trying to mix RequireJS and Angular. In it I wrote an templateCache

AMD plugin that works like:

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

So the correct template is loaded (using the RequireJS text!

plugin under the hoods), so it compiles along with r.js as well). The object you receive (the argument navbarTemplate

in the above example) has 2 properties, one is the actual loaded text and one URL under which the text is registered with Angular templateCache

. Then you can use it like:

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 have not yet gotten to use the ui-router compatible angular -require-lazy, so you cannot use it as is. The plugin code (really small) can give you some insight into 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
    };
});

( currentModule

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

0


source






More articles:


All Articles