Яка різниця між кутом-маршрутизатором і angular-ui-router?

Я планую використовувати AngularJS у своїх великих програмах. Тому я зараз знаходжу правильні модулі для використання.

Яка різниця між модулями ngRoute (angular-route.js) та ui-router (angular-ui-router.js) ?

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

Який модуль слід використовувати для кращої керованості та розширення?

ui-роутер є стороннім модулем і дуже потужний. Він підтримує все, що може зробити звичайний ngRoute, а також безліч додаткових функцій.

Ось декілька поширених причин, що для ngRoute обраний інтерфейс маршрутизатора:

• ui-роутер дозволяє створювати вкладені подання та кілька іменованих представлень . Це дуже корисно для більшої програми, де у вас можуть бути сторінки, які успадковуються з інших розділів.

• ui-роутер дозволяє вам зв’язувати сильний тип між станами на основі імен держав. Зміна URL-адреси в одному місці буде оновлювати кожне посилання на цей стан під час створення ваших посилань ui-sref. Дуже корисно для великих проектів, де URL-адреси можуть змінюватися.

• Існує також концепція декоратора, за допомогою якої можна динамічно створювати ваші маршрути на основі URL-адреси, до якої намагаються отримати доступ. Це може означати, що вам не потрібно буде вказувати всі ваші маршрути заздалегідь.

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

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

По суті, ui-роутер - це 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-роутер - це рамка, створена поза проектом AngularJS для вдосконалення та розширення можливостей маршрутизації.

Через інтерфейсу маршрутизатора документації :

AngularUI Router - це схема маршрутизації для AngularJS, яка дозволяє організувати частини вашого інтерфейсу в стан машини. На відміну від послуги $ route у Angular core, яка організована навколо URL-маршрутів, UI-маршрутизатор організований навколо станів, до яких необов'язково можуть бути додані маршрути, а також інша поведінка.

Штати прив’язані до іменованих, вкладених та паралельних переглядів, що дозволяє вам ефективно керувати інтерфейсом програми.

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

Однак якщо ви плануєте мати складні погляди у своїй заяві, і ви хочете мати справу з поняттям "$ state". Я рекомендую вам обрати ui-роутер.

ngRoute - це кутовий основний модуль, який підходить для базових сценаріїв. Я вірю, що вони додадуть більш потужні функції у майбутніх випусках.

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

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

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

Деякі відмінності між ui-роутером та ngRoute

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

ngRoute є частиною основної структури AngularJS.

ui-роутер - це бібліотека спільноти, створена для спроби вдосконалити можливості маршрутизації за замовчуванням.

Ось хороша стаття про налаштування / налаштування ui-роутера:

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

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

Загалом, ui-роутер працює над механізмом стану ... Це можна зрозуміти на простому прикладі:

Скажімо, у нас є велике застосування музичної бібліотеки (наприклад, .. гаана, сааван чи будь-яка інша). А внизу сторінки у вас є музичний плеєр, який поділяється в усьому стані сторінки.

Тепер скажімо, що ви просто натисніть на деякі пісні, щоб відтворити. У цьому випадку змінити лише стан музичного плеєра, а не перезавантажувати повну сторінку. З цим можна легко впоратися за допомогою ui-роутера.

Перебуваючи в ngRoute, ми просто прикріплюємо подання та контролер.

Кутовий 1.x

ng-route :

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

ng-route: маршрутизація на основі url (Location).

Наприклад:

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

ui-маршрут :

ui-роутер розробляється стороннім модулем.

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

Наприклад:

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

-> ui-роутер дозволяє вкладати перегляди

-> ui-роутер більш потужний, ніж ng-route

ng-router , ui-router

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

ui-роутер зміщує фокус із маршрутів, орієнтованих на URL, на додатки "стани", які можуть бути або не відображатись у URL-адресі.

Основні функції, додані ui-роутером, - це вкладені стани та названі представлення.

Вкладені стани дозволяють розділяти логіку контролера для різних фрагментів програми. Дуже простим прикладом цього може бути додаток з первинною навігацією вгорі, вторинним навігаційним списком ліворуч та вмістом праворуч. Без вкладених станів одному контролеру, як правило, доведеться обробляти логіку відображення для вторинної навігації, а також вмісту. Вкладені маршрутизації дозволяють розділити ці проблеми.

Іменовані види - ще одна додаткова функція ui-роутера. За допомогою ngRoute ви можете мати лише одну директиву ngView на сторінці, тоді як з іменованими представленнями в ui-маршрутизаторі ви можете вказати кілька директив перегляду ui-перегляду, і тоді кожен стан може впливати на шаблон і контролер представлень імен. Надзвичайно простим прикладом цього є те, щоб основний вміст вашої програми був основним видом, а потім також була смуга нижнього колонтитула, яка була б окремим переглядом інтерфейсу. У цьому випадку контролеру колонтитула більше не потрібно слухати зміни стану / маршруту.

Гарне порівняння ngRoute та ui-роутера можна знайти в цьому епізоді подкастів .

Щоб зробити речі більш заплутаними, слідкуйте за новим "офіційним" модулем маршрутизації, який очікує випуск команди Angular для версій 1.5 та 2.0 Angular. Це буде заміною модуля ngRoute. Ось поточна документація для нового модуля маршрутизатора - вона є досить рідкою, ніж ця публікація, оскільки реалізація ще не завершена. Подивіться тут, щоб дізнатися більше про те, коли цей модуль буде фактично випущений.

ngRoute - це основна бібліотека маршрутизації, де ви можете вказати лише один вид і контролер для будь-якого маршруту.

За допомогою ui-роутера ви можете вказати кілька переглядів, як паралельних, так і вкладених. Отже, якщо вашій програмі потрібен (або може знадобитися в майбутньому) будь-який складний спосіб маршрутизації / перегляду, тоді продовжуйте користуватися ui-роутером.

Це найкраще керівництво для початку маршрутизатора AngularUI.

Основне, що ви повинні знати: ng-роутер $location.path()і ui-маршрутизатор$state.go

Відпочиньте нам усі функції.

інтерфейс маршрутизатора полегшує ваше життя! Ви можете додати його до програми AngularJS, ввівши його у свої програми ...

ng-route поставляється як частина основного AngularJS, тому він простіший і надає менше можливостей ...

Подивіться тут, щоб краще зрозуміти ng-route: https://docs.angularjs.org/api/ngRoute

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

ng-ui-роутер відрізняється, але:

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

AngularUI Router - це схема маршрутизації для AngularJS, яка дозволяє організувати частини вашого інтерфейсу в стан машини. На відміну від послуги маршруту $ в модулі Angular ngRoute, який організований навколо URL-маршрутів, UI-маршрутизатор організований навколо станів, до яких необов'язково можуть бути додані маршрути, а також інша поведінка.

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

ngRoute - це модуль, розроблений командою Angular.js, який раніше був частиною ядра Angular.

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

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

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

ui-View тому найкращий варіант.