从$ routeProvider中的$ templateCache访问模板

Question

Am new to Angular JS and trying to implement grunt-angular-templates. 是Angular JS的新手，它试图实现grunt-angular-templates。 I have successfully concatenated all htmls's into one JS file. 我已经成功地将所有html连接到一个JS文件中。

My app.js file: 我的app.js文件：

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

So from here if i load http://localhost:50/login , i can see login page on the screen and referred from /views/common/login.html path. 因此，从这里如果我加载http：// localhost：50 / login ，我可以在屏幕上看到登录页面，并从/views/common/login.html路径引用。

I am trying to implement the same using $templateCache. 我正在尝试使用$ templateCache实现相同的功能。 I have all the htmls concatenated in a JS file. 我将所有html串联在一个JS文件中。 I need to refer templates from the common JS file. 我需要从通用JS文件中引用模板。 I have included the template JS file in the index.html 我已经在index.html中包含了模板JS文件

Concatenated JS file: 串联的JS文件：

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

My Gruntfile 我的Gruntfile

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

How can i access/refer templates from $templateCache? 如何从$ templateCache访问/引用模板？ TIA TIA

Answer 1

You don't have to use $templateCache manually. 您不必手动使用$ templateCache。 If your template is cached, Angular is going to load it automatically. 如果您的模板已缓存，Angular将自动加载它。 The templateUrl should be the ID of your cached template generated by Grunt. templateUrl应该是Grunt生成的缓存模板的ID。

See this Plunker http://plnkr.co/edit/132S5UMLnBzzGGGI85l3 看到此柱塞http://plnkr.co/edit/132S5UMLnBzzGGGI85l3

index.html 的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 的script.js

'use strict';

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

从$ routeProvider中的$ templateCache访问模板

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-04-22 08:33:56

从$ routeProvider中的$ templateCache访问模板

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-04-22 08:33:56

解决方案1
1 已采纳 2015-04-22 08:33:56