0

我正在进入 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"
            },

        }
    })
})

这仅适用于嵌套导航的一个级别。如果我在每个级别中有多个链接或项目，这将是一段冗长而混乱的代码。有没有更简洁、更简单的编码方式，这样我就没有所有页面的超长列表以及它们的去向？

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

4

1 回答 1

0

命名视图是可选的，特别是如果你只有一个，我建议使用未命名的视图。您可能应该深入了解 UI 路由器 wiki 和指南。项目主自述文件也刚刚更新。它现在显示了嵌套状态的快速入门示例，这实际上是一个更常用的功能。在大多数情况下，确实不需要多个命名视图。

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

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

于 2013-07-09T21:09:41.397 回答