javascript Webpack：对 ng-include 使用 require
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33436729/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack: using require for ng-include
提问by Sebastian
I'm new to webpack and right now I'm using it for the first time in one of my angular projects.
我是 webpack 的新手，现在我第一次在我的一个 angular 项目中使用它。
I want to use the require function in my html file in order to require the template for an ng-include like so:
我想在我的 html 文件中使用 require 函数，以便像这样要求 ng-include 的模板：
<div ng-include="require(./my-template.html)"></div>
I know there are loaders like ng-cache and ngtemplate, but they do not work the way I need it. With them, I have to require the template in an js first and than use the template name in my html file.
我知道有像 ng-cache 和 ngtemplate 这样的加载器，但它们不能按我需要的方式工作。有了它们，我必须首先在 js 中要求模板，然后在我的 html 文件中使用模板名称。
How to accomplish this?
如何做到这一点？
采纳答案by shanhaichik
You can use webpack-required-loaderon npm.
你可以在 npm 上使用webpack-required-loader。
In your app js or module js add comment:
在您的应用程序 js 或模块 js 中添加注释：
//@require "./**/*.html"
And in your template you can use
在您的模板中，您可以使用
<div ng-include="'my-template.html'"></div>
Ngtemplate will works fine. Ng-cache works too.
Ngtemplate 可以正常工作。Ng-cache 也能工作。
Also note that there is no need for a relative path in the ng-includedirective because that is taken care of by adding the //@requirecommand at the head of your entry file.
另请注意，ng-include指令中不需要相对路径，因为这是通过//@require在入口文件的开头添加命令来处理的。
Lastly, note that you have to use double and single quotes to get ng-include to work. So you'd do "'template-name.html'", not "template-name.html", or 'template-name.html'.
最后，请注意您必须使用双引号和单引号才能使 ng-include 工作。所以你会做"'template-name.html'"，不"template-name.html"，或'template-name.html'。
回答by simon04
Another approach would be to transform my-template.htmlinto a angular component:
Assuming you use html-loaderto load your HTML files (loaders: {test: /\.html/, loader: 'html'}), define a component myTemplatein your module JavaScript file:
另一种方法是转换my-template.html为角度组件：假设您使用html-loader加载您的 HTML 文件 ( loaders: {test: /\.html/, loader: 'html'})，myTemplate在您的模块 JavaScript 文件中定义一个组件：
import myTemplate from './my-template.html';
angular.module(...)
.component('myTemplate', {template: myTemplate})
Afterwards use it:
之后使用它：
<my-template></my-template>
回答by shengbeiniao
You can use HTML loader and angular $templateCache service
你可以使用 HTML loader 和 angular $templateCache 服务
angular
.module('template',[])
.run(['$templateCache', function($templateCache) {
var url = 'views/common/navigation.html';
$templateCache.put(url, require(url));
}]);
webpack loader config:
webpack 加载器配置：
{
test: /\.html$/,
loader: 'html',
query: {
root:sourceRoot
}
}
回答by Thomas Grainger
I've already posted this on https://stackoverflow.com/a/34815472/833093but:
我已经在https://stackoverflow.com/a/34815472/833093上发布了这个但是：
To enable you must to configure the "relativeTo" parameter, otherwise your template partials get loaded at "/home/username/path/to/project/path/to/template/" (Check your bundle.js you're probably leaking your username in your projects)
要启用您必须配置“relativeTo”参数，否则您的模板部分会在“/home/username/path/to/project/path/to/template/”处加载（检查您的 bundle.js，您可能正在泄漏您的您项目中的用户名）
var ngTemplateLoader = (
'ngtemplate?relativeTo=' + path.resolve(__dirname, './src/') +
'!html'
);
module.exports = {
...
module: {
loaders: [
{test: /\.html$/, loader: ngTemplateLoader},
],
},
...
}
Then in your code, do a side-effect only require:
然后在你的代码中，做一个副作用只需要：
// src/webapp/admin/js/foo.js
require('../../templates/path/to/template.html');
Then you can load the html:
然后你可以加载html：
<div ng-include src="'/webapp/templates/path/to/template.html'"</div>
