请解释一下AngularJS中$routeProvider
和$stateProvider
的区别。
最佳做法是什么?
最佳答案
两者所做的工作与它们在 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
关于javascript - $routeProvider 和 $stateProvider 有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27645202/