В чем разница между angular-route и angular-ui-router?


1080

Я планирую использовать AngularJS в своих больших приложениях. Так что я нахожусь в процессе, чтобы найти правильные модули для использования.

В чем разница между модулями ngRoute (angular-route.js) и ui-router (angular-ui-router.js) ?

Во многих статьях, когда используется ngRoute , маршрут настраивается с помощью $ routeProvider . Однако, при использовании с ui-router , маршрут настраивается с помощью $ stateProvider и $ urlRouterProvider .

Какой модуль следует использовать для лучшей управляемости и расширяемости?


11
не говоря уже о новом роутере angular в 1.4+ и 2.0
Зак Лисобей

Ответы:


1112

ui-router - сторонний модуль и очень мощный. Он поддерживает все, что может делать обычный ngRoute, а также множество дополнительных функций.

Вот несколько общих причин, по которым ui-router выбран вместо ngRoute:

  • ui-router позволяет использовать вложенные представления и множественные именованные представления . Это очень полезно для больших приложений, где у вас могут быть страницы, которые наследуются от других разделов.

  • ui-router позволяет вам иметь сильную связь между состояниями на основе имен состояний. Изменение URL-адреса в одном месте приведет к обновлению каждой ссылки до этого состояния при создании ссылок с помощью ui-sref. Очень полезно для больших проектов, где URL могут измениться.

  • Существует также концепция декоратора, которая может использоваться для динамического создания ваших маршрутов на основе URL-адреса, который пытается получить доступ. Это может означать, что вам не нужно будет указывать все маршруты заранее.

  • Состояния позволяют вам отображать и получать доступ к различной информации о разных состояниях, и вы можете легко передавать информацию между состояниями через $stateParams.

  • Вы можете легко определить , если вы в состоянии или родителе состояния для настройки пользовательского интерфейса элемента (подсветка навигации текущего состояния) в шаблонах с помощью $stateобеспечиваются Ui-маршрутизатор , который можно выставить с помощью установки его в $rootScopeна run.

По сути, ui-router является ngRouter с большим количеством функций, под листами он совсем другой. Эти дополнительные функции очень полезны для больших приложений.

Больше информации:


134
В целом, это лучшее объяснение, но для одного ключевого момента: «В целом, ui-router является ngRouter с большим количеством функций». Это гораздо более фундаментально: ngRouteпросто позволяет назначать контроллеры и шаблоны для URL-маршрутов, тогда как фундаментальная абстракция в ui.routerэто состояния, что является более мощной концепцией.
Нейт Абеле

23
Для некоторых было бы уместно указать на разницу в размере файла в этом ответе. На данный момент ngRoute: 35,9 КБ / 4,4 КБ / 2,5 КБ и ui-router: 162,9 КБ / 30,4 КБ / 11,6 КБ (не минимизировано / минифицировано / распаковано).
Алекс Росс

35
Мы серьезно обеспокоены 162kb в 2015 году?
Сом

27
Почему не @Catfish? Есть много мест в мире с плохим интернет-соединением, беспокоиться об этом очень важно!
Бруно Казали

4
@ tfrascaroli Я не согласен - если пользователь загружает ваше приложение впервые, время загрузки страницы сильно коррелирует с показателями отказов . Я определенно рассмотрел бы соотношение цена / качество, прежде чем добавить еще 130 КБ на страницу.
Энтони Мэннинг-Франклин

131

ngRoute - это модуль, разработанный командой AngularJS, который ранее был частью ядра AngularJS.

ui-router - это инфраструктура, созданная вне проекта AngularJS для улучшения и расширения возможностей маршрутизации.

Из-интерфейса маршрутизатора документации :

AngularUI Router - это инфраструктура маршрутизации для AngularJS, которая позволяет вам организовать части вашего интерфейса в конечный автомат. В отличие от службы $ route в ядре Angular, которая организована вокруг URL-маршрутов, UI-Router организован вокруг состояний, к которым при желании могут быть прикреплены маршруты, а также другое поведение.

