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

Ответ 1

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

1. Angular Маршрутизация - за $routeProvider docs

URL-адреса контроллеров и представлений (частичные части HTML). Он смотрит $location.url() и пытается сопоставить путь к существующему маршруту определение.

HTML

<div ng-view></div>

Вышеуказанный тег будет отображать шаблон из условия $routeProvider.when(), которое вы упомянули в .config (фаза конфигурации) angular

Ограничения: -

• Страница может содержать только один ng-view на странице
• Если ваш SPA имеет несколько небольших компонентов на странице, которую вы хотите отобразить на основе некоторых условий, $routeProvider терпит неудачу. (для этого нам нужно использовать такие директивы, как ng-include, ng-switch, ng-if, ng-show, которые выглядят плохо, чтобы иметь их в SPA)
• Вы не можете связываться между двумя маршрутами, такими как отношения между родителями и дочерними элементами.
• Вы не можете отображать и скрывать часть представления на основе шаблона url.

2. ui-router - за $stateProvider docs

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

Несколько и именованные виды

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

Pros

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

Дополнительная информация Angular ui-router

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

Ответ 2

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

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

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

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

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