Дважды вложенные представления: вкладки UI-Router или UI-Bootstrap/аккордеон?

Я - общий Angular (и JS) nebwie (с большим количеством других навыков разработки s/w, однако).

Я хочу развить что-то вроде этого: (с извинениями перед @PhillipKregg за то, что он заимствовал свою отличную иллюстрацию).

Фактически, мне нужны вложенные записные книжки с записью - строка вкладок (views?), каждая из которых может содержать данные или другую строку вкладок (каждая из которых...).

Googling, похоже, возвращает больше рекомендаций для UI-Router, но я полагаю, что также можно использовать вкладки UI-Bootstrap или Accordion (или даже UI-Bootstrap Pagination с одним представлением, содержимое которого я обновляю в соответствии с выбранной страницей?).

При прочих равных условиях я пойду в любом удобном для новичков понимании и реализации (что это?).

Но есть ли проблемы с производительностью? Например, будет ли загружаться содержимое всех представлений сразу или начальная загрузка страницы (таким образом, увеличится время загрузки начальной страницы)? Будет ли загружать данные только для просмотра, когда он станет активным (что кажется предпочтительным)?

Что-нибудь еще мне нужно рассмотреть?

Заранее благодарим за помощь.

Ответ 1

Да, ui-router и ui-bootstrap.tabs - лучшие инструменты для работы на данный момент. Чтобы сделать что-то подобное, потребуется смешивать два типа конфигурационных шаблонов ui-router, nest views и multiple named views. Я бы предложил прочитать обе страницы wiki:

https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

Вот базовый черновик демонстрации чего-то подобного вашей иллюстрации, используя ui-router и ui-bootstrap.tabs: http://plnkr.co/edit/BUbCR8?p=preview

Самый простой способ начать использовать ng-templateplate https://github.com/ngbp/ngbp, он использует ui-router и имеет лучшую структуру каталогов. Он также решает проблемы производительности, компилируя html в js и добавляя шаблоны в $templateCache, тем самым отбирая множество запросов XHR к бордюру.

Относительно загрузки данных данные, как правило, управляются с помощью экземпляра singleton экземпляра angularJS service, отдельно от любого views. Как и когда вы вызываете любой service из любого view, это ваш выбор. Это довольно хороший учебник по angular услугам: http://www.ng-newsletter.com/posts/beginner2expert-services.html

Ответ 2

Я бы рекомендовал использовать angular $routeProvider для вашей задачи. Это упростит обработку кода и просмотр фрагментов.

С помощью бутстрапа вам нужно будет поместить весь код на одну страницу, и это будет менее управляемо. Посмотрите

http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/ и

Для вложенных представлений

http://www.bennadel.com/blog/2441-Nested-Views-Routing-And-Deep-Linking-With-AngularJS.htm

Также $routeProvider лучше для навигации. Назад Вперед через просмотр...

Angular будет загружать представления по мере необходимости. (Lazy loading.) Так что лучше для производительности...

Надеюсь, это поможет.

Ответ 3

Я лично не понимаю, как использовать загрузочные вкладки с помощью angular ui-router. Это противоречит интуиции. Просто не используйте вкладки начальной загрузки и настройте "суб-вкладки" в конфигурации angular. Это также сделает ваш код более читаемым. Добавляйте только ui-bootstrap, если вам нужны дополнительные функции. Пример конфигурации ниже

  $stateProvider.state('A', {
  url: "/A",
   controller: "testController",
  templateUrl:'pages/A.html'
})    
 .state('A.B', {
  url: "/A/B",
   controller: "testController2",
  templateUrl:'pages/A.B.html'
})