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

Question

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').run(['$templateCache', function($templateCache) {

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

     // Other templates here too
);

我在上面给出的示例中定义了指令$templateCache，但我仍然获得了所有指令定义模板的其他HTTP请求。我路线上的所有其他模板都很棒。

我想将grunt-angular-templates用于所有我的模板;不仅仅是路线所呼唤的那些。我在这里错过了一步吗？如果这不可能，我还有哪些其他选择来减少服务器的初始请求？