Implement custom way of loading AngularJS templates

Question

In AngularJS you can provide an external template as an script tag or as a html file on the web server. But I need to implement a custom logic of retrieving those templates and none of the methods fit. So I thought I could rewrite the section of AngularJS where the template is actually loaded from the server. But it turns out that it is pretty hard to find any information on this. I found out that $TemplateRequestProvider is used for this task but I've no clue how to replace it with a custom logic. Can you help me out?

Answer 1

I'm not entirely sure what you're trying to achieve here as actually the $templateRequestProvider does cater for retrieving templates for given URLs pointing to them. Under the hood and when there's need for a template located in a remote source, the provider first runs through its internal cache and if the requested template is not available it goes to get it. If the response is successful the response body (HTML content) is stored and indexed in the internal store/cache. Now in the unlikely case where the resources server requires additional sets of data to be present in the request such as headers/cookies, mandatory request parameters, auth. tokens etc, then indeed, your requests for retrieving these templates need to be more sophisticated. That being said, I suppose what you're really interested in is to be able to manipulate the request right before that's sent, not re-write that (fetching + caching) logic which is already authored by the developers of angular.

Although still, if there is real need for that and have your own tailored mechanism for dealing with requests, you can access that provider during the configuration phase of your angular app's life-cycle. To do that, use a chained config on your application's module this way:

app.config(['$templateRequestProvider', function ($templateRequestProvider) {
    $templateRequestProvider.$get = ['$templateCache', '$http', '$q','$sce', ƒunction ($templateCache, $http, $q, $sce) {
        var getRemoteTemplateByUrlFn = function (tplUrl, ignoreRequestError) {
           // here be dragons
           return $http.get ... ;
        };

        return getRemoteTemplateByUrlFn;
    }];
}]). ...

Now, before getting to that stage, I'd suggest you have a better studying on the documentation as the $templateRequestProvider apart from exposing the $get configuration object to the provider's function, it also exposes the httpOptions(...) function which you can call passing an httpOptions object containing a set of headers etc. to include in your requests for fetching remote templates.

Also, speaking of templates caching and on-demand fetching, let me introduce you to the ocLazyLoad library (if you haven't come across it yet). I'm making use of it to lazily load page sources only when needed (e.g. modal window template and controller when a button is clicked). Among its great features:

• Dependencies are automatically loaded
• Debugger friendly (no eval code)
• The ability to mix normal boot and load on demand
• Load via the service or the directive
• Use the embedded async loader or use your own (requireJS, ...)
• Load js (angular or not) / css / templates files

Have fun!