Utilisation de $ templateCache dans le modèle d'ui-router

Puis-je utiliser $templateCache dans l'interface utilisateur du routeur modèle?

Le modèle sera mis en cache dans la résolution de la section et je veux utiliser le cache de modèle dans le même état.

$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"

Mise à jour: (+ Code mis à jour)

Je Pense que résoudre partie de mon code a un problème. parce qu'il s'exécute après le modèle de la section! et il cause de retourner $templateCache.obtenez de l'être indéfini.

- Je utiliser ocLazyLoad plugin de cache modèle et elle renvoie une bonne promesse.

Pourquoi le modèle n'attend-il de résoudre?

source d'informationauteur Morteza Ziaeemehr

  1. 19

    La façon de définir dynamiquement le modèle dynamique n'est pas via le template bien mais templateProvider. Il y a un travail plunkeret c'est l'extrait de code:

    //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'); 
      },
    })
});

    Voir:

    Et aussi, je dirais, que de ne pas ownly vous peut utiliser le $templateCachemais il est déjà utilisé par ui-router. Le service principal responsable du chargement des modèles (à partir de l'url, string...) de notre point de vue est le:

    qui, comme son illustre le code, n'utilisez $templateCache naturelles de l'optimisation ($templateFactory extrait de code🙂

    ...
/**
* @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; });
};
...
  2. 3

    Bien, je viens de découvert que vous pouvez tout simplement mis la clé de votre $templateCache modèle que la templateUrl route de la propriété et il fonctionne très bien.

  3. 0

    Je ne sais pas si ça a déjà été résolu, cependant, j'ai décidé de mettre à jour mon modèle comme suit. Je me souviens que j'utilise AngularAMD /AngularUIRouter, mais le templateURL fonctionne de la même manière. J'utilise la fonction dans templateURL, où je passe le "xxx" correspond à une nouvelle date à chaque fois, ce qui oblige la page de recherche de nouveau. J'espère que j'ai aidé à bien.

    .state ('MyReports', {
    parent: 'index',
    url: '/MyReports/:cd_menu',
    views: {
        'BodyView': angularAMD.route ({templateUrl: function (params) {
        return "MyReportsAction/getTemplate?cd_menu="+ params.cd_menu + "&xxx="+ new Date();
    },
    controllerUrl: 'js/app/base/controllers/MyReportsController',
    controller: 'MyReportsController'})
}
})

    Une fois que c'est fait, le code ci-dessous fonctionne comme prévu:

    $state.go('MyReports', {'cd_menu': cd_menu});