Я планирую использовать 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-адреса могут меняться.
Существует также концепция decorator, которая может использоваться, чтобы позволить вашим маршрутам динамически создаваться на основе URL, который пытается получить доступ. Это может означать, что вам не нужно будет указывать все ваши маршруты перед началом работы.
states позволяют вам сопоставлять и получать доступ к различной информации о разных состояниях, и вы можете легко передавать информацию между состояниями через $stateParams.
Вы можете легко определить, находитесь ли вы в состоянии или родительском состоянии для настройки элемента пользовательского интерфейса (выделение навигации текущего состояния) в ваших шаблонах с помощью $state, предоставленный ui-router, который вы можете открыть, установив его в $rootScope на run.
По сути, ui-router - это ngRouter с большим количеством функций, под листами это совсем другое. Эти дополнительные функции очень полезны для более крупных приложений.
Дополнительная информация:
ngRoute - это модуль, разработанный командой AngularJS, которая ранее была частью ядра AngularJS.
ui-router - это структура, которая была создана вне проекта AngularJS для улучшения и улучшения возможностей маршрутизации.
От ui-router документация:
AngularUI Router - это схема маршрутизации для AngularJS, которая позволяет вы можете организовать части вашего интерфейса в конечный автомат. В отличие от службы $route в ядре Angular, которая организована вокруг URL-маршруты, UI-Router организован вокруг состояний, которые могут факультативно имеют маршруты, а также другое поведение, прилагаемое.
Государства привязаны к именам, вложенным и параллельным представлениям, что позволяет мощное управление вашим интерфейсом приложений.
Ни один из них не лучше, вам нужно будет выбрать наиболее подходящий для вашего проекта.
Однако, если вы планируете иметь сложные представления в своем приложении, и вы хотели бы иметь дело с понятием "$ state". Я рекомендую вам выбрать ui-router.
ngRoute - это основной модуль angular, который хорош для основных сценариев. Я считаю, что в будущих выпусках они добавят более мощные функции.
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/
Большинство приложений можно разбить на регионы. Как минимум, приложения обычно имеют заголовок, основную область содержимого и нижний колонтитул.
Обычно приложения могут иметь дополнительную боковую панель в левой или правой части страницы, как показано ниже.
В большинстве случаев все эти области (представления) отображаются на странице одновременно. С помощью встроенного маршрутизатора AngularJS ngRoute разрешено только одно представление (ng-view) на странице. Это ограничение заставляет пользователей использовать (ng-include) или другие обходные пути для создания макета или главной страницы для их приложения. UI-Router поддерживает несколько видов, и каждый может иметь свой собственный соответствующий контроллер, чтобы каждый из этих регионов мог быть инкапсулирован и повторно использован во всем приложении, если это необходимо.
Общий пример вложенного представления в приложениях - это мастер/деталь или, более конкретно, страница списка/подробностей. Во многих приложениях отображается список элементов, а затем, когда вы нажимаете на элемент, вы видите детали для этого элемента. Взяв этот пример дальше, вы можете щелкнуть ссылку редактирования при просмотре деталей, которые перейдут к редактируемой форме для элемента (см. Диаграмму ниже для визуализации).
Этот сценарий легко достигается с помощью встроенного маршрутизатора AngularJS ngRoute, если список и детали находятся на отдельных страницах (или представлениях, как они вызывают в AngularJS). Однако, если вы хотите, чтобы список оставался на странице, пока вы показываете детали справа или ниже списка, это становится более сложным.
Чтобы быть ясным, это требование может быть достигнуто с помощью ngRoute путем совместного использования одного представления с двумя контроллерами: один для списка и один для подробностей, а также скрытие и отображение деталей по мере необходимости.
Результат не идеален, потому что мы хотели бы, чтобы список и детали каждого из них имели свой собственный контроллер и отображали только одну ответственность (показывая список или отображая детали элемента). Инкапсулируя эти области пользовательского интерфейса в своем собственном представлении, мы можем иметь более гибкий пользовательский интерфейс, который позволяет нам объединять фрагменты или разбивать их по мере необходимости для удовлетворения требований.
Вложенные представления позволяют нам не только объединить эти представления одновременно, но также и вложить представление в другое представление.
ngRoute является частью основной структуры AngularJS.
ui-router - это библиотека сообщества, которая была создана, чтобы попытаться улучшить возможности маршрутизации по умолчанию.
Вот хорошая статья о настройке/настройке ui-router:
Если вы хотите использовать функциональность вложенных представлений, реализованную в парадигме ngRoute, попробуйте angular-route-segment - она предназначена для расширения ngRoute, а не для его замены.
Обычно ui-router работает на государственном механизме... Его можно понять с помощью простого примера:
Скажем, у нас есть большое приложение музыкальной библиотеки (например,..gaana или saavan или любой другой). И в нижней части страницы у вас есть музыкальный проигрыватель, который используется во всех состояниях страницы.
Теперь позвольте сказать, что вы просто нажимаете на некоторые песни, чтобы играть. В этом случае вместо перезагрузки полной страницы должно измениться только состояние музыкального проигрывателя. Это можно легко обработать с помощью ui-router.
Пока в ngRoute мы просто прикрепляем представление и контроллер.
Angular 1.x
ng-route разработан командой angularJS для маршрутизации.
ng-route: URL-адрес (местоположение).
Пример:
$routeProvider
.when("/home", {
templateUrl : "home.html"
})
ui-router разрабатывается сторонним модулем.
ui-router: маршрутизация на основе состояния
Пример:
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
})
- > ui-router допускает вложенные представления
- > ui-router более мощный, чем ng-route
ngRoute - это модуль, созданный командой Angular, которая обеспечивает базовую функциональность маршрутизации на стороне клиента. Этот модуль обеспечивает довольно мощную базу для маршрутизации и может быть легко построен, чтобы обеспечить надежную маршрутизацию, как показано в этом сообщении в блоге (be обязательно прочитайте комментарий между Уордом Белл и Беном Наделем, автор - они - пара Angular профи)
ui-router переключает фокус с URL-ориентированных маршрутов на "состояния" приложения, которые могут отражаться или не отражаться в URL-адресе.
Основными функциями, добавленными ui-router, являются вложенные состояния и именованные представления.
Вложенные состояния позволяют разделить логику контроллера на различные части приложения. Очень простым примером этого может быть приложение с основной навигацией по верхней части, дополнительный навигационный список слева и контент справа. Без вложенных состояний один контроллер, как правило, должен обрабатывать логику отображения для вторичной навигации, а также контента. Вложенная маршрутизация позволяет отделить эти проблемы.
Именованные виды - еще одна дополнительная функция ui-router. С ngRoute вы можете иметь только одну директиву ngView на странице, тогда как с именованными представлениями в ui-router вы можете указать несколько директив ui-view, а затем каждое состояние может влиять на шаблон и контроллер представлений имен. Супер простым примером этого будет то, что основной контент вашего приложения будет основным видом, а затем также иметь нижний колонтитул, который будет отдельным ui-view. В этом случае контроллер нижнего колонтитула больше не должен прослушивать изменения состояния/маршрута.
Хорошее сравнение ngRoute и ui-router можно найти на этом эпизоде подкаста.
Чтобы сделать вещи более запутанными, следите за новым "официальным" модулем маршрутизации, который команда Angular ожидает выпуска для версий 1.5 и 2.0 Angular. Это заменит модуль ngRoute. Здесь - текущая документация для нового модуля Router - она довольно скудная по сравнению с этой публикацией, так как реализация еще не завершена. Смотрите здесь для получения дополнительных новостей о том, когда этот модуль действительно будет выпущен.
ngRoute - это базовая библиотека маршрутизации, где вы можете указать только один вид и контроллер для любого маршрута.
С помощью ui-router вы можете указать несколько видов, как параллельных, так и вложенных. Поэтому, если вашему приложению требуется (или может потребоваться в будущем) любая сложная маршрутизация/просмотр, тогда идите с ui-router.
Это лучший способ начать работу с маршрутизатором AngularUI.
Основная вещь, которую вы должны знать: ng-router использует $location.path(), а ui-router использует $state.go
Предоставьте нам все возможности.
ui router упрощает вашу жизнь! Вы можете добавить его в приложение 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 организован вокруг состояний, которые могут необязательно иметь маршруты, а также другое поведение, прикрепленное.
ngRoute - это модуль, разработанный командой Angular.js, которая ранее была частью ядра Angular.
ui-router - это структура, которая была создана вне проекта Angular.js для улучшения и улучшения возможностей маршрутизации.
1- ngRoute разрабатывается командой angular, тогда как ui-router является сторонним модулем. 2- ngRoute реализует маршрутизацию на основе URL маршрута, тогда как ui-router реализует маршрутизацию на основе состояния приложения. 3- ui-router обеспечивает все, что обеспечивает ng-route, плюс некоторые дополнительные функции, такие как вложенные состояния и несколько именованных представлений.
ng-View (разработанный командой AngularJS) можно использовать только один раз на страницу, тогда как ui-View (сторонний модуль) можно использовать несколько раз на странице.
ui-View - лучший вариант.