Angular 仍在尝试寻找模板，即使我已经 $templateCached 了它们

Question

我正在尝试合并 gulp、angular ngbp 和 ionic。到目前为止，我已经将示例应用程序代码重组为 ngbp 样式，并将模板编译到 js 文件中，以便可以将它们加载到 $templateCache 中，然后加载到我的应用程序 js 文件只能从缓存中获取模板。

在我的index.html

   <!-- inject:js -->
    <script src="/vendor/angular/angular.min.js"></script>
    <script src="/vendor/angular-animate/angular-animate.min.js"></script>
    <script src="/vendor/angular-sanitize/angular-sanitize.min.js"></script>
    <script src="/vendor/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="/vendor/ionic/js/ionic.min.js"></script>
    <script src="/vendor/ionic/js/ionic-angular.min.js"></script>
    <script src="/vendor/ionic/js/ionic.bundle.js"></script>
    <script src="/src/app/app.js"></script>
    <script src="/src/app/browse/browse.js"></script>
    <script src="/src/app/browse/routes.js"></script>
    <script src="/src/app/playlist/controllers.js"></script>
    <script src="/src/app/playlist/playlist.js"></script>
    <script src="/src/app/playlist/routes.js"></script>
    <script src="/src/app/playlists/controllers.js"></script>
    <script src="/src/app/playlists/playlists.js"></script>
    <script src="/src/app/playlists/routes.js"></script>
    <script src="/src/app/search/routes.js"></script>
    <script src="/src/app/search/search.js"></script>
    <script src="/templates-app.js"></script>
    <!-- endinject -->

在我的templates-app.js

(function(module) {
try { module = angular.module("templates-app"); }
catch(err) { module = angular.module("templates-app", []); }
module.run(["$templateCache", function($templateCache) {
  $templateCache.put("browse/templates/browse.tpl.html",
    "<ion-view view-title=\"Browse\">\n" +
    "  <ion-content>\n" +
    "    <h1>Browse</h1>\n" +
    "  </ion-content>\n" +
    "</ion-view>\n" +
    "");
}]);
})();

(function(module) {
try { module = angular.module("templates-app"); }
catch(err) { module = angular.module("templates-app", []); }
module.run(["$templateCache", function($templateCache) {
  $templateCache.put("login/templates/login.tpl.html",

//..........

示例路由（browse/routes.js），模板在src/app/browse/templates/（模板不包含在构建中，因此需要模板-app.js来缓存模板）

function BrowseConfig($stateProvider){
  $stateProvider
    .state('app.browse', {
      url: "/browse",
      views: {
        'menuContent': {
          templateUrl: "browse/templates/browse.tpl.html"
        }
      }
    })
  ;
}

angular.module('browse.routes', ['ui.router'])
  .config(['$stateProvider', BrowseConfig])
;

这通常适用于通用 ngbp 项目，但出于某种原因，当我为我的项目加载 localhost:8080 时，angular 应用程序仍会尝试 GET 模板文件 (404)。为什么我的应用没有使用缓存？

Answer 1

你必须在你的 "browse.routes" 模块中包含 "templates-app" 作为依赖项，否则他将不知道模板存在

Angular 仍在尝试寻找模板，即使我已经 $templateCached 了它们

Angular still trying to look for templates even though I've $templateCached them

javascript

angularjs

angular-template