Чим відрізняється $ routeProvider від $ stateProvider?

Поясніть, будь ласка, різницю між $routeProviderта $stateProviderу AngularJS.

Яка найкраща практика?

Обидва виконують ту саму роботу, що і для маршрутизації в SPA (Single Page Application).

1. Кутова маршрутизація - за документи $ routeProvider

URL-адреса контролерів та представлень (часткові HTML). Він переглядає $ location.url () і намагається зіставити шлях до існуючого визначення маршруту.

HTML

<div ng-view></div>

Наведений вище тег відобразить шаблон із $routeProvider.when()умови, про яку ви згадали .config(фаза конфігурації) кута

Обмеження: -

• Сторінка може містити лише одиничну ng-view на сторінці
• Якщо у вашому SPA є кілька невеликих компонентів на сторінці, які ви хотіли відобразити на основі деяких умов, це $routeProviderне вдається. (Для досягнення цієї мети, ми повинні використовувати директиви , як ng-include, ng-switch, ng-if,ng-show , який виглядає погано , щоб мати їх в SPA)
• Ви не можете зв’язати між двома маршрутами, як стосунки батьків і дитини.
• Ви не можете показувати та приховувати частину представлення даних на основі шаблону URL-адреси.

2. ui-роутер - за документи $ stateProvider

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

Кілька перейменованих імен

Ще одна чудова особливість - це можливість мати кілька шаблонів інтерфейсу у шаблоні.

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

HTML

<div ui-view>
    <div ui-view='header'></div>
    <div ui-view='content'></div>
    <div ui-view='footer'></div>
</div>

Більшість ui-router владних сил полягає в тому, що вона може керувати вкладеними станами та видами.

Плюси

• Ви можете мати кілька ui-view на одній сторінці
• Різні види можуть вкладатись один в одного і підтримувати, визначаючи стан у фазі маршрутизації.
• Тут ми можемо мати стосунки дітей і батьків, як і спадщина в штаті, також ви можете визначити стани братів.
• Ви можете змінити ui-view="some"стан просто за допомогою абсолютної маршрутизації з використанням @імені стану.
• Ще один спосіб відносної маршрутизації - це лише використання @для зміни ui-view="some". Це замість ui-viewзамість перевірки, вкладено це чи ні.
• Тут ви можете використовувати ui-srefдля створення hrefдинамічної URL-адреси на основі URLзгаданого стану, також ви можете надати параметри стану у jsonформаті.

Для отримання додаткової інформації Кутовий ui-роутер

Для кращої гнучкості з різними вкладеними поданнями зі станами, я б вважав за краще вас ui-router

Власний ng-маршрутизатор Angular враховує URLsпід час маршрутизації, UI-маршрутизатор бере statesдодатково до URL-адрес.

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

Перебуваючи в ng-маршрутизаторі, ви повинні бути дуже обережними щодо URL-адрес при наданні посилань за допомогою <a href="">тегів, в UI-маршрутизаторі потрібно пам’ятати лише stateпро це. Ви надаєте посилання на кшталт <a ui-sref="">. Зауважте, що навіть якщо ви використовуєте <a href="">в UI-маршрутизаторі, як і в ng-роутері, він все одно буде працювати.

Отже, навіть якщо ви вирішите змінити свою URL-адресу одного дня, ваш номер stateзалишиться таким же, і вам потрібно буде змінити URL-адресу лише на .config.

Хоча ngRouter можна використовувати для створення простих додатків, UI-Router значно спрощує розробку складних додатків. Ось її вікі.

$ route: Це використовується для глибокого посилання URL-адрес до контролерів та представлень (HTML-частин) та перегляду $ location.url () для того, щоб зіставити шлях із існуючого визначення маршруту.

Коли ми використовуємо ngRoute, маршрут конфігурується з $ routeProvider, а коли ми використовуємо ui-роутер, маршрут конфігурується з $ stateProvider і $ urlRouterProvider.

<div ng-view></div>
    $routeProvider
        .when('/contact/', {
            templateUrl: 'app/views/core/contact/contact.html',
            controller: 'ContactCtrl'
        });


<div ui-view>
    <div ui-view='abc'></div>
    <div ui-view='abc'></div>
   </div>
    $stateProvider
        .state("contact", {
            url: "/contact/",
            templateUrl: '/app/Aisel/Contact/views/contact.html',
            controller: 'ContactCtrl'
        });