如何在 Visual Studio 2013 中“做”（和使用）HTML 包（来自 Web Essentials）答案

【问题标题】：How to 'do' (and USE) HTML Bundles (from Web Essentials) in Visual Studio 2013如何在 Visual Studio 2013 中“做”（和使用）HTML 包（来自 Web Essentials）
【发布时间】：2015-09-10 19:02:42
【问题描述】：

根据Web Essentials Web Site：

捆绑 HTML

在解决方案资源管理器中选择 2 个或更多 HTML 文件，然后右键单击并选择创建 HTML 捆绑文件。

此功能可以轻松捆绑多个 HTML 模板以供使用在 SPA 中。

现在，通过实验，我发现捆绑 HTML 文件完全符合我的预期...连接选定的文件...好的..

但是，我没有看到（我也无法在任何地方找到它的文档......）如何告诉外部资源（例如 angularjs 指令）控制器应该“使用”哪个 html 片段。我可能会期待这样的事情：

(function() {
    'use strict';

    angular
        .module('My_App')
        .directive('myHeaderDtv', myHeaderDtv);

    myHeaderDtv.$inject = ['$window'];

    function myHeaderDtv($window) {
        // Usage:
        //     <cmr-header-dtv></cmr-header-dtv>
        // Creates:
        //      Uniform page header for CMR web pages.
        var directive = {
            restrict: 'E',
            replace: true,
            scope: { user: '=' },
            templateUrl: 'App/HeaderView.html' //the template only file
                             //should be replaced with...
            templateUrl: 'App/MyBundle.html.header'
                          // fileName: MyBundle.html
                          // template's parent html element: <header>

        };

        return directive;

        function link(scope, element, attrs) {
        }
    }

})();

当捆绑的 HTML 文件 (myBundle.html) 看起来像这样时：

<header>
...
</header>

<footer>
...
</footer>

...或者可能在捆绑过程中使用一些 javascript 包装每个选定的文件以“声明”“这是一个名为 'header' 的模板...

简而言之：angularjs 指令如何从包中找到它的 html 模板？

（注意：我已经用谷歌搜索过了，找不到任何使用 html 包的人的例子）

【问题讨论】：

标签： javascript html angularjs web-essentials

【解决方案1】：

我认为这篇博客文章涵盖了我们需要在 Visual Studio 中以 Angular 可以使用的方式使用 Html 捆绑。

http://blog.scottlogic.com/2014/08/18/asp-angular-optimisation.html

【讨论】：