Question

我是webpack的新手，现在我第一次在我的角色项目中使用它。

我想在我的html文件中使用require函数，以便要求模板用于ng-include，如下所示：

<div ng-include="require(./my-template.html)"></div>

我知道有像ng-cache和ngtemplate这样的加载器，但它们并不像我需要的那样工作。有了它们，我必须首先在js中使用模板，而不是在我的html文件中使用模板名称。

如何做到这一点？

Answer 1

您可以使用HTML加载器和angular $ templateCache服务

angular
    .module('template',[])
    .run(['$templateCache', function($templateCache) {
        var url = 'views/common/navigation.html';
        $templateCache.put(url, require(url));
    }]);

webpack loader config：

{
    test: /\.html$/,
    loader: 'html',
    query: {
        root:sourceRoot
    }
}

Answer 2

另一种方法是将my-template.html转换为angular component：假设您使用html-loader加载HTML文件（loaders: {test: /\.html/, loader: 'html'}），请在模块JavaScript文件中定义组件myTemplate：

import myTemplate from './my-template.html';
angular.module(...)
  .component('myTemplate', {template: myTemplate})

之后使用它：

<my-template></my-template>

Answer 3

您可以在npm使用webpack-required-loader。

在你的应用程序js或模块js中添加评论：

//@require "./**/*.html"

在您的模板中，您可以使用

<div ng-include="'my-template.html'"></div>

Ngtemplate将正常工作。 Ng-cache也可以。

另请注意，ng-include指令中不需要相对路径，因为通过在条目文件的头部添加//@require命令可以解决这个问题。

最后，请注意，您必须使用双引号和单引号才能使ng-include工作。因此，您需要"'template-name.html'"，而不是"template-name.html"或'template-name.html'。

How config loaders

Answer 4

我已在https://stackoverflow.com/a/34815472/833093上发布此内容，但是：

要启用，您必须配置“relativeTo”参数，否则您的模板部分将被加载到“/ home / username / path / to / project / path / to / template /”（检查您的bundle.js你是可能会在您的项目中泄露您的用户名）

// src/webapp/admin/js/foo.js
require('../../templates/path/to/template.html');

然后在你的代码中，做副作用只需要：

<div ng-include src="'/webapp/templates/path/to/template.html'"</div>

然后你可以加载html：

gulp

Webpack：使用require for ng-include

4 个答案: