$routeProvider 和 $stateProvider 有啥区别？

Posted 2023-02-19

【中文标题】$routeProvider 和 $stateProvider 有啥区别？

【英文标题】：What is the difference between $routeProvider and $stateProvider?$routeProvider 和 $stateProvider 有什么区别？

【发布时间】：2015-02-23 01:28:58

【问题描述】：

请解释一下AngularJS中$routeProvider和$stateProvider的区别。

最佳做法是什么？

【参考方案1】：

两者所做的工作与它们在 SPA（单页应用程序）中用于路由目的的工作相同。

1。角度路由 - 每 $routeProvider docs

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

HTML

<div ng-view></div>

上面的标签会根据你在angular的.config（配置阶段）提到的$routeProvider.when()条件渲染模板

限制：-

页面上只能包含单个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 视图。

虽然多个并行视图是一项强大的功能，但您通常可以通过嵌套 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格式的状态参数。

For more Information Angular ui-router

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

【讨论】：

有人能告诉我这个 routeprovider 和 stateprovider 在代码中的区别和等价吗？

@bleykFaust 你在代码中是什么意思？我解释的答案很简单......你不明白哪一部分？

@PankajParkar，我正在使用 routeprovider，我想知道如何将其更改为 stateprovider？

@bleykFaust 那么这不是你应该研究的答案.. 这个答案说明了差异$stateProvider & $routeProvider

能否解决使用路由预加载页面的需求？

【参考方案2】：

Angular 自己的 ng-Router 在路由时会考虑 URLs，UI-Router 除了 URL 之外还会考虑 states。

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

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

因此，即使您决定某天更改您的网址，您的state 将保持不变，您只需更改网址为.config。

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

【参考方案3】：

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