如何在 ui-router 中设置具有解析和嵌套状态的 parent/child？

Question

我正在尝试重构我们当前的布局，以在我们页面的 header 上方添加一个动态 show/hide 部分。我们正在使用 Angularjs 1.4.2 和 ui-router，目前我们正在使用单独的路由文件，尽管我们有一条主路由。到目前为止，屏幕的 main.html 部分是唯一具有动态内容的部分。为了让我的新路线工作，我必须将它和主要添加到每条现有路线。

我的问题是，更好的设计是沿着一条 parent 路线来处理解析，动态主要内容的嵌套状态和我的新路线和内容的新视图？随着应用程序的增长，您是否仍然继续将新路由放入 parent 路由，或者是否有更好的方式来组织它，就像我们对单个路由文件或两者的组合所做的那样？

这就是我正在尝试的，但它还没有工作，因为我得到的是一个空白页面，但我正在努力为应用程序的未来发展而设计：

(function () {
    'use strict';

    angular
        .module('myApp')
        .config(config);

    config.$inject = ['$stateProvider'];
    /* @ngInject */
    function config($stateProvider) {
        $stateProvider
            .state('root', {
                template: '<ui-view></ui-view>',
                abstract: true,
                resolve:{
                    myLoader:  ['myLoader', function(myLoader){
                        // $http returns a promise for the url data
                        return myLoader.load();
                    }]
                }
            }
            .state('main'), {
                url: '/?param1&param2&param3&param4',
                templateUrl: 'app/routes/main/main.html',
                controller: 'MainCtrl',
                redirectTo: 'main'
            })  
            $stateProvider
            .state('basicsearch', {
                url: '/basic-search',
                templateUrl: 'app/routes/basicsearch/basicsearch.html',
                controller: 'searchQuickCtrl'
            })
            $stateProvider
            .state('advancedsearch', {
                url: '/advaned-search',
                templateUrl: 'app/routes/advancedsearch/advancedsearch.html',
                controller: 'advancedSearchkCtrl'
            })
            $stateProvider
            .state('anothersearch', {
                url: '/another-search',
                templateUrl: 'app/routes/anothersearch/anothersearch.html',
                controller: 'anotherSearchCtrl'
            })
            .state('myChange', {
                url: '/myChange?param5&param6&param7&param8',
                views: {
                     "myChangeView": {
                         templateUrl: '/app/routes/myChange/myChange.html',
                         controller: 'myChangeCtrl'
                     }
                }

            }); 
    }
})();

这是我们现有的基本布局：

Answer 1

我不确定这个问题。但我 created working plunker 向您展示我们如何使用状态嵌套和解析。

所以这是我们的 parent 根状态控制器和 resolve

中使用的工厂

.factory('myLoader', function(){
  return {
    load: function () {return [1,2] }
  };
})
.controller('ParenCtrl', ['$scope', 'myLoader', function ($scope, myLoader) {
  $scope.myLoader = myLoader;
}])
.controller('MainCtrl', ['$scope', 'myLoader', function ($scope, myLoader) {}])
.controller('searchQuickCtrl', ['$scope', 'myLoader', function ($scope, myLoader) {}])
.controller('advancedSearchkCtrl', ['$scope', 'myLoader', function ($scope, myLoader) {}])
.controller('anotherSearchCtrl', ['$scope', function ($scope) {}])

接下来，我们将使用控制器抽象根状态，将结果分配到范围：

.state('root', {
    template: '<div ui-view></div>',
    abstract: true,
    controller: 'ParenCtrl',
    resolve:{
        myLoader:  ['myLoader', function(myLoader){
            // $http returns a promise for the url data
            return myLoader.load();
        }]
    }
})

所有州都将其用作 parent，并继承范围：

.state('main', {
    parent: 'root',
    url: '/?param1&param2&param3&param4',
    templateUrl: 'app/routes/main/main.html',
    controller: 'MainCtrl',
    //redirectTo: 'main'
})  

.state('basicsearch', {
    url: '/basic-search',
    templateUrl: 'app/routes/basicsearch/basicsearch.html',
    parent: 'root',
    controller: 'searchQuickCtrl'
})

.state('advancedsearch', {
    url: '/advaned-search',
    templateUrl: 'app/routes/advancedsearch/advancedsearch.html',
    parent: 'root',
    controller: 'advancedSearchkCtrl'
})

.state('anothersearch', {
    url: '/another-search',
    parent: 'root',
    templateUrl: 'app/routes/anothersearch/anothersearch.html',
    controller: 'anotherSearchCtrl'
})

并在此视图中正确使用它：

<div >
  <h3>current state name: <var>{{$state.current.name}}</var></h3>

  <h4>resolved in parent</h4>
  <pre>{{myLoader | json }}</pre>

  <h5>params</h5>
  <pre>{{$stateParams | json}}</pre>
  <h5>state</h5>
  <pre>{{$state.current | json}}</pre>

 </div>

虽然所有这些控制器都不使用该解析值

.controller('MainCtrl', ['$scope', 'myLoader', function ($scope, myLoader) {}])
.controller('searchQuickCtrl', ['$scope', 'myLoader', function ($scope, myLoader) {}])
.controller('advancedSearchkCtrl', ['$scope', 'myLoader', function ($scope, myLoader) {}])
.controller('anotherSearchCtrl', ['$scope', function ($scope) {}])

因此，可以为每个控制器提供 parent 中解析的内容（作为参数）。即如上所示。而且，因为 parent 已经使用它并将其分配给某个 $scope 变量......一切都已经准备就绪。

同时检查：

Angularjs ui-router abstract state with resolve
How do I share $scope data between states in angularjs ui-router?

如何在 ui-router 中设置具有解析和嵌套状态的 parent/child？

How to setup a parent/child with a resolve and nested states in ui-router?

angularjs

nested

angular-ui-router

state

angularjs-design-patterns