8/15/2012 - 12:00 AM

AngularJS: load all templates in one file

AngularJS: load all templates in one file

<!DOCTYPE html>
<html ng-app="test">
  <title>Loading all templates in one file...</title>
  <script type="text/javascript" src=""></script>
  <script type="text/javascript" src="fakeTemplateCache.js"></script>

  <a href="#/one">one</a> | <a href="#/two">two</a>
<div ng-view></div>
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
          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'});
<script type="text/ng-template" id="one.html">
<div>This is first template</div>

<script type="text/ng-template" id="two.html">
<div>This is second template</div>