AngularJS$templateCache通过grunt插件用于指令模板

grunt angular templates

在我的应用程序中适用于使用

$routeProvider

调用的模板。但是，我在使用指令中定义的模板时遇到了一些问题

一些背景

在我的

index.html

文件中，我有几个用于整个网站设计的自定义指令，它们都有自己的模板。我这样做是为了让它更模块化。整个网站设计有很多组件，所以我不希望

index.html

杂乱无章

以下是一个指令示例：

navigation.js

app.directive('navigation', function() {
    return {
        restrict: 'E',
        templateUrl: 'src/components/navigation.html',
        controller: 'NavigationController as navCtrl'
    };
})

templates.js（通过grunt angular templates编译）

angular.module（'app'）。运行（['$templateCache'，函数（$templateCache）{
$templateCache.put（'src/components/navigation.html'，'Nav here'
//这里还有其他模板
);

我在上面给出的示例中定义了指令的

$templateCache

，但我仍然收到了对所有指令定义模板的额外HTTP请求。我路由中的所有其他模板都非常有效

我想利用

grunt angular templates

来处理我所有的模板，而不仅仅是路由调用的模板。我是否遗漏了一个步骤？如果这不可能，我还有什么其他选择来减少来自服务器的初始请求

angular.module('app').run(['$templateCache', function($templateCache) {

     $templateCache.put('src/components/navigation.html', '<nav>Nav here</nav>'

     // Other templates here too
);