$ routeProvider和$ stateProvider有什么区别？

Question

请解释AngularJS $routeProvider和之间的区别$stateProvider。

哪个是最佳做法？

Answer 1

两者的功能与SPA（单页应用程序）中用于路由目的的功能相同。

1.角路由-每个[$

routeProvider文档](https://docs.angularjs.org/api/ngRoute/provider/$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）
• 您不能在两条路线之间建立联系，例如父子关系。
• 您无法基于URL模式显示和隐藏视图的一部分。

2. ui- [router-](http://angular-ui.github.io/ui-

router/site/#/api/ui.router.state.$stateProvider)每个$
stateProvider文档

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"仅通过使用@带有状态名称的绝对路由来更改状态。
• 进行相对路由的另一种方法是仅@使用change ui-view="some"。这将代替ui-view而不是检查是否嵌套。
• 在这里，您可以用来根据状态中提到的内容动态ui-sref创建hrefURL URL，也可以使用json格式指定状态参数。

有关更多信息Angular ui-router

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