Состояния связаны с именованным, вложенным и параллельным представлениями, что позволяет вам эффективно управлять интерфейсом вашего приложения.

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

Однако, если вы планируете иметь сложные представления в своем приложении и хотели бы иметь дело с понятием «$ state». Я рекомендую вам выбрать ui-router.


1
Я только что провел довольно много часов, стуча головой об ui-router за angularjs. Документация находится в ОЧЕНЬ плачевном состоянии, она явно оставлена ​​заброшенной в течение многих лет. Неработающие ссылки на важные руководства, неправильно названные пакеты nuget в руководстве, вы называете это. В конце концов я сдался после того, как не смог разобраться в этой проблеме stackoverflow.com/questions/23585065/… (наряду с, по-видимому, многими другими людьми). Попробуем ngRoute сейчас ...
UnionP

71

ngRoute - это угловой модуль, который подходит для базовых сценариев. Я верю, что они добавят более мощные функции в будущих выпусках.

URL: https://docs.angularjs.org/api/ngRoute

Ui-router является дополнительным модулем, который преодолевает проблемы ngRoute. В основном вложенные / сложные представления.

URL: https://github.com/angular-ui/ui-router

Некоторая разница между ui-router и ngRoute

http://www.amasik.com/angularjs-ngroute-vs-ui-router/

введите описание изображения здесь



35

Если вы хотите использовать функциональность вложенных представлений, реализованную в парадигме ngRoute, попробуйте angular-route-сегмент - он направлен на расширение ngRoute, а не на его замену.


16
Я не вижу актуальности вашего ответа. Автор специально спросил о различиях между angular-route и angular-ui-router. Кроме того, заявление о том, что вы являетесь создателем, будет полезно при продвижении ваших собственных библиотек.
vially

23
Релевантность проста: angular-route + angular-route-сегмента = angular-ui-router. Итак, разница в следующем: angular-ui-router - angular-route = angular-route-сегмента :)
artch

1
Я думаю, что это правильный ответ. angular-route-segment.com , безусловно, хороший выбор для тех, кто не хочет использовать накладные расходы на использование UI-маршрутизатора. Кроме того, @vially, люди усердно работают над созданием этих библиотек, это неплохо для их продвижения
Фил

19

Обычно ui-router работает на механизме состояния ... Это можно понять на простом примере:

Допустим, у нас есть большое приложение музыкальной библиотеки (например, .gaana или saavan или любой другой). А внизу страницы у вас есть музыкальный проигрыватель, который используется для всех состояний страницы.

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

В то время как в ngRoute мы просто прикрепляем представление и контроллер.


2
это может быть сделано и должно быть сделано с использованием услуг и заводов. Использование этого пакета - отсутствие понимания угловых маршрутов, состояний и схем. Состояния обрабатываются URL-адресом, что является правильным, если вы хотите предоставить общий доступ к приложению в конкретном состоянии, более того, вы можете иметь несколько контроллеров в одном представлении, которые реагируют на обновление данных службы или параметр URL-адреса. UI-роутер все испортил и полностью уничтожил угловой шаблон.
Пабло Эзекьель Леоне

Я полностью согласен.
До

18

Угловой 1.x

нг-маршрут :

ng-route разработан командой angularJS для маршрутизации.

ng-route: маршрутизация на основе URL (местоположение).

Пример:

$routeProvider
    .when("/home", {
        templateUrl : "home.html"
    })

UI-маршрут :

UI-роутер разрабатывается сторонним модулем.

ui-router: маршрутизация на основе состояния

Пример:

 $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home.html'
        })

-> UI-маршрутизатор допускает вложенные представления

-> UI-роутер более мощный, чем NG-Route

ng-router , ui-router


13

ngRoute - это модуль, созданный командой Angular, который обеспечивает базовые функциональные возможности маршрутизации на стороне клиента. Этот модуль обеспечивает довольно мощную основу для маршрутизации, и его можно довольно легко создать, чтобы обеспечить надежную функциональность маршрутизации, как показано в этом сообщении в блоге (обязательно прочитайте раздел комментариев между Уордом Беллом и Беном Наделем, автором - они являются пара угловых плюсов)

