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

1. Angular Routing - 每个[$routeProvider

文档](https://docs.angularjs.org/api/ngRoute/provider/$routeProvider)

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

HTML

<div ng-view></div>

上面的标签将根据您在 Angular 的（配置阶段）中$routeProvider.when()提到的条件呈现模板.config

限制：-

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

2. ui-router - 每个[$stateProvider 文档](http://angular-ui.github.io/ui-

router/site/#/api/ui.router.state.$stateProvider)

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

多个和命名视图

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

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

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"通过使用@带有状态名称的绝对路由来更改状态。
• 进行相对路由的另一种方法是仅使用@to change ui-view="some"。这将替换ui-view而不是检查它是否嵌套。
• 在这里，您可以使用在状态中提及的基础上动态ui-sref创建URL ，也可以在格式中给出状态参数。href``URL``json

有关更多信息 Angular ui-router

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