使用 webpack 在另一个模板中包含一个 angular 模板

Question

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

例如，我有一个加载所有用户列表的视图 userSummary.tmpl.html。我想在另一个显示所有用户的 groupSummary.tmpl.html 中重复使用此模板。

我不能使用 ng-include，因为我所有的视图都包含在 bundle.js 中，没有别的。我想使用 WebPack 将我的视图直接包含在另一个中。

这可能吗？

Answer 1

您可以在使用 ngtemplate-loader or ng-cache-loader 时使用 ng-include。如您所述，这会将其全部捆绑到文件中。

尽管您也可以使用 file-loader 将内容分离到单独的文件中，这将在捆绑目录中克隆文件并为您提供每个 HTML 文件的路径，并且在 angular.

Answer 2

要启用，您必须配置 "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},
        ],
    },
    ...
}

然后在你的代码中，做一个side-effect只需要：

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

然后你可以载入html:

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

Answer 3

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

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

在 package.json 中包含 html-loader 并在配置块中单独使用以下方法就足够了。

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

所以所有的部分都将被捆绑在 bundle.js itself.No 需要在 webpack-config 中添加加载器

Answer 4

更新配置 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 文件中

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

使用 webpack 在另一个模板中包含一个 angular 模板

Include an angular template in another using webpack

javascript

angularjs

webpack