Question

我创建了这个应用程序：

var accolade = angular.module('accolade', [
    'ui.router', 
    'personControllers',
    'personFactories'
]);

accolade.config(['$stateProvider', '$urlRouterProvider',      function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.
otherwise('/list');

$stateProvider.state('list', {
    url: '/list',
    resolve: {
        headerFactory:  function(headerFactory) {
            return  headerFactory;
        }
    },
    views: {
        'main': {
            templateUrl: 'partials/list.html',
            controller: 'ListController'
        },
        'header': {
            templateUrl: 'partials/header.html',
            controller: 'HeaderController'
        },
        'breadcrumb': {
            templateUrl: 'partials/breadcrumb.html',
            controller: function($scope) {
                $scope.breadcrumb = ['Home', 'Library', 'Data'];
            }
        },
        'sidebar': {
            templateUrl: 'partials/sidebar.html'
        } 
    }
}).
state('details', {
    url: '/details/:id',
    resolve: {
        headerFactory:  function(headerFactory) {
            return  headerFactory;
        }
    },
    views: {
        'header': {
            templateUrl: 'partials/header.html',
            controller: 'HeaderController'
        },
        'main': {
            templateUrl: 'partials/details.html',
            controller: 'DetailsController'
        },

        'breadcrumb' : {
            templateUrl: 'partials/breadcrumb.html',
            controller: function($scope) {
                $scope.breadcrumb = ['Home', 'Library', 'Details'];
            }
        },
        'sidebar': {
            templateUrl: 'partials/sidebar.html'
        }           
    }
});

}]);

正如你所看到的，有两条路线：/ list和/ details，应用程序运行完美，但我只是在寻找最好的制作视图的方法，正如你所看到的，每次我导航到一条路线时，我们都会重复通过重写相同的视图来获得相同的视图，例如：header是相同的，侧边栏......等等。

Answer 1

您可以创建状态层次结构，只需将详细信息状态设置为应用的子状态

$stateProvider.state('main', {
    url: '/main',
    abstract: true,
    resolve: {
        headerFactory: function(headerFactory) {
            return headerFactory;
        }
    },
    views: {
        'header': {
            templateUrl: 'partials/header.html',
            controller: 'HeaderController'
        },
        'breadcrumb': {
            templateUrl: 'partials/breadcrumb.html',
            controller: function($scope) {
                $scope.breadcrumb = ['Home', 'Library', 'Data'];
            }
        },
        'sidebar': {
            templateUrl: 'partials/sidebar.html'
        }
    }
}).
state('main.list', {
    url: '/list',
    views: {
        'main@main.list': {
            templateUrl: 'partials/list.html',
            controller: 'ListController'
        }
    }
}).
state('main.details', {
    url: '/details/:id',
    views: {
        'main@main.details': {
            templateUrl: 'partials/details.html',
            controller: 'ListController'
        }
    }
});

Answer 2

谢谢，我将我的代码更改为：

$urlRouterProvider.
otherwise('/list');

$stateProvider.
state('home', {
    abstract: true,
    views: {
        'header': {
            templateUrl: 'partials/header.html',
            controller: 'HeaderController'
        },
        'breadcrumb': {
            templateUrl: 'partials/breadcrumb.html',
            controller: function($scope) {
                $scope.breadcrumb = ['Home', 'Library', 'Data'];
            }
        },
        'sidebar': {
            templateUrl: 'partials/sidebar.html'
        }
    }

}).
state('home.list', {
    url: '/list',
    views: {
        'main@': {
            templateUrl: 'partials/list.html',
            controller: 'ListController'
        }
    }
}).
state('home.details', {
    url: '/details/:id',
    views: {
        'main@': {
            templateUrl: 'partials/details.html',
            controller: 'DetailsController'
        }         
    }
});

在我的索引中我有这个：

    <div class="container">
        <div class="row">
            <!-- SideBar -->
            <div ui-view="sidebar" class="col-xs-3 sidebar"></div>
            <!-- /.SideBar -->


            <div class="col-xs-8">
                <!-- Breadcrumb -->
                <div ui-view="breadcrumb" class="pull-right"></div>
                <!-- /.Breadcrumb -->

                <!-- Main Content -->
                <div ui-view="main"></div>
                <!-- /.Main Content -->
            </div>
        </div>
    </div>

问题是我第一次进入应用程序（否则工作正常）但是当试图点击带有详细信息/ id的超链接时，我收到此错误：错误：无法从状态'home解析'详细信息'。列表'，我现在有点困惑!!!

在AngularJS UI-Router中创建视图的最简洁方法是什么？

2 个答案: