$routeProvider 和 $stateProvider 的区别是什么？

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

哪个是最佳实践？

112964 次浏览
小开
最佳答案

它们都执行与 SPA (单页应用程序)中用于路由目的相同的工作。

1. 角度路由-每 $RouteProvider 文档

控制器和视图的 URL (HTML 部分) Url ()并尝试将路径映射到现有路由 定义。

HTML 

<div ng-view></div>

上面的标签将呈现模板从 $routeProvider.when()条件，你已经提到了在 .config(配置阶段)的角度

限制:-

  • 页面上只能包含单个 ng-view
  • 如果您的 SPA 在页面上有多个基于某些条件要呈现的小组件，则 $routeProvider失败。(要做到这一点，我们需要使用指令，如 ng-include，ng-switch，ng-if，ng-show，这看起来很糟糕，有他们在 SPA)
  • 你不能在父母和子女关系这两条路线之间建立联系。
  • 不能基于 URL 模式显示和隐藏视图的一部分。

2. ui-router-per $state Provider docs

AngularUI 路由器是 AngularJS 的路由框架，它允许 您可以将接口的各个部分组织到状态机中。 UI- 路由器是根据状态组织的，这些状态可以选择 路线，以及其他行为，附加。

多个及命名视图

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

虽然多个并行视图是一个强大的特性，但是通过嵌套 view并将这些视图与嵌套状态配对，通常可以更有效地管理接口。

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格式提供状态参数。

有关更多信息，请参阅角度 u- 路由器

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

小开

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

状态绑定到命名视图、嵌套视图和并行视图，允许您有效地管理应用程序的接口。

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

因此，即使你决定改变你的网址有一天，你的 state将保持不变，你需要改变的网址只有在 .config。

虽然 ngRouter 可以用来制作简单的应用程序，但是 UI-Router 使得复杂应用程序的开发更加容易

小开

$path: 这用于将 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'
});

提交答案