Using $templateCache in ui-router's template

angular-ui-router, angularjs

Solution

The way how to dynamically set the dynamic template is not via the `template` property but `templateProvider`. There is a working plunker, and this is the snippet:

// this is a run event (executed after config in fact)
// in which we do inejct a value into $templateCache
.run(function($templateCache){ 
    // this could be lazy... elswhere
    $templateCache.put('templates/template1.html'
    , '<div><h4>dashboard</h4></div>');
  })
.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/dashboard');

    $stateProvider.state('dashboard', {
      url: '/dashboard', 
      // this is the place where to resolve dynamic template
      templateProvider: function($templateCache){  
        // simplified, expecting that the cache is filled
        // there should be some checking... and async $http loading if not found
        return $templateCache.get('templates/template1.html'); 
      },
    })
});

See:

- Templates

And also, I would say, that not ownly you can use the `$templateCache`, but it is already used by `ui-router`. The main service responsible for loading templates (from url, string...) for our views is the:

- $templateFactory

which, as its code shows, does use `$templateCache` as a natural optimization (`$templateFactory` code snippet:)

...
/**
* @ngdoc function
* @name ui.router.util.$templateFactory#fromUrl
* @methodOf ui.router.util.$templateFactory
*
* @description
* Loads a template from the a URL via `$http` and `$templateCache`.
*
* @param {string|Function} url url of the template to load, or a function
* that returns a url.
* @param {Object} params Parameters to pass to the url function.
* @return {string|Promise.<string>} The template html as a string, or a promise
* for that string.
*/
this.fromUrl = function (url, params) {
    if (isFunction(url)) url = url(params);
    if (url == null) return null;
    else return $http
        .get(url, { cache: $templateCache })
        .then(function(response) { return response.data; });
};
...

Problem

Can i use $templateCache in ui-router's template? The template will be cached in resolve section and i want to use cached template in the same state. ``` $stateProvider .state('dashboard', { url: "/dashboard", template: function($templateCache){ console.log('test 2'); return $templateCache.get('templates/template1.html'); // returns undefined }, resolve:{ baseTemplates: function($ocLazyLoad) { // here the template will be cached... return $ocLazyLoad.loadTemplateFile(['base/dashboard.html']).then(function(){ console.log('test 1'); }); } } }) // console prints "test 2" before than "test 1" ``` Update: (+ Code updated) I Think resolve section of my code has an issue. because it runs after template section! and it cause returning $templateCache.get being undefined. I use ocLazyLoad plugin to cache template and it returns a correct promise. Why template don't waits for resolve?

Original source

Related problems