Javascript $routeProvider 和 $stateProvider 有什么区别？

What is the difference between $routeProvider and $stateProvider?

提问by YYY

Please explain the difference between $routeProviderand $stateProviderin AngularJS.

请解释AngularJS$routeProvider和$stateProviderAngularJS之间的区别。

Which is best practice?

哪个是最佳实践？

回答by Pankaj Parkar

Both do the same work as they are used for routing purposes in SPA(Single Page Application).

两者都做同样的工作，因为它们在 SPA（单页应用程序）中用于路由目的。

1. Angular Routing - per $routeProvider docs

1. Angular Routing - 根据$routeProvider 文档

URLs to controllers and views (HTML partials). It watches $location.url() and tries to map the path to an existing route definition.

控制器和视图的 URL（HTML 部分）。它监视 $location.url() 并尝试将路径映射到现有路由定义。

HTML

HTML

<div ng-view></div>

Above tag will render the template from the $routeProvider.when()condition which you had mentioned in .config(configuration phase) of angular

上面的标签将根据$routeProvider.when()您在.configangular 的（配置阶段）中提到的条件呈现模板

Limitations:-

限制：-

• The page can only contain single ng-viewon page
• If your SPA has multiple small components on the page that you wanted to render based on some conditions, $routeProviderfails. (to achieve that, we need to use directives like ng-include, ng-switch, ng-if, ng-show, which looks bad to have them in SPA)
• You can not relate between two routes like parent and child relationship.
• You cannot show and hide a part of the view based on url pattern.

• 该页面只能包含单ng-view页
• 如果您的 SPA 页面上有多个要根据某些条件呈现的小组件，则会$routeProvider失败。（为了实现这一点，我们需要使用像ng-include, ng-switch, ng-if, 之类的指令，ng-show在 SPA 中使用它们看起来很糟糕）
• 您不能在两条路线之间建立关联，例如父子关系。
• 您不能根据 url 模式显示和隐藏视图的一部分。

---

---

2. ui-router - per $stateProvider docs

2. ui-router - 根据$stateProvider 文档

AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.

AngularUI Router 是 AngularJS 的路由框架，它允许您将界面的各个部分组织成一个状态机。UI-Router 是围绕状态组织的，状态可以选择性地附加路由以及其他行为。

Multiple & Named Views

多个和命名视图

Another great feature is the ability to have multiple ui-views in a template.

另一个很棒的功能是能够在模板中拥有多个 ui 视图。

While multiple parallel views are a powerful feature, you'll often be able to manage your interfaces more effectively by nesting your views, and pairing those views with nested states.

虽然多个并行视图是一项强大的功能，但您通常可以通过嵌套views 并将这些视图与嵌套状态配对来更有效地管理您的界面。

HTML

HTML

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

The majority of ui-router's power is it can manage nested state & views.

的大部分ui-router功能是它可以管理嵌套的状态和视图。

Pros

优点

• You can have multiple ui-viewon single page
• Various views can be nested in each other and maintained by defining state in routing phase.
• We can have child & parent relationship here, simply like inheritance in state, also you could define sibling states.
• You could change the ui-view="some"of state just by using absolute routing using @with state name.
• Another way you could do relative routing is by using only @to change ui-view="some". This will replace the ui-viewrather than checking if it is nested or not.
• Here you could use ui-srefto create a hrefURL dynamically on the basis of URLmentioned in a state, also you could give a state params in the jsonformat.

• 您可以ui-view在单个页面上有多个
• 各种视图可以相互嵌套并通过在路由阶段定义状态来维护。
• 我们可以在这里有孩子和父母的关系，就像状态中的继承一样，你也可以定义兄弟状态。
• 您可以ui-view="some"仅通过使用@带状态名称的绝对路由来更改状态。
• 您可以进行相对路由的另一种方法是仅@使用更改ui-view="some". 这将替换ui-view而不是检查它是否嵌套。
• 在这里，您可以根据状态中提到的内容动态ui-sref创建hrefURL URL，也可以在json格式中给出状态参数。

For more Information Angular ui-router

有关更多信息 Angular ui-router

For better flexibility with various nested view with states, I'd prefer you to go for ui-router

为了更好地灵活使用带有状态的各种嵌套视图，我希望您选择 ui-router

回答by Aniket Sinha

Angular's own ng-Router takes URLsinto consideration while routing, UI-Router takes statesin addition to URLs.

Angular 自己的 ng-RouterURLs在路由时会考虑，UI-Routerstates除了 URLs 还要考虑。

States are bound to named, nested and parallel views, allowing you to powerfully manage your application's interface.

状态绑定到命名的、嵌套的和并行的视图，使您能够有力地管理应用程序的界面。

While in ng-router, you have to be very careful about URLs when providing links via <a href="">tag, in UI-Router you have to only keep statein mind. You provide links like <a ui-sref="">. Note that even if you use <a href="">in UI-Router, just like you would do in ng-router, it will still work.

在 ng-router 中，通过<a href="">标签提供链接时必须非常小心 URL ，而在 UI-Router 中，您只需要state记住。您提供类似<a ui-sref="">. 请注意，即使您<a href="">在 UI-Router 中使用，就像您在 ng-router 中所做的一样，它仍然可以工作。

So, even if you decide to change your URL some day, your statewill remain same and you need to change URL only at .config.

因此，即使您决定在某一天更改您的 URL，您的 URL 也state将保持不变，您只需要更改.config.

While ngRouter can be used to make simple apps, UI-Router makes development much easier for complex apps. Here its wiki.

虽然 ngRouter 可用于制作简单的应用程序，但 UI-Router 使复杂应用程序的开发变得更加容易。这是它的维基。

回答by mukesh mali

$route: This is used for deep-linking URLs to controllers and views (HTML partials) and watches $location.url() in order to map the path from an existing definition of route.

$route：这用于将 URL 深层链接到控制器和视图（HTML 部分）并监视 $location.url() 以便从现有的路由定义映射路径。

When we use ngRoute, the route is configured with $routeProvider and when we use ui-router, the route is configured with $stateProvider and $urlRouterProvider.

当我们使用 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'
        });