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

1. Angular Routing - 根据$routeProvider 文档

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

HTML

<div ng-view></div>

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

限制：-

• 该页面只能包含单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 并将这些视图与嵌套状态配对来更有效地管理您的界面。

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

Angular 自带的 ng-RouterURLs在路由时会考虑，UI-Routerstates除了 URLs 还考虑。

状态绑定到命名的、嵌套的和并行的视图，使您能够有力地管理应用程序的界面。

在 ng-router 中，通过<a href="">标签提供链接时必须非常小心 URL ，而在 UI-Router 中，您只需要state记住。您提供类似<a ui-sref="">. 请注意，即使您<a href="">在 UI-Router 中使用，就像您在 ng-router 中所做的一样，它仍然可以工作。

因此，即使您决定在某一天更改您的 URL，您的 URL 也state将保持不变，您只需要更改.config.

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

$route：这用于将 URL 深层链接到控制器和视图（HTML 部分）并监视 $location.url() 以便从现有的路由定义映射路径。

当我们使用 ngRoute 时，路由是用 $routeProvider 配置的，当我们使用 ui-router 时，路由是用 $stateProvider 和 $urlRouterProvider 配置的。

<div ng-view></div>
    $routeProvider
        .when('/contact/', {
            templateUrl: 'app/views/core/contact/contact.html',
            controller: 'ContactCtrl'
        });


<div ui-view>
    <div ui-view='abc'></div>
    <div ui-view='abc'></div>
   </div>
    $stateProvider
        .state("contact", {
            url: "/contact/",
            templateUrl: '/app/Aisel/Contact/views/contact.html',
            controller: 'ContactCtrl'
        });