angularjs - 加载相对templateUrl

Question

我一直在努力寻找创建模块化、可扩展的 Angular 应用程序的最佳方法。我真的很喜欢像 angular-boilerplate 这样的项目结构, angular-app ，其中所有相关文件按部分和指令的功能分组在一起。

project
|-- partial
|   |-- partial.js
|   |-- partial.html
|   |-- partial.css
|   |-- partial.spec.js

但是，在所有这些示例中，模板 URL 都是相对于基本 url 加载的，而不是相对于当前文件加载的:

angular.module('account', [])
.config(function($stateProvider) {
  $stateProvider.state('account', {
    url: '/account',
    templateUrl: 'main/account/account.tpl.html', // this is not very modular
    controller: 'AccountCtrl',
  });
})

这不是很模块化，并且在大型项目中可能变得难以维护。每次移动这些模块时，我都需要记住更改 templateUrl 路径。如果有某种方法可以加载相对于当前文件的模板，例如:

templateUrl: './account.tpl.html'

有什么办法可以用 Angular 来做这样的事情吗？

Answer 1

现在最好的方法是使用 browserify、webpack 或 typescript 等模块加载器。还有很多其他的。由于 require 可以根据文件的相对位置进行生成，并且能够通过转换或像partialify这样的加载器导入模板的额外好处是，您甚至不必再使用模板 url。只需通过要求内联模板即可。

我的旧答案仍然可以在下面找到:

我写了一篇关于这个主题的文章，并在我们本地的 Angular 聚会上发表了演讲。我们大多数人现在都在生产中使用它。

只要你的文件结构在你的模块中得到有效的表示，就非常简单了。以下是该解决方案的快速预览。完整文章链接如下。

var module = angular.module('myApp.things', []);

var all = angular.module('myApp.things.all', [
    'myApp.things',
    'things.someThing',
    'things.someOtherThing',
    'things.someOtherOtherThing',
]);

module.paths = {
    root: '/path/to/this/thing/',
    partials: '/path/to/this/thing/partials/',
    sub: '/path/to/this/thing/sub/',
};

module.constant('THINGS_ROOT', module.paths.root);
module.constant('THINGS_PARTIALS', module.paths.partials);
module.constant('THINGS_SUB', module.paths.sub);

module.config(function(stateHelperProvider, THINGS_PARTIALS) {

    stateHelperProvider.setNestedState({
        name: 'things',
        url: '/things',
        templateUrl: THINGS_PARTIALS + 'things.html',
    });
});

然后任何子模块或“相对”模块如下所示:

var module = angular.module('things.someThing', ['myApp.things']);
var parent = angular.module('myApp.things');

module.paths = {
    root: parent.paths.sub + '/someThing/',
    sub: parent.paths.sub + '/someThing/sub/',
    partials: parent.paths.sub + '/someThing/module/partials/',
};

module.constant('SOMETHING_ROOT', module.paths.root);
module.constant('SOMETHING_PARTIALS', module.paths.partials);
module.constant('SOMETHING_SUB', module.paths.sub);

module.config(function(stateHelperProvider, SOMETHING_PARTIALS) {

    stateHelperProvider.setNestedState({
        name: 'things.someThing',
        url: "/someThing",
        templateUrl: SOMETHING_PARTIALS + 'someThing.html',
    });
});

希望这有帮助!

全文:Relative AngularJS Modules

干杯!