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

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

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

3 164
javascript angularjs angularjs-routing angular-ui-router

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-представлений в шаблоне.

хотя несколько параллельных представлений являются мощной функцией, вы часто сможете более эффективно управлять своими интерфейсами, вложив свой 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 создать href URL динамически на основе URL упоминается в состоянии, также вы можете дать состояние params в .

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

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

234

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

73

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