9
votes

Comment chargez-moi de manière dynamique un modèle en fonction des paramètres d'un itinéraire enregistré avec $ routeProvider?

J'ai trouvé que vous pouvez utiliser un modèle ou un modèle carl comme une fonction comme celle xxx pré>

et je me suis demandé s'il est possible de charger paresseux le modèle, mais je ne peux pas faire ce travail P>

.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;      
   }
});


2 commentaires

Voulez-vous PREFETCH le modèle? En production, vous ne devez pas préférer le modèle, mais utilisez quelque chose comme grognate-angular-templats NPMJS.ORG/Package/grunt-angular-Templates - Cela fera tout le travail pour vous.


Non, je ne veux pas préférer le modèle. J'utilise ASP.NET sur le backend. Sur le changement d'itinéraire, j'ai besoin d'obtenir un modèle sur le serveur, de manière asynchrone en utilisant $ http.


5 Réponses :


1
votes

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

Cependant, sur la base de votre exemple, je suppose que vous recherchez l'attribut code> résolution code> pour les définitions d'itinéraire dans $ routeProvider . Cet attribut vous permet de transmettre des dépendances de promesse à un contrôleur. Voir l'exemple de retard dans $ Route ... P>

$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;
        }
    }
});


4 commentaires

Je ne pense pas qu'il parle de «chargement paresseux», je pense que c'était un abus de discussion ... Il parle davantage de chargement dynamiquement des modèles et des contrôleurs basés sur un itinéraire.


Je pense que nous devons savoir pourquoi il veut utiliser Ajax pour obtenir un modèle.


Très probablement parce qu'il construit ses modèles à Razor avec MVC. Le motif y a-t-il de toute façon.


Cette confusion a-t-elle quelque chose à voir avec une implémentation de .NET de angulaire? UI-ROUTER est bon à vous permettre de fournir une fonction de fabrique qui peut compter sur un service Pour fournir dynamiquement un modèle pour une route / un état donné, mais que vous auriez besoin d'acheter à l'UI-Router / $ State pour obtenir cet avantage. Honnêtement, je ne sais pas comment le type de route par défaut pourrait être utilisé de cette manière.



19
votes

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

Regardons quelles actions se déroulent dans .NET MVC: Ils rentrent des actionsRésultats ... qui sont vraiment manifestés pour quelle vue et quel modèle devrait être couru et retourné de l'architecture. Un "contrôleur" dans MVC est une collection de telles actions et peut contenir une logique partagée entre les actions sous la forme de méthodes privées ou de dépendances partagées sur cette classe.

regardons maintenant ce que l'angulaire Fait: Angular appelle la fonction de contrôleur une fois, en tant que constructeur, de configurer un objet $ d'une portée qui agira (sorte de) comme votre "modèle". Chaque contrôleur en angulaire est (généralement parlant) associé à un seul moyen de mettre en place une étendue de $ **. Une fois que ce contrôleur est traité, un Digest $ est appelé sur la portée $ qu'elle modifie, qui est ensuite appliquée à la vue liée à la portée ... qui est le HTML encapsulé par l'élément avec votre contrôleur NG (ou Attribut NG-View).

SO .. La question, pouvez-vous charger de manière dynamique des modèles basés sur des paramètres de route? Oui. Vous pouvez définitivement. Le moyen le plus simple consisterait à acheminer vos demandes sur un seul modèle qui n'incluait que un div avec un NG-Inclure sur celui-ci, que vous avez changé.

dans vos itinéraires: < / p> xxx

puis votre déclaration de contrôleur dynamique: xxx

myController / myaction (que je suppose que vous pouvez générer avec un rasoir) devrait renvoyer quelque chose comme ceci: xxx

... à partir de là, vous définissez votre contrôleur MyActionCtrl tout à lui-même.

Pouvez-vous plier l'architecture pour le faire "ASP.NET MVC-ESQE", dans ce "Un contrôleur" a un tas de "action" qui fonctionne, qui dicte tout le comportement de votre vue? Ouais ... mais pas sans rendre votre application vraiment idiot avec des déclarations de commutation et similaires ... Donc, vous ne voulez probablement pas faire cela.

À la fin, vous allez devoir obtenir hors de la mentalité des «contrôleurs et actions» de ASP.NET MVC avec angular. C'est une architecture MVC, mais mvc! = "Contrôleurs et actions".


** angular crée également et enregistre une instance du contrôleur en tant qu'objet également, mais cette fonctionnalité est rarement utilisée dans les angulaires développement, et je ne parle pas de cela ici, par exemple.)


4 commentaires

Excellent et très détaillé! Merci beaucoup. J'ai toujours du mal à utiliser la meilleure des deux - ASP.NET et angular et vous venez de vous aider à voir la photo d'un angle différent.


Je suis venu d'années de Webforms ASP.NET et de développement MVC. C'est un état d'esprit différent. Je vous défierais d'essayer d'utiliser Angular Manipulez tous vos modèles HTML. Avec des directives personnalisées, le routage / NG-View and NG-Inclure, vous devriez pouvoir faire tout ce que Razor ne peut faire de rien que HTML et anguleux. En substance, déplacez complètement le rendu de votre UI hors du serveur et mettez cette charge sur votre client, laissant votre application MVC pour héberger des données. C'est un état d'esprit différent, à coup sûr, mais cela paie des dividendes sur la route en couplant sans heurts votre application client de votre technologie de serveur.


@blesh Savez-vous si une performance a été appuyée sur la présentation des modèles HTML provenant du CSHTML VS SIAL HTML?


Leur pourrait être .. cshtml doit être traitée et n'est généralement pas mis en cache. Les fichiers HTML sont statiques et il n'y a pas de traitement, de sorte qu'ils seront plus gros.



3
votes

Comme indiqué, les modèles chargés par templaceur seront paresseux chargés dans des circonstances normales et il existe des méthodes de jeu avec le cache si vous avez besoin de quelque chose d'autre que la norme.

Ce commentaire semble être le creux de la matière : P>

Je veux chercher un modèle entier en faisant une demande Ajax au serveur p> BlockQuote>

Ce n'est pas nécessairement un moyen normal de travailler avec angulaire. Cela peut avoir son utilité, mais c'est hors des sentiers battus. Habituellement, des modèles sont immunisés à partir de tout ce qui est sensible au contexte, car ils représentent le code qui obtient ses informations d'état critiques de la portée ou des paramètres d'une sorte. Alors pourquoi Ajax? P>

Que veut votre modèle / besoin qui viendrait d'une demande Ajax? La réponse à cette question peut aider à la décision ultime de la manière de le faire plus efficacement et au bon endroit. P>

Il se peut que vous souhaitiez ou avez besoin d'un dynamisme côté serveur pour faire partie de votre système, ou qu'il existe d'autres moyens de le faire que d'avoir un retour AJAX définissant le modèle. p>

update: strong> Vous avez donc dit que "sur le changement de route, j'ai besoin de Obtenez un modèle sur le serveur, de manière asynchrone en utilisant $ http ". ' Mais c'est tout intégré au templateurl. @Wmluke semble avoir présenté quelques alternatives intéressantes. P>

Si nous acceptons simplement que vous avez besoin d'Ajax pour obtenir votre modèle, voici une autre possibilité. Avec ui-routeur Vous pouvez utiliser un modèleProvider - ce qui pourrait vous appeler le service personnalisé qui fait AJAX et tout ce que vous avez Vous voulez. P>

Cet exemple revient simplement Hello World Asynchronosly, mais vous pouvez appeler votre propre service ici ou exécuter directement des demandes AJAX si vous le souhaitez. P>

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


1 commentaires

C'est vrai. Nous utilisons ASP.NET sur le dos et nous souhaitons utiliser des avantages de la syntaxe de rasoir. J'aimerais contrôler la manière dont les vues hivoilent angulaires du serveur sur le changement de route



2
votes

Pourquoi pas seulement Bypass templateurl tous ensemble et que vos contrôleurs interceptent les demandes?

  • Vous pourrez être en mesure de faire des pages de charge paresseuses dynamiquement par URL

  • intercepte éventuellement partiels.

    config.js xxx

    contrôleurs.js xxx

    index.html xxx


0 commentaires

0
votes

Vous pouvez voir un exemple de travail de deux modèles chargés de manière dynamique en fonction des paramètres du site de DOCS angulaires Nginclude - exemple paragraphe .

Voici le Exemple de Plunker . P>

<!-- 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];


0 commentaires