Javascript 在另一个使用网页包中包含角度模板

我在使用angular和webpack时遇到问题。我的项目由多个带有控制器的视图组成

例如，我有一个视图

userSummary.tmpl.html

，它加载所有用户的列表。我想在另一个显示所有用户的

groupSummary.tmpl.html

中重用此模板

我不能使用ng include，因为我的所有视图都包含在bundle.js中，没有其他内容。我想使用WebPack将我的观点直接包含在另一个网页中

---

这可能吗？

当使用类似或的内容时，可以使用

ng include

。正如您所提到的，这将把所有内容打包到文件中

---

尽管您也可以将内容分离到单独的文件中，这些文件将克隆捆绑目录中的文件，并为您提供每个HTML文件的路径，并且在角度上的工作方式相同。

要启用此功能，您必须配置“relativeTo”参数，否则将在“/home/username/path/to/project/path/to/template/”（检查bundle.js您可能在项目中泄露了用户名）

var-ngTemplateLoader=(
“ngtemplate？relativeTo=”+path.resolve（uu dirname，”./src/”）+
“！html”
);
module.exports={
...
模块：{
装载机：[
{test:/\.html$/，loader:ngTemplateLoader}，
],
},
...
}

那么在代码中，副作用是否只需要：

//src/webapp/admin/js/foo.js
需要（'../templates/path/to/template.html'）；

然后可以加载html：

---

在Webpack.config文件中，您可以添加主html，如下所示

   plugins: [ 
    new HtmlWebpackPlugin({
    template: 'index.html'
    }),
    new ExtractTextPlugin('bundle.css')
    ], 

在package.json中包含html加载程序，在config块中使用下面的方法就足够了

$stateProvider.state('app', {
    url: '/app',
    template: require('html-loader!root/app/Common/templates/role.html'),
    controller: 'roleController'
})

因此，所有部分都将捆绑在bundle.js本身中。无需在webpack配置中添加加载程序，也无需为
网页3

  {
    test: /\.html$/,
    exclude: /node_modules/,
    use: [
      { loader: 'ngtemplate-loader?relativeTo=' + __dirname + '/app' },
      { loader: 'html-loader' }
    ]
  },

然后可以通过在组件js文件中使用require来导入html

require（'../../templates/path/to/template.html'）；

以及在您的组件html文件中

当您可以进行路由和嵌套视图时，为什么要使用webpack？请看这里，谢谢@Mikey。我使用ui路由器插件，但在我的情况下它似乎不起作用。我已经在我的状态下使用了一个模板，我无法在html.Odd中添加带有ui视图的视图。每次对我都有效。您想要的是嵌套视图还是不需要？Y你可以使用
ng include
当使用像
ngtemplate loader
或
ng cache loader
这样的东西时，我使用的是ngtemplate loader，但它在ng include上根本不会触发。你必须在角度分量之外使用它，否则它不会包含。这真的值得否决吗？有趣，我要试试。Thanks@DonovanCharpin如果这是可行的，你可以选择它作为批准的答案。如果它使用一个特定的加载器（看起来），最好给这个加载器一个链接（和一个NPM名称）…它是ngtemplate。webpack会自动附加“-loader”“获取NPM名称。请不要发布多个问题。发布一个好的答案，然后投票/标记以重复结束其他问题。如果问题不是重复的，请根据问题定制您的答案。