AngularJS - Plusieurs ng-view dans un seul modèle

132

Je crée une application Web dynamique en utilisant AngularJS. Est-il possible d'en avoir plusieurs ng-viewsur un seul modèle?

angularjs ng-view Jayram
la source
2
il semble y avoir une pull request, toujours avec quelques bugs: github.com/angular/angular.js/pull/1198
Alp
4
Jan Varwig écrit sur le rôle des directives dans Angular. Ce n'est pas une réponse à votre question, mais dans certains cas, ses idées pourraient être une bonne alternative: jan.varwig.org/archive/angularjs-views-vs-directives
Juha Palomäki
passait par le didacticiel angulaire et avait exactement la même question, ils ne le disent pas très clairement, cela semble être un concept assez profond cependant ..
qwwqwwq

Réponses:

100

Vous ne pouvez en avoir qu'un ng-view.

Vous pouvez modifier le contenu de plusieurs façons: ng-include, ng-switchou la cartographie différents contrôleurs et modèles à travers le routeProvider.

pasine
la source
1
les contrôleurs et les modèles de mappage remplaceront tout l'élément ng-view, non?
zx1986
9
Qu'en est-il de la modification dynamique du contenu d'un widget? Ne voudriez-vous pas créer une vue pour le widget et un contrôleur pour le widget et un modèle pour le widget?
Ray Suelzer
Est-il recommandé d'utiliser des vues? N'est-il pas préférable de définir les div avec ng-showet ng-hideet de contrôler leur visibilité à l'aide de variables? Parce que parfois je pourrais aimer cacher / afficher plusieurs composants
SomethingSomething
39

UI-Router est un projet qui peut aider: https://github.com/angular-ui/ui-router L'une de ses fonctionnalités est la présence de plusieurs vues nommées

UI-Router a de nombreuses fonctionnalités et je vous recommande de l'utiliser si vous travaillez sur une application avancée.

Consultez la documentation de plusieurs vues nommées ici .

Morteza Ziyae
la source
6
Malheureusement, comme le dit le fichier readme de ui-router: Remarque: UI-Router est en cours de développement actif. En tant que tel, bien que cette bibliothèque soit bien testée, l'API peut changer. Envisagez de l'utiliser dans les applications de production uniquement si vous êtes à l'aise pour suivre un journal des modifications et mettre à jour votre utilisation en conséquence.
trainoasis
1
@trainoasis l'a utilisé pour plusieurs projets, semble «très» stable et jusqu'à présent, je n'ai eu aucun problème concernant le changement d'API, en fait je ne me souviens d'aucun changement majeur dans l'API.
Morteza Ziyae
19

Je crois que vous pouvez l'accomplir simplement en ayant un seul ng-view. Dans le modèle principal, vous pouvez avoir des ng-includesections pour les sous-vues, puis dans le contrôleur principal, définissez les propriétés du modèle pour chaque sous-modèle. Pour qu'ils se lient automatiquement aux ng-includesections. C'est la même chose que d'avoir plusieursng-view

Vous pouvez consulter l'exemple donné dans la ng-include documentation

dans l'exemple, lorsque vous modifiez le modèle de la liste déroulante, le contenu est modifié. Supposons ici que vous ayez un ng-viewcontenu principal et qu'au lieu de sélectionner manuellement le sous-contenu en sélectionnant le menu déroulant, vous le faites comme lorsque la vue principale est chargée.

Tekz
la source
2
En l'absence de solution comme UI-Router, ng-include est en effet une alternative viable, comme vous l'avez expliqué. Ce que ng-include ne peut pas accomplir, ce sont des vues multiples pilotées par URL (état), $ route ne peut pas rendre dynamiquement différentes vues en fonction de l'URL actuelle. Nous pourrions tordre les bras d'Angular et y arriver en utilisant une logique personnalisée dans le contrôleur, comme l'exemple de la ng-include documentation , mais ce n'est pas un modèle d'architecture d'application souhaitable, UI-Router est le bon type de solution.
Yiling
Un plus pour le commentaire @Yiling. L'utilisation de ng-include est une solution de contournement.
Farshid Saberi
13

En utilisant le ng-viewmodule standard, vous ne pouvez pas avoir plus d'un modèle dynamique.

Cependant, ce projet vous permet de le faire (recherchez ui-router).

ŁukaszBachman
la source
3
angular-ui semble être un bon choix dans un futur (proche) mais il semble toujours très instable pour une utilisation en production
David Barreto
8

Il est possible d'avoir des vues multiples ou imbriquées. Mais pas par ng-view.

Le module de routage principal en angulaire ne prend pas en charge les vues multiples. Mais vous pouvez utiliser ui-router. Il s'agit d'un module tiers que vous pouvez obtenir via Github, angular-ui / ui-router, https://github.com/angular-ui/ui-router . Une nouvelle version de ngRouter (ngNewRouter) est actuellement en cours de développement. Ce n'est pas stable pour le moment. Je vous donne donc un exemple de démarrage simple avec ui-router. En l'utilisant, vous pouvez nommer les vues et spécifier les modèles et contrôleurs à utiliser pour les rendre. En utilisant $ stateProvider, vous devez spécifier comment les espaces réservés de vue doivent être rendus pour un état spécifique.

<body ng-app="main">
    <script type="text/javascript">
    angular.module('main', ['ui.router'])
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
        $stateProvider
        .state('home', {
            url: '/',
            views: {
                'header': {
                    templateUrl: '/app/header.html'
                },
                'content': {
                    templateUrl: '/app/content.html'
                }
            }
        });
    }]);
    </script>
    <a ui-sref="home">home</a>
    <div ui-view="header">header</div>
    <div ui-view="content">content</div>
    <div ui-view="bottom">footer</div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>

Vous devez référencer angularjs et angular-ui.router pour cet exemple.

$ bower install angular-ui-router
Farshid Saberi
la source
Merci Farshid c'est génial! Il devrait être mentionné dans le référentiel Github angular-ui / ui-router github.com/angular-ui/ui-router où j'ai obtenu le module
totalement étonnant
Je ne sais pas pourquoi vous auriez besoin de faire cela. Pourquoi ne pas ng-inclure l'en-tête / pied de page et le ng-afficher le contenu?
user441521
ng-include fonctionnera si les fichiers sont hébergés, par exemple. sur nodejs. Si vous travaillez avec un répertoire local, cela générerait une erreur interdomaine.
Sid
0

Vous ne pouvez pas avoir plusieurs vues ng. Voici mon cas d'utilisation où j'ai résolu mon besoin. Je voulais avoir un comportement par onglets dans ma boîte de dialogue de modèle. J'étais confronté à un problème en cliquant sur les onglets ayant un lien hypertexte qui invoquera les liens du routeur. J'ai résolu cela en utilisant le bouton et le CSS pour les onglets. Lorsque l'utilisateur clique sur l'onglet, il n'appellera en fait aucun lien hypertexte qui invoquera toujours le ng-router. Lorsque l'utilisateur clique sur l'onglet, il appelle une méthode, où je charge dynamcilly html. Ci-dessous la fonction en cliquant sur l'onglet

self.submit = function(form) {
                $templateRequest('resources/items/employee/test_template.html').then(function(template){
                var compiledeHTML = $compile(template)($scope);
                $("#d").replaceWith(compiledeHTML);
});

Utilisateur $ templateRequest. Dans la page test_template.html, ajoutez votre contenu html. Ce contenu html sera lié à votre contrôleur.

Anwer Aslam
la source