Question

是Angular JS的新手，并尝试实现grunt-angular-templates。我已经成功地将所有htmls连接成一个JS文件。

我的app.js文件：

angular.module('LoginApp').config(function ($routeProvider
  .when('/login', {
    templateUrl: '/views/common/login.html',
    controller: 'LoginCtrl'
  })
  .otherwise({
    redirectTo: '/account'
  });
);

所以，如果我加载http://localhost:50/login，我可以在屏幕上看到登录页面并从/views/common/login.html路径引用。

我正在尝试使用$ templateCache实现相同的功能。我把所有的htmls连接在一个JS文件中。我需要从常见的JS文件中引用模板。我已将模板JS文件包含在index.html

中

连接的JS文件：

angular.module('LoginApp').run(["$templateCache", function($templateCache)       {
  $templateCache.put("../app/views/commmon/login.html",
  // contents for login.html ... 
);
}]);

我的Gruntfile

ngtemplates: {
    myapp: {
        options: {
            base: "web",
            module: "LoginApp",
        },
        src: ['app/views/common/*.html'],
        dest: 'dist/views/html.js'
    }
},

如何从$ templateCache访问/引用模板？ TIA

Answer 1

您不必手动使用$ templateCache。如果您的模板被缓存，Angular将自动加载它。 templateUrl应该是Grunt生成的缓存模板的ID。

请参阅此Plunker http://plnkr.co/edit/132S5UMLnBzzGGGI85l3

的index.html

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-view></div>
    <script type="text/ng-template" id="login.html">
      login.html
    </script>
    <script type="text/ng-template" id="account.html">
      account.html
    </script>
  </body>
</html>

的script.js

'use strict';

angular.module('sandbox', [
  'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider
  .when('/login', {
    templateUrl: 'login.html'
  })
  .otherwise({
    redirectTo: '/login'
  });
}]);

从$ routeProvider中的$ templateCache访问模板

1 个答案: