Angularjs嵌套路由并在视图中加载多个页面答案

【问题标题】：Angularjs nested routing and loading multiple pages within a viewAngularjs嵌套路由并在视图中加载多个页面
【发布时间】：2014-04-22 18:15:53
【问题描述】：

我正在设置一个 angularjs 应用程序，该应用程序具有多个显示在同一页面上的垂直列，并且根据单击的项目，新的或不同的列将展开。

Here's my jsbin example.

您如何建议将其设置为 Angular？是否应该使用带有嵌套子级的 ui-router 进行设置，还是您有更好的建议？例子值得赞赏。

谢谢:)

【问题讨论】：

标签： angularjs angularjs-directive angular-ui angular-ui-router

【解决方案1】：

我认为这是 ui-router 嵌套状态机的一个很好的例子。

我已经找到了一个您可能想要的 ui-router 状态配置示例，以及将数据公开到适当范围的相应控制器的示例。

请注意，这绝对不是完成的代码结构，但它应该能让您很好地了解语法以及如何使用解析的数据等实现嵌套的 ui-router 状态。

代码都是coffeescript。如果你在 javascript 中需要它，这里有一个 transpiler 给你。模板 sn-p 示例为 Jade，here is a jade to html converter

UI-路由器配置

angular
.module 'app', ['ui.router']
.config ($stateProvider) ->
    $stateProvider

        .state 'root',
            url:'/'
            templateUrl: "root.html"
            controller: 'rootCtrl'
            resolve:
                items:(dataService) -> dataService.getPrimary

        .state 'root.primary',
            url:'/{primary}'
            templateUrl: "primary.html"
            controller: 'primaryCtrl'
            resolve:
                items:(dataService, $stateParams) -> 
                    dataService.getSecondary $stateParams.primary

        .state 'root.primary.secondary',
            url:'/{secondary}'
            templateUrl: "secondary.html"
            controller: 'secondaryCtrl'
            resolve:
                items:(dataService, $stateParams) -> 
                    dataService.getTertiary $stateParams.secondary

        .state 'root.primary.secondary.tertiary',
            url:'/{tertiary}'
            templateUrl: "tertiary.html"
            controller: 'tertiaryCtrl'
            resolve:
                content:(dataService, $stateParams) -> 
                    dataService.getContent $stateParams.tertiary

控制器

angular
.module 'app'
.controller 'rootCtrl', ($scope, items) ->
    $scope.primaryItems = items.data

angular
.module 'app'
.controller 'primaryCtrl', ($scope, items) ->
    $scope.secondaryItems = items.data

angular
.module 'app'
.controller 'secondaryCtrl', ($scope, items) ->
    $scope.tertiaryItems = items.data

angular
.module 'app'
.controller 'tertiaryCtrl', ($scope, content) ->
    $scope.content = content.data

root.html

ul
    li(ng-repeat="item in primaryItems track by $index")
        a(ui-sref="root.primary({ primary: '{{item}}'})")

primary.html

ul
    li(ng-repeat="item in secondaryItems track by $index")
        a(ui-sref="root.primary.secondary({ secondary: '{{item}}'})")

【讨论】：

有趣。如何将状态加载到 root.html 模板中并根据单击的不同父级交换出其他模板。
我已更新代码以使其更通用。初始条目 url 将确定初始状态，尽管您将看到主要项目，因为根模板 url='/' 加载它们，因此默认情况下它们始终可用。当用户单击链接时，ui-sref 属性转换到适当的状态（将单击的项目的值作为状态参数传递）。 html 模板需要通过<div ui-view /> 嵌套
添加了code to plnkr，但无法解析。
你写dataService了吗？您将需要编写此服务来提供您需要的实际数据值。上面的代码仅用于说明，它并不打算实际工作，但我希望它能让您了解如何解决问题。祝你好运。
@Jeffrey 我的回答对您有帮助吗？我会很感激你接受答案，或者只是为了努力而投赞成票:-) 谢谢。

【解决方案2】：

Ui-Router 对我来说很有意义...其中一个优点是它可以很好地指定控制器和所有内容，因此您可以将交互式元素添加到下一列。

如果这种类型的东西不重要并且您只想要内容，则可以轻松使用标签。

【讨论】：