Question

我想打包并发送包含一堆指令和html模板的角度模块。

我正在尝试将我的指令的所有html模板捆绑到一个html文件中，并使用ng-include包含该html文件。然后模块中的各种指令使用模板。

所以3个组成部分是：

一些标准指令

function Directive1($compile, $rootScope) {
    return {
        restrict: "E",
        scope: {
            options: "="
        },
        templateUrl: "directiveTemplate1.html",
        link: function (scope, element, attrs) {}
    }
}

function Directive2($compile, $rootScope) {
    return {
        restrict: "E",
        scope: {
            options: "="
        },
        templateUrl: "directiveTemplate2.html",
        link: function (scope, element, attrs) {}
    }
}

在/path/to/template.html

中包含我的模板的html文件

<script type="text/ng-template" id="directiveTemplate1.html">
    <div> Template ONE </div>
</script>


<script type="text/ng-template" id="directiveTemplate2.html">
    <div> Template TWO </div>
</script>

最后将html页面连接在一起

<html>
    <body>
    <directive1/>

     <directive2/>
    </body>

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

是否可以这样做？

我想这样做，所以我可以将角度模块发送给第三方，他们只需要为模块包含一个缩小的js文件和一个包含所有部分视图的单个html文件。我不能在指令中内联我的模板html，因为部分非常大。

我认为angular会在页面加载时包含并解析templates.html文件，并将模板插入到templateCache中供以后的指令使用 - 当指令的templateUrl异步解析时。

我试过这个，看起来指令找不到模板。

有什么想法吗？

Answer 1

更好的选择是将HTML模板打包成JS文件本身，因此您的模块附带HTML已经可用的模板，不需要下载任何内容。

这个想法是，Angular检查$templateCache中模板的存在（通过路径），如果模板在那里（已经下载或手动放置），那么它只是立即返回它的内容。你需要类似的行为。顺便说一句，script指令（与type="text/ng-template"）的作用相同 - 只需将其innerHTML放入模板缓存中。

要实现这一点，您可以手动将模板放入$templateCache，或者更方便 - 使用ngHtml2js等工具自动完成此任务，这些工具可用于所有主要构建系统，如gulp和grunt。

Answer 2

参考Angular-bootstrap库。他们将自己的模板嵌入到JS文件中。 http://angular-ui.github.io/bootstrap/ 在此链接上选择Create a Build选项，选择任何模块并下载。检查.tpl.js文件的源代码。

ng-include

2 个答案: