Skip to content

Instantly share code, notes, and snippets.

@vojtajina

vojtajina/all-templates.html

Created August 15, 2012 00:00
Show Gist options
  • Save vojtajina/3354046 to your computer and use it in GitHub Desktop.
Save vojtajina/3354046 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS: load all templates in one file
Raw
all-templates.html
<script type="text/ng-template" id="one.html">
<div>This is first template</div>
</script>
<script type="text/ng-template" id="two.html">
<div>This is second template</div>
</script>
Raw
fakeTemplateCache.js
var app = angular.module('test', []);
// HACK: we ask for $injector instead of $compile, to avoid circular dep
app.factory('$templateCache', function($cacheFactory, $http, $injector) {
var cache = $cacheFactory('templates');
var allTplPromise;
return {
get: function(url) {
var fromCache = cache.get(url);
// already have required template in the cache
if (fromCache) {
return fromCache;
}
// first template request ever - get the all tpl file
if (!allTplPromise) {
allTplPromise = $http.get('all-templates.html').then(function(response) {
// compile the response, which will put stuff into the cache
$injector.get('$compile')(response.data);
return response;
});
}
// return the all-tpl promise to all template requests
return allTplPromise.then(function(response) {
return {
status: response.status,
data: cache.get(url)
};
});
},
put: function(key, value) {
cache.put(key, value);
}
};
});
app.config(function($routeProvider) {
$routeProvider.when('/one', {templateUrl: 'one.html'});
$routeProvider.when('/two', {templateUrl: 'two.html'});
});
Raw
index.html
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>Loading all templates in one file...</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<script type="text/javascript" src="fakeTemplateCache.js"></script>
</head>
<body>
<a href="#/one">one</a> | <a href="#/two">two</a>
<div ng-view></div>
</body>
</html>
@JesseBuesking
Copy link

@manikantag I just ran into the same issue and your solution fixed my problem, so thank you!

One thing I'm wondering though, is whether it'd be safer to do this instead:

combinedTplPromise.then(function(response) {
    response.data = origGetMethod(url);
    return response;
});

This way any future changes to the response object will make it through safely, as we're really only caching the response data. Thoughts?

@astik
Copy link

astik commented May 23, 2015

@tdg5, thanks for the testing bootstrap, it motivates me to add some on my plugin ; I know it's been a while, but, better late than never =)
Anyway, just for information, https://github.com/astik/angular-combine is still alive as of its counterpart https://github.com/astik/grunt-angular-combine.
Feel free to participate =)

@mikeulkeul
Copy link

Thank you for the code!
I just patch it in case partial.tmpl doesn't exist (like in a environment development)

app.factory('$templateCache', function($cacheFactory, $http, $injector) {
    var cache = $cacheFactory('templates');
    var allTplPromise;

    return {
        get: function(url) {
            var fromCache = cache.get(url);

            // already have required template in the cache
            if (fromCache) {
                return fromCache;
            }

            // first template request ever - get the all tpl file
            if (!allTplPromise) {
                allTplPromise = $http.get('partial.tmpl').then(function(response) {
                    // compile the response, which will put stuff into the cache
                    $injector.get('$compile')(response.data);
                    return response;
                });
            }

            // return the all-tpl promise to all template requests
            return allTplPromise.then(function(response) {
                return {
                    status: response.status,
                    data: cache.get(url)
                };
            }).catch(function(){
                return $http.get(url).then(function(response) {
                    $injector.get('$compile')(response.data);
                    return response;
                });
            });

        },

        put: function(key, value) {
            cache.put(key, value);
        }
    };
});

@ebinmanuval
Copy link

ebinmanuval commented Aug 25, 2016 •
edited
Loading

is there any problem if i use this code

app.run(function($http, $templateCache){

    $http.get('all-templates.html').then(function(response) {

        var $html = $('<div />',{html:response.data});
        var elements=$html.find('script');
        angular.forEach(elements,function(element){
            $templateCache.put(element.id,element.innerHTML);

        });

    });

});

@redgeoff
Copy link

Awesome!!

@patilkomal
Copy link

patilkomal commented Nov 21, 2017 •
edited
Loading

hello guys...i am facing with one problem in ionic2...i want linked index.html page with second page of app..how to do it???
In actual have an svg iamge n second page of ionic2 which should be fill with color on click, by accessing index.html file

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment