$routeProvider 和 $stateProvider 有什么区别? [英] What is the difference between $routeProvider and $stateProvider?

问题描述

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

最佳实践是什么?

解决方案

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

1.Angular Routing - 根据 $routeProvider 文档

<块引用>

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

HTML

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

限制:-

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

<小时>

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

<块引用>

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

多个 &命名视图

另一个很棒的功能是能够在一个模板中拥有多个 ui-views.

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

HTML

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

ui-router 的主要功能是它可以管理嵌套状态 &视图.

优点

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

有关 Angular ui-router 的更多信息

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

Please explain the difference between $routeProvider and $stateProvider in AngularJS.

Which is best practice?

解决方案

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

1. Angular Routing - per $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 tag will render the template from the $routeProvider.when() condition which you had mentioned in .config (configuration phase) of angular

Limitations:-

• The page can only contain single ng-view on page
• If your SPA has multiple small components on the page that you wanted to render based on some conditions, $routeProvider fails. (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.

---

2. ui-router - per $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.

Multiple & Named Views

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

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.

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.

Pros

• You can have multiple ui-view on 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-view rather than checking if it is nested or not.
• Here you could use ui-sref to create a href URL dynamically on the basis of URL mentioned in a state, also you could give a state params in the json format.

For more Information Angular ui-router

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

这篇关于$routeProvider 和 $stateProvider 有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！