javascript - $routeProvider 和 $stateProvider 有什么区别？

Question

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

最佳做法是什么？

Answer 1

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

1。 Angular 路由 - 根据 $routeProvider docs

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

HTML

<div ng-view></div>

Above 标记将从 $routeProvider.when() 条件中渲染模板，您在 angular 的 .config(配置阶段)中提到过

限制:-

• 页面上只能包含单个ng-view
• 如果您的 SPA 在页面上有多个小组件需要根据某些条件进行渲染，则 $routeProvider 会失败。 (为此，我们需要使用 ng-include、ng-switch、ng-if、ng-show 等指令，将它们放在 SPA 中看起来很糟糕)
• 您不能在两条路线之间建立联系，例如父子关系。
• 您不能根据 url 模式显示和隐藏 View 的一部分。

---

2。 ui-router - 根据 $stateProvider docs

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.

多个和命名 View

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

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

HTML

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

ui-router 的主要功能是它可以管理嵌套状态和 View 。

优点

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

For more Information Angular ui-router

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