1。角度路由 - 每$routeProvider docs

控制器和视图的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路由器是AngularJS的路由框架，它允许您可以将界面的各个部分组织到状态机中。 UI-Router围绕状态进行组织，可以选择具有附加路线以及其他行为。

多个＆amp;命名视图

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

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

HTML

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

ui-router的大部分权力是它可以管理嵌套状态＆amp;视图。

<强>赞成

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

For more Information Angular ui-router

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

Answer 2

Angular自己的ng-Router在路由时需要URLs，除了URL之外，UI-Router还需要states。

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

在ng-router中，在通过<a href="">标记提供链接时必须非常小心，在UI-Router中，您必须记住state。您提供<a ui-sref="">等链接。请注意，即使您在UI-Router中使用<a href="">，就像在ng-router中一样，它仍然有效。

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

虽然ngRouter可用于制作简单的应用程序，但UI-Router可使复杂的应用程序更容易开发。这是wiki.

Answer 3

$ 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'
        });

$ routeProvider和$ stateProvider有什么区别？

3 个答案:

1。角度路由 - 每$routeProvider docs

2。 ui-router - 每$stateProvider docs