Question

我看过很多帖子建议使用带角度的每个功能的目录。今天我已经将RequireJS（AMD）添加到我正在研究的新角度应用程序中。我在script标签的末尾使用body标签，然后我做了一些AMD重组，一切都神奇地变得好了300％。

一切都很好，AMD样式require在使用JS文件时支持相对路径，但使用templateUrl时，它从根目录而不是在我所在的目录中启动.I我已经看过像阅读“currently executing script file”这样的解决方案，我怀疑这种方法对AMD有用。

有什么技巧我不知道要从某个地方传递路径吗？我不介意为每个文件做一些工作，但我真的不想在templateUrl: baseUrl + 'template.view1.html'处使用templateUrl之类的东西。

我正在使用ui-router，如果它很重要（第一天，yay）。

Answer 1

使用require.toUrl(...)

怎么样？

查看官方文档：http://requirejs.org/docs/api.html#modulenotes-urls

Answer 2

我正在使用类似的东西

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

以后

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

Answer 3

我有一个小项目，angular-require-lazy尝试混合RequireJS和Angular。在其中我写了templateCache AMD插件，工作为：

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

因此，加载了正确的模板（使用RequireJS＆＃39; s text!插件 - 所以它也可以与r.js编译）。您获得的对象（上例中的navbarTemplate参数）有2个属性，一个是实际加载的文本，另一个是URL，在该URL下，文本在Angular的templateCache中注册。然后您可以将其用作：

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
    ...
});

不幸的是，我还没有使用与ui-router兼容的angular-require-lazy，所以你不能按原样使用它。插件的代码（非常小）可能会让您对自己实现此功能有所了解：

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，你必须至少用当前的Angular模块替换它。）

AngularJS + RequireJS +面向功能的目录结构 - 如何在templateUrl中使用相对路径？

3 个答案: