web-dev-qa-db-fra.com

Utilisation de $ templateCache dans le template de ui-router

Puis-je utiliser $ templateCache dans le modèle de ui-router?

Le modèle sera mis en cache dans la section de résolution et je veux utiliser le modèle mis en cache 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 la résolution de la section de mon code a un problème. car il fonctionne après la section template! et cela cause le retour de $ templateCache.get comme étant non défini.

J'utilise le plugin ocLazyLoad pour mettre en cache le modèle et renvoie une promesse correcte.

Pourquoi le modèle n'attend pas la résolution?

angularjsangular-ui-router
10
Morteza Ziaeemehr

La façon de définir dynamiquement le modèle dynamique ne se fait pas via la propriété template, maistemplateProvider. Il y a un plunker en marche, et voici l'extrait:

// 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 ce n'est pas vous pouvez utiliser le $templateCache, mais il est déjà utilisé par ui-router. Le principal service responsable du chargement des modèles (à partir de l'URL, de la chaîne ...) pour nos vues est le:

qui, comme le montre son code, utilise $templateCache comme optimisation naturelle ($templateFactoryextrait 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; });
};
...
19
Radim Köhler

Eh bien, je viens de ai découvert que vous pouvez simplement définir la clé de votre modèle $templateCache comme propriété de la route templateUrl et que cela fonctionne correctement.

3
pootzko

Je ne sais pas s'il 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 paramètre "xxx" égal à une nouvelle date à chaque fois, ce qui force à nouveau la recherche de page. J'espère que j'ai aidé, d'accord.

.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 cela est fait, le code ci-dessous fonctionne comme prévu:

$state.go('MyReports', {'cd_menu': cd_menu});
0
MIKE SILVEIRA DE OLIVEIRA