文章/答案/技术大牛

发布

社区首页 >问答首页 >Webpack:对ng的使用要求-包括

问Webpack:对ng的使用要求-包括
EN

Stack Overflow用户

提问于 2015-10-30 13:06:06

回答 4查看 16.5K关注 0票数 29

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

我希望在我的html文件中使用require函数，以便要求ng的模板-包括如下所示：

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

我知道有像ng缓存和ngtemplate这样的加载程序，但是它们的工作方式并不像我所需要的那样。对于它们，我必须首先在js中要求模板，而不是在我的html文件中使用模板名。

如何做到这一点？

angularjs

webpack

angularjs-ng-include

javascript

回答 4

Stack Overflow用户

回答已采纳

发布于 2015-12-26 16:54:17

您可以在npm上使用webpack-要求装载机。

在应用程序js或模块js中添加注释：

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

在模板中，您可以使用

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

恩格模板会很好的。吴-缓存也能工作。

还要注意，在ng-include指令中不需要一个相对路径，因为这是通过在条目文件的开头添加//@require命令来解决的。

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

配置加载器

票数 16

Stack Overflow用户

发布于 2016-12-13 11:15:08

另一种方法是将my-template.html转换为角分量：假设使用html加载程序加载HTML文件(loaders: {test: /\.html/, loader: 'html'})，则在模块JavaScript文件中定义组件myTemplate：

import myTemplate from './my-template.html';
angular.module(...)
  .component('myTemplate', {template: myTemplate})

之后使用它：

<my-template></my-template>

票数 26

Stack Overflow用户

发布于 2016-03-15 08:47:50

您可以使用HTML加载程序和角$templateCache服务。

angular
    .module('template',[])
    .run(['$templateCache', function($templateCache) {
        var url = 'views/common/navigation.html';
        $templateCache.put(url, require(url));
    }]);

webpack加载程序配置：

{
    test: /\.html$/,
    loader: 'html',
    query: {
        root:sourceRoot
    }
}

票数 22

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33436729

复制

相似问题

问Webpack:对ng的使用要求-包括
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Webpack:对ng的使用要求-包括EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Webpack:对ng的使用要求-包括
EN