Несколько состояний на одной странице с ui-router

Question

В настоящее время я изучаю возможность настройки ui-router для следующего сценария. Было бы здорово, если бы у кого-то была идея, как этого добиться.

У меня есть простой один макет пейджера с навигацией. Каждый элемент навигации имеет поле div с содержимым. Как я могу теперь определить несколько состояний на одной странице (для каждого элемента навигации одно состояние с отдельным контроллером и шаблоном)?

Впоследствии я хотел бы реализовать решение, когда я нажимаю на элемент навигации, чтобы перейти к соответствующему контейнеру div. В основном это делается с помощью якорей HTML, но как я могу решить это с помощью ui-router? Или это невозможно, и мне нужно создать одно состояние с отдельными видами?

Ниже пример изображения, чтобы показать вам разыскиваемого расположение:

Надеюсь кто-то есть решение для этого.

Спасибо заранее,
xyNNN

Answer 1

С Ui-маршрутизатор вы можете иметь несколько представлений на одной странице. Таким образом, вы будете иметь возможность сделать что-то вроде этого:

$stateProvider 
.state('main',{ 
    views: { 
    'contentSite1': { 
     templateUrl: 'site1.html', 
     controller: function($scope){} 
    }, 
    'contentSite2': { 
     templateUrl: 'site2.html', 
     controller: function($scope){} 
    }, 
    'contentSite3': { 
     templateUrl: 'site3.html', 
     controller: function($scope){} 
    }, 
    } 
}); 

Вот ссылка с более подробным объяснением https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views