Définir la vue par défaut pour plusieurs états AngularJS ui.router

J'ai plusieurs points de vue dans angulaire de l'application. Actuellement, je suis à l'aide de l'interface utilisateur.routeur $stateProvider pour établir les points de vue. Mais je trouve cela très pénible car je dois répéter chacun des points de vue dans chaque état. Est-il un moyen de définir une vue par défaut pour tous les états, plutôt que de les répéter dans chaque état?

$stateProvider
.state('default', {
    url: '/default',
    views:{
        view_1: {
            templateUrl: 'view1',
            controller: function($scope){}
        },
        view_2: {
            templateUrl: 'view2',
            controller: function($scope){}
        },
        view_3: {
            templateUrl: 'view3',
            controller: function($scope){}
        }
    }
})
.state('changed_state', {
    url: '/changed_state',
    views:{
        view_1: {
            templateUrl: 'view1',
            controller: function($scope){}
        },
        view_2: {
            templateUrl: 'changed_view2',
            controller: function($scope){}
        },
        view_3: {
            templateUrl: 'view3',
            controller: function($scope){}
        }
    }
})

Je veux seulement avoir à lister les vues par défaut pour tous les membres, une fois, et ensuite seulement de changer les points de vue qui changent à chaque changement d'état. c'est à dire:

.state('default', {
    url: '/default',
    views:{
        view_1: {
            templateUrl: 'view1',
            controller: function($scope){}
        },
        view_2: {
            templateUrl: 'view2',
            controller: function($scope){}
        },
        view_3: {
            templateUrl: 'view3',
            controller: function($scope){}
        }
    }
})
.state('changed_state', {
    url: '/changed_state',
    views:{
        view_2: {
            templateUrl: 'changed_view2',
            controller: function($scope){}
        }
    }
})

Grâce

source d'informationauteur Tui Popenoe

  1. 28

    Exactement qui en est déjà là dans l'INTERFACE utilisateur-architecture d'un Routeur:

    Imbriqués les États & Vues Imbriquées

    Il nous suffit de déclarer un super état de base (par exemple,'root'). Il pourrait même être abstrait pour éviter son initialisation, - mais ne pas le faire. Et cet état de définir toutes les vues par défaut. Tout état d'enfant ou grand enfant, l'état peut remplacer ces valeurs par défaut:

    La root état

     .state('root', {
    //url: '/default', - no url needed at all, but could be
    abstract: true
    views:{
        '' : { templateUrl: 'layout.html'},

        'view_1@root': {
            templateUrl: 'view1',
            controller: function($scope){}
        },
        'view_2@root': {
            templateUrl: 'view2',
            controller: function($scope){}
        },
        'view_3@root': {
            templateUrl: 'view3',
            controller: function($scope){}
        }
    });

    Ce que nous pouvons voir ci-dessus, est que la racine de l'état injecte dans l'index.thml <div ui-view=""></div> son propre modèle - le modèle de mise en page:

    '' : { templateUrl: 'layout.html'},

    De sorte que toutes les vues nommées à l'intérieur de layout.html pourrait être rempli avec des vues par défaut, il suffit d'utiliser l'absolu de nommage (voir plus bas)

    'view_1@root': { //this will inject into the layout.html of current root state

    Certains points plus intéressants. Nous n'utilisons pas d'url... de sorte que tous les enfants membres peuvent définir ses propres. Nous utilisons abstrait... mais il n'est pas un must.

    Enfant, les états - c'est la façon de tirer profit de parent

    .state('changed_state', {
    parent: 'root'           //this way we profit from parent
    url: '/changed_state',
    views:{
        view_2: {
            templateUrl: 'changed_view2',
            controller: function($scope){}
        },
        //HERE all other views are unchanged

    Également vérifier l':

    Plusieurs Vues Nommées

    et

    Afficher les Noms Relatifs et Absolus des Noms

    de comprendre plus de la dénomination 'view_1@root' (petite cite)

    Derrière les scènes, chaque vue est attribué un nom absolu qui suit un schéma de viewname@statenameoù viewname est le nom utilisé dans l'affichage de la directive et nom de l'état est l'état absolu de nom, par exemple, communiquer avec.de l'élément. Vous pouvez également choisir d'écrire vos noms de vue dans l'absolu de la syntaxe.