Несколько ng-views для главной страницы в angularjs

Хорошо, что я новичок в угловом, начал работать с директивами ngRoute и ngView, я столкнулся с чем-то, что является проблемой для меня, но я подозреваю, что это только проблема из-за моего отсутствия опыт в angluar.Несколько ng-views для главной страницы в angularjs

У меня есть следующий код (упрощенный) на моей странице index.html:

<html> 
    <head> 
    <title>Sample APP</title> 
    </head> 
    <body> 
    <div class="header"> 
     <nav class="pull-right">...</nav> 
    </div> 

    <div class="main" ng-view> 
    </div> 

    <div class="footer"> 
    </div> 
    </body> 
</html>

Выше структура макет по умолчанию, который использует мою страницу. Теперь моя проблема касается только домашней страницы, ползунок показан в div с классом «header». Вот так:

<div class="header"> 
    <nav class="pull-right">...</nav> 
    <div class="slider">...</div> 
<div>

Теперь это только для главной страницы, поэтому я полностью смущен тем, как это реализовать. Нужно ли мне ng-view директивы на моей индексной странице? например:

<html> 
    <head> 
    <title>Sample APP</title> 
    </head> 
    <body> 
    <div class="header"> 
     <nav class="pull-right">...</nav> 
     <div class="slider" ng-view>...</div> 
    </div> 

    <div class="main" ng-view> 
    </div> 

    <div class="footer"> 
    </div> 
    </body> 
</html>

Кроме того, если вам нужно знать, почему я делаю это так, то это просто потому, что я купил шаблон HTML онлайн, теперь я пытаюсь интегрировать angularjs в шаблон.

источник

2015-05-04 user3718908

На одной странице будет только один ng-view. Невозможно иметь несколько ng-view. Если вы хотите загрузить другие частичные файлы, вам необходимо использовать директиву ng-include.

Ui-router Лучший вариант, который поддерживает несколько видов, которые могут быть вложены в другие, вы могли бы воспользоваться преимуществами вложенных представлений.

Вы могли бы запрос Params здесь угловыми UI маршрутизатора, как в формате url: '/test?oneParam&twoParam' в то время как эта функция не поддерживается в ng-route

Я хотел бы предложить вам взять ключ от ng-route к ui-route, который имеет большой контроль над url, templates states

источник

2015-05-04 19:42:21

Я так запутался в этом, как проверить, находится ли текущая страница/маршрут/состояние дома и вставить слайдер в мое представление? – user3718908

, вы можете получить доступ к текущему состоянию с помощью службы '$ state', которая будет иметь всю информацию о' state', 'params', url like, если вы делаете' $ state.current.name', укажет имя 'state' & '$ state.params' будет содержать набор параметров, которые присутствуют на маршруте, там есть значения –

. Итак, я помещаю этот код в свой контроллер, но тогда как шаблон слайдера автоматически загружается на мою домашнюю страницу? – user3718908

У вас может быть только один ng-view.

Однако его можно изменить несколькими способами: ng-include, ng-switch или отображать различные контроллеры и шаблоны через routeProvider.

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

example of multiple views using ui-router.

источник

2015-05-04 19:41:30

Это может потребовать слишком много, но поскольку я новичок, могу ли я получить пример того, чего хочу достичь? – user3718908

@ user3718908 просто добавил вам пример. –

Несколько ng-views для главной страницы в angularjs

ответ

Смежные вопросы