有没有一种更清洁的方法将ui嵌套路由与ui路由器一起使用？

Question

我正在学习Angular，并发现了它的多种出色用途。 我使用Angular UI-Router为客户端构建了自定义导航。 这很简单，但是我想知道是否有一种“更清洁”的简化方法可以做到这一点。

这是我目前正在使用的代码：

angular.module('website', ['ui.state']).     
config(function($stateProvider, $routeProvider){
$stateProvider
    .state('index', {
        url: "", // root route
        views: {
            "viewA": {
                templateUrl: "partials/home.html"
            },

        }
    })
    .state('route1', {
        url: "/route1",
        views: {
            "viewA": {
                templateUrl: "partials/sticks.html"
            },
        }
    })
    .state('route2', {
        url: "/route2",
        views: {
            "viewA": {
                templateUrl: "partials/apparel.html"
            },

        }
    })
    .state('route3', {
        url: "/route3",
        views: {
            "viewA": {
                templateUrl: "partials/bauer.html"
            },

        }
    })
     .state('route4', {
        url: "/route4",
        views: {
            "viewA": {
                templateUrl: "partials/bauer-vapor.html"
            },

        }
    })
})

这仅适用于嵌套导航上的一个级别。 如果我在每个级别中都有多个链接或项目，那么这将是一段冗长，混乱的代码。 有没有更简洁，更轻松的代码编写方式，因此我没有所有页面及其去向的超长列表？

我可以这样做，我只是认为必须有一种更好，更清洁的方法来做到这一点。

Answer 1

命名视图是可选的，尤其是在您只有一个视图的情况下，我建议使用未命名的视图。 您可能应该更深入地研究UI路由器Wiki和指南。 项目的主要自述文件也已更新。 现在，它显示了一个嵌套状态的快速入门示例，它实际上是更常用的功能。 在大多数情况下，实际上并不需要多个命名视图。

本质上，您将把每个状态声明缩短为：

.state（'route3'，{url：“ / route3” templateUrl：“ partials / bauer.html”}）