ui-router смещает фокус с URL-ориентированных маршрутов на «состояния» приложения, которые могут отражаться или не отражаться в URL.

Основные функции, добавленные ui-router, - это вложенные состояния и именованные представления.

Вложенные состояния позволяют вам разделить логику контроллера для различных частей приложения. Очень простым примером этого может быть приложение с первичной навигацией вверху, вторичным навигационным списком слева и контентом справа. Без вложенных состояний один контроллер обычно должен обрабатывать логику отображения для вторичной навигации, а также контент. Вложенная маршрутизация позволяет разделить эти проблемы.

Именованные представления - еще одна дополнительная функция ui-router. С помощью ngRoute вы можете иметь только одну директиву ngView на странице, тогда как с помощью именованных представлений в ui-router вы можете указать несколько директив ui-view, и тогда каждое состояние может влиять на шаблон и контроллер представлений имен. Очень простым примером этого было бы иметь основное содержимое вашего приложения в качестве основного представления, а затем также иметь панель нижнего колонтитула, которая будет отдельным представлением пользовательского интерфейса. В этом случае контроллер нижнего колонтитула больше не должен прослушивать изменения состояния / маршрута.

В этом эпизоде подкастов можно найти хорошее сравнение ngRoute и ui-router .

Просто, чтобы сделать вещи более запутанными, следите за новым «официальным» модулем маршрутизации, который команда Angular планирует выпустить для версий 1.5 и 2.0 Angular. Это заменит модуль ngRoute. Вот текущая документация для нового модуля Router - она ​​довольно редкая на момент публикации, поскольку реализация еще не завершена. Смотрите здесь больше новостей о том, когда этот модуль будет фактически освобожден.


11

ngRoute - это базовая библиотека маршрутизации, в которой вы можете указать только один вид и контроллер для любого маршрута.

С помощью ui-router вы можете указать несколько представлений, как параллельных, так и вложенных. Поэтому, если вашему приложению требуется (или может потребоваться в будущем) какой-либо сложный способ маршрутизации / просмотра, тогда переходите к пользовательскому интерфейсу.

Это лучшее руководство по началу работы для AngularUI Router.



8

UI роутер сделает вашу жизнь проще! Вы можете добавить его в свое приложение AngularJS, внедрив его в свои приложения ...

ng-route входит в состав ядра AngularJS, так что это проще и дает вам меньше возможностей ...

Посмотрите здесь, чтобы лучше понять ng-route: https://docs.angularjs.org/api/ngRoute

Также при использовании не забудьте использовать: ngView ..

ng-ui-router отличается, но:

https://github.com/angular-ui/ui-router, но дает вам больше возможностей ....


6

AngularUI Router - это инфраструктура маршрутизации для AngularJS, которая позволяет вам организовать части вашего интерфейса в конечный автомат. В отличие от службы $ route в модуле Angular ngRoute, которая организована вокруг URL-маршрутов, UI-Router организован вокруг состояний, к которым при желании могут быть прикреплены маршруты, а также другое поведение.

https://github.com/angular-ui/ui-router


4

ngRoute - это модуль, разработанный командой Angular.js, который ранее был частью ядра Angular.

ui-router - это фреймворк, созданный вне проекта Angular.js для улучшения и расширения возможностей маршрутизации.


3

1-ngRoute разработан angular team, тогда как ui-router является сторонним модулем. 2-ngRoute реализует маршрутизацию на основе URL-адреса маршрута, тогда как ui-router реализует маршрутизацию на основе состояния приложения. 3-ui-router предоставляет все, что обеспечивает ng-route, плюс некоторые дополнительные функции, такие как вложенные состояния и несколько именованных представлений.


0

ng-View(разработанный командой AngularJS) можно использовать только один раз на страницу, тогда как ui-View(сторонний модуль) можно использовать несколько раз на страницу.

ui-View Поэтому это лучший вариант.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.