it-swarm.com.ru

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

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

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

168
YYY

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

1. Угловая маршрутизация - на $ 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-роутер - на $ stateProvider документы

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

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

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

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

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 для динамического создания URL-адреса href на основе URL, упомянутого в состоянии, а также вы можете задать параметры состояния в формате json.

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

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

242
Pankaj Parkar

Собственный 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 значительно упрощает разработку сложных приложений. Вот его вики.

73
Aniket Sinha

$ 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'
        });
0
mukesh mali