В чем разница между $routeProvider и $stateProvider?
Пожалуйста, объясните разницу между $routeProvider
и $stateProvider
в AngularJS.
что является лучшей практике?
3 ответа:
оба делают ту же работу, что и они используются для целей маршрутизации в SPA(одностраничное приложение).
1. Угловая маршрутизация-за $routeProvider docs
URL-адреса контроллеров и представлений (HTML partials). Он наблюдает $расположение.url () и пытается сопоставить путь к существующему маршруту определение.
HTML
<div ng-view></div>
над тегом будет отображаться шаблон из
$routeProvider.when()
состояние, о котором вы упомянули в.config
(фаза конфигурации) угловойограничения:-
- страница может содержать только один
ng-view
на странице- если ваш спа-центр имеет несколько небольших компонентов на странице, которую вы хотите отобразить на основе некоторых условий,
$routeProvider
не удается. (для этого нам нужно использовать директивы типаng-include
,ng-switch
,ng-if
,ng-show
, который выглядит плохо, чтобы иметь их в СПА)- вы не может относиться между двумя маршрутами, как родительские и дочерние отношения.
- вы не можете показать и скрыть часть представления на основе шаблона url.
2. ui-router-per $stateProvider docs
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
упоминается в состоянии, также вы можете дать состояние params в .для получения дополнительной информации Угловой пользовательского интерфейса маршрутизатора
для лучшей гибкости с различными вложенными представлениями с состояниями, я бы предпочел, чтобы вы пошли на
ui-router
собственный ng-маршрутизатор Angular принимает
URLs
во внимание при маршрутизации, UI-маршрутизатор принимает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 partials) и наблюдает за $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' });