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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Github: https://github.com/angular-ui/ui-router
• Документация:
  • Справочник по API: http://angular-ui.github.io/ui-router/site/#/api
  • Руководство: https://github.com/angular-ui/ui-router/wiki
• Часто задаваемые вопросы: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
• Образец заявки: http://angular-ui.github.io/ui-router/sample/#/

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

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

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

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

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

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

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

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/

ngRoute является частью ядра AngularJS Framework.

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

Вот хорошая статья о настройке / настройке ui-router:

http://www.ng-newsletter.com/posts/angular-ui-router.html

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

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

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

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

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

Угловой 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

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 - она ​​довольно редкая на момент публикации, поскольку реализация еще не завершена. Смотрите здесь больше новостей о том, когда этот модуль будет фактически освобожден.

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

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

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

Основная вещь, которую вы должны знать: ng-router использует $location.path()и ui-router использует$state.go

Отдыхай нам всеми функциями.

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

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

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

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

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

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

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

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

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

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

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

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

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