Comment charger dynamiquement un modèle basé sur les paramètres d'un itinéraire enregistré avec $ routeProvider?

J'ai trouvé que vous pouvez utiliser un modèle ou templateUrl comme une fonction, telle que

.when('/:controller/:action',{
   templateUrl:function(params){
     return: '/'+params.controller+'/'+params.action
  }
})

Et puis je me demandais si il est possible de lazy load le modèle, mais je ne peux pas faire ce travail

.when('/:ctrl/:action',{
   template:function(params){
      injector = angular.injector(['ng']);
      $q = injector.get('$q');
      var dfrd = $q.defer();

      //fetch template from server
      //dfrd.resolve()

      return dfrd.promise;      
   }
});

Dites-moi s'il vous plaît, il existe une façon - je veux chercher de l'ensemble du modèle en faisant une requête ajax vers le serveur

source d'informationauteur iLemming

  1. 19

    Donc, je vois que vous êtes un .NET MVC développeur...

    Jetons un oeil à ce que les Actions de .NET MVC: Ils reviennent ActionResults... qui sont vraiment de manifeste pour ce modèle et de la vue doit être exécuté et retourné à partir de l'architecture. Un "contrôleur" dans MVC est une collection de ces actions, et peut contenir une certaine logique partagée entre ces actions sous la forme de méthodes privées ou partagées dépendances sur cette classe.

    Maintenant, nous allons jeter un oeil à ce Angulaire est en train de faire: Angulaire est l'appel de la fonction de contrôleur une fois, en tant que constructeur, généralement à mis en place un $objet de l'étendue qui va agir (sorte de) votre "modèle". Chaque contrôleur Angulaire est en général associée à une et une seule façon de mettre en place un $scope**. Une fois que le contrôleur est traitée, $digest est appelée sur le $scope modifiée, qui est ensuite appliquée à la vue qui est liée à la portée... qui est le html encapsulé par l'élément de ng-controller (ou ng-view) attribut.

    Donc.. la question, pouvez-vous vous charger dynamiquement les modèles basés sur les paramètres de la route? Oui. Vous avez certainement peut. Le plus simple serait d'acheminer vos demandes à un modèle qui comprenait rien, mais un div avec un ng-include sur elle, que vous avez modifié.

    Dans vos itinéraires:

    $routeProvider.when('/:controller/:action', { 
    controller: 'DynamicCtrl', 
    template: '<div ng-include="include"></div>' 
});

    Alors votre dynamique contrôleur de déclaration:

    app.controller('DynamicCtrl', function($scope, $routeParams) {
    $scope.include = $routeParams.controller + '/' + $routeParams.action;
});

    MyController/MyAction (qui je suppose que vous pouvez générer avec Rasoir) doit retourner quelque chose comme ceci:

    <div ng-controller="MyActionCtrl">
   do stuff!
