Установить представление по умолчанию для нескольких состояний. AngularJS ui.router

У меня есть несколько просмотров в приложении angular. В настоящее время я использую ui.router $stateProvider для создания представлений. Однако я нахожу это очень утомительным, поскольку я должен повторять каждый из взглядов в каждом государстве. Есть ли способ установить представление по умолчанию для всех состояний, а не повторять их в каждом состоянии?

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

Мне нужно только один раз перечислить представления по умолчанию для всех состояний, а затем изменить только те изменения, которые меняются при каждом изменении состояния. то есть:.

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

Спасибо

Ответы

Ответ 1

Именно то, что уже существует в архитектуре UI-Router:

Вложенные состояния и вложенные представления

Мы просто объявим супер базовое состояние (например, 'root'). Это может быть даже абстрактным, чтобы избежать его инициализации, но это не обязательно. И это состояние будет определять все представления по умолчанию. Любое дочернее состояние или состояние большого ребенка может заменить любой из этих значений по умолчанию:

Состояние root

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

        '[email protected]': {
            templateUrl: 'view1',
            controller: function($scope){}
        },
        '[email protected]': {
            templateUrl: 'view2',
            controller: function($scope){}
        },
        '[email protected]': {
            templateUrl: 'view3',
            controller: function($scope){}
        }
    });

То, что мы видим выше, заключается в том, что корневое состояние вводит в index.thml <div ui-view=""></div> собственный шаблон - шаблон макета:

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

Таким образом, все именованные виды внутри layout.html могут быть теперь заполнены стандартными представлениями, нам просто нужно использовать абсолютное именование (см. ниже)

'[email protected]': { // this will inject into the layout.html of current root state

Еще несколько интересных моментов. Мы не используем url... так что все дочерние состояния могут определять свои собственные. Мы используем абстрактные... но это не обязательно.

Состояние ребенка - это способ получения прибыли от родительского

.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

Также проверьте:

Несколько именованных видов

и

Просмотр имен - Относительные и абсолютные имена

чтобы больше понять именование '[email protected]' (small cite)

За кулисами каждому представлению присваивается абсолютное имя, которое следует схеме [email protected], где viewname - это имя, используемое в директиве представления, а имя состояния - это абсолютное имя состояния, например. contact.item. Вы также можете написать имена имен в абсолютном синтаксисе.