$ routeProvider和$ stateProvider有什么区别？

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

哪个是最佳做法？

两者的功能与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）
• 您不能在两条路线之间建立联系，例如父子关系。
• 您无法基于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"仅通过使用@带有状态名称的绝对路由来更改状态。
• 进行相对路由的另一种方法是仅@使用change ui-view="some"。这将代替ui-view而不是检查是否嵌套。
• 在这里，您可以用来根据状态中提到的内容动态ui-sref创建hrefURL URL，也可以使用json格式指定状态参数。

有关更多信息Angular ui-router

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

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中一样，它仍然可以工作。

因此，即使您决定某天更改URL，您的URL state仍将保持不变，并且只需要在处更改URL .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'
        });