В чем разница между $ routeProvider и $ stateProvider?

Пожалуйста, объясните разницу между $routeProviderи $stateProviderв AngularJS.

Что является лучшей практикой?

Оба выполняют ту же самую работу, поскольку они используются для целей маршрутизации в SPA (одностраничное приложение).

1. Угловая маршрутизация - за $ routeProvider docs

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-Router организован вокруг состояний, к которым при желании могут быть привязаны маршруты, а также другое поведение.

Множественные и Именованные Представления

Еще одна отличная особенность - возможность иметь несколько пользовательских интерфейсов в шаблоне.

Несмотря на то, что несколько параллельных представлений являются мощной функцией, вы часто сможете более эффективно управлять своими интерфейсами, viewвкладывая свои и объединяя эти представления с вложенными состояниями.

HTML

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

Большая часть ui-routerсилы России заключается в том, что он может управлять вложенными состояниями и представлениями.

Pros

• Вы можете иметь несколько ui-viewна одной странице
• Различные представления могут быть вложены друг в друга и поддерживаться путем определения состояния на этапе маршрутизации.
• У нас могут быть отношения ребенка и родителя, просто как наследование в состоянии, также вы можете определить родственные состояния.
• Вы можете изменить ui-view="some"состояние, просто используя абсолютную маршрутизацию @с именем состояния.
• Другой способ сделать относительную маршрутизацию - использовать только @изменения ui-view="some". Это заменит ui-viewвместо того, чтобы проверять, является ли он вложенным или нет.
• Здесь вы можете использовать ui-srefдля hrefдинамического создания URL-адреса на основе URLупомянутых в состоянии, а также вы можете указать параметры состояния в jsonформате.

Для получения дополнительной информации Угловой UI-маршрутизатор

Для большей гибкости с различными вложенными представлениями с состояниями, я бы предпочел, чтобы вы пошли на ui-router

Собственный ng-Router от Angular URLsучитывает при маршрутизации UI-Router statesв дополнение к URL-адресам.

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

Находясь в ng-router, вы должны быть очень осторожны с URL при предоставлении ссылок через <a href="">тег, в UI-Router вы должны только stateпомнить. Вы предоставляете ссылки, как <a ui-sref="">. Обратите внимание, что даже если вы используете <a href="">в UI-Router, как и в ng-router, он все равно будет работать.

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

В то время как ngRouter может использоваться для создания простых приложений, UI-Router значительно упрощает разработку сложных приложений. Вот его вики.

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

Когда мы используем ngRoute, маршрут настраивается с помощью $ routeProvider, а когда мы используем ui-router, маршрут настраивается с помощью $ 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'
        });