How to load a remote template using $templatecache.put()

I have read the documentation for $templateCache but I'm still struggling to understand how to load remote templates into the cache using the put function.

Below is an example:

onBoardingApp.run(function ($templateCache, $http) {
  $templateCache.put('tpl1.html', '<p>Hello World</p>');
  $templateCache.put('tpl2.html', '~/Templates/Pi/pi-1.html');
  alert($templateCache.get('tpl1.html'));
  alert($templateCache.get('tpl2.html'));
}); 

While my code returns the HTML code for tpl1, the path is being returned for tpl2. My question is: How to load a remote template using $templatecache.put().

Thanks for the help.

Try to call the remote template and set it up on the templateCache :

onBoardingApp.run(function ($templateCache, $http) {
    $templateCache.put('tpl1.html', '<p>Hello World</p>');
    console.log($templateCache.get('tpl1.html'));
    $http.get('/Templates/Pi/pi-1.html').then(function (response) {
        $templateCache.put('tpl2.html', response.data);
        console.log($templateCache.get('pl2.html'));
    }, function (errorResponse) {
        console.log('Cannot load the file template');
    });
}); 

The main reason for this is that angularjs' templateCache only receives string values, not like on a directive, where you can have a templateUrl, for example.

Here is the doc for this ng-service