javascript - Webpack:使用 ng-include 的 require

Question

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

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

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

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

如何实现这一目标？

Answer 1

另一种方法是将 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>