Requirejs: Loading Modules Including Templates and CSS

RequireJS: Loading modules including templates and CSS

You can specify the template as a dependency using the text! module like you have shown. I do this with Mustache Templates.

However Require.js does not explicitly support css files.

Here is the official explanation, it's explained pretty well:
http://requirejs.org/docs/faq-advanced.html#css

Edit: Feb 2012.

Templates such as handlebars can also be precompiled and included just like any other JS module
http://handlebarsjs.com/precompilation.html

Edit: August 2015

If you're after this sort of modularization you should look into webpack and specifically css-loader. I'm using it to pair .css files with .jsx files as a unified "module" and extract the relevant CSS into a single stylesheet at build time.

Modulizing CSS Stylesheets with RequireJS

Most loaders out there have CSS plugins that handle the insertion for you:

RequireJS CSS plugin
https://github.com/tyt2y3/requirejs-css-plugin

CurlJS CSS plugin is bundled with the main distribution:
https://github.com/cujojs/curl/tree/master/dist

Loading templates with backbone js

I would recommend using require.js with text plugin. Mixing html templates as strings in javascript variable is bad idea, as well as using something like <script type="text/template"></script>.

Here is one very good series on backbone.js which covers template loading and project build as well: http://dailyjs.com/2012/11/29/backbone-tutorial-1/. Github project is also provided there.

Loading templates with backbone js

I would recommend using require.js with text plugin. Mixing html templates as strings in javascript variable is bad idea, as well as using something like <script type="text/template"></script>.

Here is one very good series on backbone.js which covers template loading and project build as well: http://dailyjs.com/2012/11/29/backbone-tutorial-1/. Github project is also provided there.

Concatenate with requirejs and exclude a single file?

You should exclude your file in the same way you included it. Try this way:

exclude: ['lib/text!config.json']

But I just stopped using this approach, because it requires existence of config.json file in build phase. Instead I'm using nested require calls (You may use require inside your defined modules to load files in runtime). Unlike define, nested require may not be included in build process (and by default they are not) and validation phase will be fine.

Be advised, this approach has at least one disadvantage:

Nested require calls are also asynchronous. But in my case that is not a problem.

Package *.html templates in Require.js Optimizer?

You have to use the templates through the text! plugin of RequireJS. E.g. for a directive:

define(["text!app/templates/a.html", "myAngularModule"],
function(template, myAngularModule) {
    myAngularModule.directive("theDirective", function() {
        return {
            template: template, // NOTE HERE
            ...
        };
    });
});

Or a route:

define(["text!app/templates/a.html", "myAngularModule"],
function(template_a, myAngularModule) {
    myAngularModule.config(function($routeProvider) {
        $routeProvider.when("some/path", {
            template: template_a, // NOTE HERE
            ...
        });
        ...
    });
});

Alternative, using templateUrl (just in case it is needed):

define(["text!app/templates/a.html", "myAngularModule"],
function(template_a, myAngularModule) {
    myAngularModule.config(function($routeProvider) {
        $routeProvider.when("some/path", {
            templateUrl: "app/templates/a.html", // can be any value actually
            ...
        });
        ...
    });

    myAngularModule.run(function($templateCache) {
        $templateCache.put(
            "app/templates/a.html", // NAME MUST MATCH NAME ABOVE
            template_a
        );
    });
});

RequireJS text plugin: cannot load HTML from other domain

I've found the actual problem! This part:

config: {
    text: {                
        useXhr: function (url, protocol, hostname, port) {
            return true;
        }
    }
},

should really do it. However, I found out that it wasn't called at all. Instead, the default implementation was called. And this returned false.

To make it work it is necessary to have the right keys in the config section since the mapping doesn't seem to be evaluated for it.

So this is the right configuration that fetches HTML from the other domain:

requirejs.config({
    baseUrl: "http://some.other.domain/",
    paths: {
        jquery:       'ext/jquery/jquery.min',
        htmlTemplate: 'test.html', //                     // ---> removed the '?'
        siteCss:      '../css/site'
    },
    shim: {
        htmlTemplate: [
            'css!siteCss'
        ]
    },

    config: {
        'ext/require/text': {                              // ---> full path is required!!!               
            useXhr: function (url, protocol, hostname, port) {
                return true;
            }
        }
    },
    map: {
        '*': {
            text: 'ext/require/text',
            css:  'ext/require/css.min'
        }
    }
});

require(['text!htmlTemplate'], function (htmlTemplate) {
    console.log(htmlTemplate);   // now prints HTML into the console!!!
});

Hallelujah!

Found the right hint here. Another option might be to set the path for text. At least the configuration must be set somehow so that the function gets called...

---

Related Topics