</div>

    ... à partir de là, vous définissez votre MyActionCtrl contrôleur à lui tout seul.

    Pouvez-vous plier l'architecture de le faire "ASP.Net MVC-esque", dans ce "contrôleur" a tout un tas de "l'action" des fonctions qui dictent le comportement de votre point de vue? Ouais... Mais non sans avoir fait votre demande vraiment ridicule avec des instructions de commutation et la comme... Si vous ne voulez probablement pas à le faire.

    À la fin vous allez avoir à sortir de l'état d'esprit de ASP.Net MVC "des Contrôleurs et des Actions" Angulaire. C'est une architecture MVC, mais MVC != "Les contrôleurs && actions".

    ** Angulaire crée et enregistre une instance du contrôleur comme un objet, mais cette option est rarement utilisée dans Angulaire de développement, et je ne parle pas de ça ici, pour dire.)

  2. 3

    Comme l'a souligné, les modèles chargé par templateUrl sera pas chargé dans des circonstances normales, et il existe des méthodes de jouer avec le cache si vous avez besoin d'autre chose que de la norme.

    Ce commentaire semble être le nœud de la question:

    Je veux chercher de l'ensemble du modèle en faisant une requête ajax vers le serveur

    Ce n'est pas nécessairement de façon normale de travailler avec angulaire. Il peut avoir son utilité, mais c'est hors des sentiers battus. Habituellement, les modèles sont à l'abri de tout ce qui est sensible au contexte, car ils représentent le code qui obtient son état critique de l'information à partir de $champ d'application ou des paramètres d'une certaine sorte. Alors pourquoi ajax?

    Quel est votre modèle de vouloir/besoin qui viennent à partir d'une requête ajax? La réponse à cette question peut aider avec l'ultime décision de la manière de procéder de façon plus efficace et au bon endroit.

    Peut-être que vous voulez ou besoin d'un certain côté serveur dynamisme à être partie de votre système, ou qu'il existe d'autres façons de le faire que d'avoir un ajax retour de définir le modèle.

    Mise à jour: donc, vous avez dit que "Sur la route du changement j'ai besoin d'obtenir un modèle à partir du serveur, de manière asynchrone à l'aide de $http".' Mais c'est tout intégré à templateUrl. @wmluke semble avoir présenté quelques alternatives intéressantes.

    Si nous nous contentons d'accepter que vous avez besoin d'ajax pour obtenir votre modèle, puis ici, c'est un plus de possibilité. Avec l'interface utilisateur du routeur vous pouvez utiliser un templateProvider -- qui pourrait vous appeler propre service personnalisé qui ne ajax et tout ce que vous voulez.

    Cet exemple renvoie simplement Bonjour tout le monde asynchronosly, mais vous pouvez appeler votre propre service ou exécuter directement des requêtes ajax, si vous vouliez.

    templateProvider:
 [        '$timeout',
  function ($timeout) {
   return $timeout(function () { return "Hello world" }, 100);
 }],

    Achat en ui-router est un potentiall plus grand engagement, mais il pourrait donner des récompenses ci-dessus juste être capable d'écrire du code pour produire des modèles. Bonne chance!

  3. 2

    Pourquoi ne pas simplement contourner templateURL tous ensemble et avoir vos contrôleurs intercepter les demandes?

    • Vous serez en mesure de dynamiquement lazy load pages par URL

    • Éventuellement intercepter les partiels.

    config.js

    $routeProvider.when('/contact', {
  template: '/views/contact.html'
});

    controllers.js

    controller('AppController', ['$scope' function($scope) {    
  //Do whatever you want here
  $scope.$on("$routeChangeSuccess",function( $currentRoute, $previousRoute ){
    console.log($route.current.template);
    $scope.page = $route.current.template;
  });

  //Optionally intercept partials
  $scope.returnView = function(partial){
    console.log(partial);
    return partial;
  }  
}]).

    index.html

    <html lang="en" ng-app="myApp" ng-controller="AppController">
<body>
<ng-include src="returnView('/views/global.header.html')"></ng-include>
<ng-include src="page"></ng-include>
<ng-include src="returnView('/views/global.footer.html')"></ng-include>
</body>
</html>
  4. 1

    Angulaire modèles sont paresseux, chargé par défaut. Plus précisément, les modèles ne sont pas récupérés jusqu'à ce qu'ils sont nécessaires, et puis ils sont mis en cache dans $templateCache.

    Cependant, d'après votre exemple, je soupçonne que vous êtes à la recherche pour le resolve attribut pour les définitions de route dans $routeProvider. Cet attribut permet de passer de la promesse des dépendances à un contrôleur. Voir le retard exemple dans $route...

    $routeProvider.when('/Book/:bookId', {
    templateUrl: 'book.html',
    controller: BookCntl,
    resolve: {
        //I will cause a 1 second delay
        delay: function($q, $timeout) {
            var delay = $q.defer();
            $timeout(delay.resolve, 1000);
            return delay.promise;
        }
    }
});

    Aussi, vous pourriez être intéressés de préchargement de certains modèles, mais le chargement différé des autres. Dans ce cas, vous devriez vérifier...

  5. 0

    Vous pouvez voir un exemple de travail de deux modèles chargés dynamiquement en fonction de paramètres à l'angle de docs site ngInclude - Exemple de Paragraphe.

    Ici est la Plunker exemple.

    <!-- index.html -->
<select ng-model="template" ng-options="t.name for t in templates">
    <option value="">(blank)</option>
</select>
<div class="slide-animate" ng-include="template.url"></div>


//controller
$scope.templates = [ 
    { name: 'template1.html', url: 'template1.html'},
    { name: 'template2.html', url: 'template2.html'} 
];
$scope.template = $scope.templates[0];