How to use AngularJS $templateCache.get()?

Question

I need to cache some HTML files when my Angular controller initializes.

According to Angular $templateCache documentation I can add HTML templates to Angular with:

$templateCache.get('templateId.html')

But I can't get this to work. I've tried to get the template file within the controller and within the module run() function (Plunker). But I can see in the network console that the template is not fetched.

app.run(function($templateCache) {
  $templateCache.get('templ.html');
});

What am I doing wrong?

I misunderstood the documentation. I thought the get() was "HTTP GET this template URL". But it's just a getter method. To feed the $templateCache with a template with HTTP GET, see the selected answer. — HoffZ
– HoffZ, Commented Jul 15, 2014 at 13:47

stfcodes · Accepted Answer · 2015-02-27 13:43:00Z

8

You have to fetch html using http request then you can store it in template cache. For example:

$http.get('templ.html', {
    cache: $templateCache
}).then(function(result) {
    console.log(result);
});

Updated plunker code here

edited Feb 27, 2015 at 13:43

stfcodes

1,3801 gold badge9 silver badges18 bronze badges

answered Jul 15, 2014 at 12:33

Francis Stalin

4491 gold badge4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robert Koritnik Over a year ago

Isn't it better to use $templateRequest instead of $http because it does async template fetching+caching automatically and in Angular-predictable way?

ZooZ · Accepted Answer · 2016-04-20 10:47:39Z

1

You can use $templateRequest to fetch the template.

The $templateRequest service runs security checks then downloads the provided template using $http and, upon success, stores the contents inside of $templateCache. If the HTTP request fails or the response data of the HTTP request is empty, a $compile error will be thrown (the exception can be thwarted by setting the 2nd parameter of the function to true). Note that the contents of $templateCache are trusted, so the call to $sce.getTrustedUrl(tpl) is omitted when tpl is of type string and $templateCache has the matching entry.

Documentation: https://docs.angularjs.org/api/ng/service/$templateRequest

answered Apr 20, 2016 at 10:47

ZooZ

9911 gold badge18 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to use AngularJS $templateCache.get()?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related