Question

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

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

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

这可能吗？

Answer 1

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

然后在你的代码中，做副作用只需要：

// 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 2

使用ngtemplate-loader或ng-cache-loader之类的内容时，您可以使用componentWillMount。如您所述，这会将所有内容捆绑到文件中。

虽然您也可以使用file-loader将文件分隔成单独的文件，这些文件将克隆文件包目录中的文件并为您提供每个HTML文件的路径，并且在角度方面的工作方式相同。

Answer 3

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

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

在package.json中包含html-loader并在config block中单独使用下面的方法就足够了。

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

所以所有部分都将捆绑在bundle.js本身中。不需要在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在另一个中包含角度模板

4 个答案: