通过 RequireJS 使用和注入 Angular $templateCache答案

【问题标题】：Using and injecting Angular $templateCache with RequireJS通过 RequireJS 使用和注入 Angular $templateCache
【发布时间】：2014-10-15 01:16:44
【问题描述】：

我做了一个grunt serve:dist 并在我的内部使用grunt-contrib-requirejs 构建一个all.js 文件，该文件基于我的RequireJS main.js 文件，其中包含require.config 和require 部分。

我认为all.js 应该在我的分发文件中，我必须在启动时将它包含在我的 index.html 中，因为一切都在那里。是这样吗？

<script src="require.js" data-main="all.js"></script>

我还基于我的所有模板 HTML 文件创建了一个带有 ngTemplates 的模板 JavaScript 文件并引导它，因此名为 templates.js 的模板文件如下所示：

define([
  'angular'
], function(angular) {
  angular.module('MyApp.templates', []).run(['$templateCache', function($templateCache) {
    'use strict';
    $templateCache.put('templates/MyTest.html',
      "<h1>Title</h1>\r" +
      // ...
    // other put on $templateCache
  }]);
});

所以我有一个我想使用的$templateCache。但我不知道如何做到这一点。我想我必须加载templates.js，因为它不包含在all.js 中，因此我应该以某种方式注入它。

【问题讨论】：

标签： javascript angularjs requirejs gruntjs

【解决方案1】：

我有类似的问题，我找到了解决它的方法。基本上，我有templates.js 只返回一个注入运行块的函数。

例如：templates.js

define([], function()){
    return ['$templateCache", function($templateCache){
        'use strict';
        $templateCache.put('templates/MyTest.html',
        "<h1>Title</h1>\r" +
        // ...
        // other put on $templateCache
    }];
}

然后，在您的app.js 文件中，您可以将此函数注入到运行块中

define(['templates'], function(templates){
    angular.module('app')
        .run(templates);
})

希望对您有所帮助，如果您有不清楚的地方，请告诉我。

【讨论】：