$ routeProvider和$ stateProvider有什么区别？

Question

请解释之间的差异$routeProvider,并$stateProvider在AngularJS.

哪个是最佳做法？

Answer 1

两者在SPA(单页应用程序)中用于路由目的的工作相同.

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

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

HTML

<div ng-view></div>

上面的标签将根据$routeProvider.when()您在.config角度的(配置阶段)中提到的条件渲染模板

限制: -

• 该页面只能包含单个ng-view页面
• 如果您的SPA在页面上有多个小组件,您希望根据某些条件进行渲染,则会$routeProvider失败.(实现这一目标,我们需要使用类似的指令ng-include,ng-switch,ng-if,ng-show,这看起来不错,让他们在SPA)
• 您不能在两条路线之间建立关系,例如父母和子女关系.
• 您无法根据网址格式显示和隐藏视图的一部分.

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创建hrefURL URL,也可以在json格式中给出状态参数.

有关更多信息Angular ui-router

为了更好地灵活地使用状态的各种嵌套视图,我宁愿你去 ui-router

Answer 2

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

状态绑定到命名,嵌套和并行视图,允许您有力地管理应用程序的界面.

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

因此,即使您决定某天更改网址,您的网址state也会保持不变,只需更改网址即可.config.

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