Loading AngularUI templates from other location

Question

At the moment AngularUI is loading templates from this location:

template/tabs/tab.html

I am trying to use another location. I can load the templates from inside a JS file, but I don't want to keep my HTML inside JS file.

I found a good examples from here : Can you override specific templates in AngularUI Bootstrap?

angular.module("TemplateModule", []).run(["$templateCache", "$http", function ($templateCache, $http) {
    $templateCache.put("template/tabs/tab.html", "<div></div>");
    $templateCache.put("template/tabs/tabset.html", "<div></div>");
}]);

Here you can see, that I am putting 2 templates and it works like this.

But I want the templates to be loaded from for example : work/files/tabs/tab.html

I was thinking about something like this...pseudocode

$templateCache.put("template/tabs/tab.html", $http.get("work/files/tabs/tab.html"));

Any suggestions?

Answer 1

$http's get() method does not return the fetched data directly, but returns "a promise with two $http specific methods: success and error". So, one way to approach it is like this:

angular.module('TemplateModule', [])
       .run(['$templateCache', '$http', function ($templateCache, $http) {
    var templates = ['tabs/tab.html', 'tabs/tabset.html', 'something/else.html'];
    var fetchTemplate = function(tmpl) {
        $http.get('work/files/' + tmpl)
             .success(function(data, status, headers, config) {
                 $templateCache.put('template/' + tmpl, data);
             })
             .error(function(data, status, headers, config) {
                 $templateCache.put('template/' + tmpl,
                                    '<div>ERROR FETCHING TEMPLATE</div>');
             });
    };
    templates.forEach(fetchTemplate);
}]);