Webpack:对 ng-include 使用 require [英] Webpack: using require for ng-include

问题描述

我是 webpack 的新手，现在我第一次在我的一个 angular 项目中使用它.

I'm new to webpack and right now I'm using it for the first time in one of my angular projects.

我想在我的 html 文件中使用 require 函数，以便像这样要求 ng-include 的模板:

I want to use the require function in my html file in order to require the template for an ng-include like so:

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

我知道有像 ng-cache 和 ngtemplate 这样的加载器，但它们不能按照我需要的方式工作.使用它们，我必须首先在 js 中要求模板，然后在我的 html 文件中使用模板名称.

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.

如何做到这一点?

推荐答案

你可以使用 webpack-required-loader 在 npm 上.

You can use webpack-required-loader on npm.

在您的应用 js 或模块 js 中添加注释:

In your app js or module js add comment:

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

在你的模板中你可以使用

And in your template you can use

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

Ngtemplate 可以正常工作.Ng-cache 也能工作.

Ngtemplate will works fine. Ng-cache works too.

另请注意，ng-include 指令中不需要相对路径，因为这是通过在入口文件的头.

Also note that there is no need for a relative path in the ng-include directive because that is taken care of by adding the //@require command at the head of your entry file.

最后，请注意，您必须使用双引号和单引号才能使 ng-include 工作.所以你会做 "'template-name.html'"，而不是 "template-name.html" 或 'template-name.html'.

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'.

如何配置加载器

这篇关于Webpack:对 ng-include 使用 require的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！