Объединение нескольких ng-приложений в одно приложение

Question

Проблема: У нас есть несколько угловых приложений, работающих на одной странице. Один для нижнего колонтитула. Один для заголовка и один для модальности входа. Каждый из них имеет собственное состояние и каждый пользователь ui.router.

Задача: Мы хотели бы объединить их в одно приложение ng-app наименее инвазивным способом. Основной проблемой здесь является то, что когда мы пытаемся объединить их, переключение состояний вызывает некоторые области, чтобы исчезнуть,

Наш первый «наивный» подход, чтобы сделать что-то вроде:

angular 
    .module('bigApp', ['smallApp1', 'smallApp2']) 
    .run(['$state', function($state) { 
    console.log("Big app running!"); 
    }]); 

Это, кажется, приводит к селективным рендеринг. Например. Когда я нажимаю ссылку, чтобы перейти к состоянию, указанному в smallApp1, вид для smallApp2 исчезает.

Правильно ли я в своем предположении, что необходимо создать новое общее родительское состояние? У родительского состояния должны быть подпункты для рендеринга небольших приложений, которые должны оставаться на месте? и не исчезают при изменении состояния?

Answer 1

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

"menu" state - contains navigation, status bar (always present) 
"menu.home" - contains the central home page 
"menu.people" - contains your list of people 
"menu.people.individual" - contains details of an individual (a sub view of "menu.people") 

После того, как вы наметили структуру, вы можете работать, какие части будут использовать UI-вид, и который будет использовать компоненты. Каждый компонент может иметь собственный контроллер в одном приложении.