CODEWITHSUNDEEP
javascriptangularjs
LS2
LS2

Reputation: 152

Access templates from $templateCache in $routeProvider

Am new to Angular JS and trying to implement grunt-angular-templates. I have successfully concatenated all htmls's into one JS file.

My app.js file:

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.

I am trying to implement the same using $templateCache. I have all the htmls concatenated in a JS file. I need to refer templates from the common JS file. I have included the template JS file in the index.html

Concatenated JS file:

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

My 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? TIA

Upvotes: 1

Views: 2624

Answers (1)

user670804
user670804

Reputation:

You don't have to use $templateCache manually. If your template is cached, Angular is going to load it automatically. The templateUrl should be the ID of your cached template generated by Grunt.

See this 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'
  });
}]);

Upvotes: 1

Related Questions