angularjs – 具有多个ui视图的多模块嵌套ui-router

我正在研究基于Angular和Angular UI路由器的复杂UI架构.我正在尝试在多个模块上定义具有嵌套ui-views的路由.

这是我正在尝试做的事：http://plnkr.co/edit/sxJOPQAgyEZfcYfUReGR?p=preview

这里的文件：

的index.html

<body ng-app="app">
    <h1 ui-view="title"></h1>
    <div ui-view="sidebar1"></div>
    <ul ui-view="sidebar2"></ul>
    <div ui-view="content"></div>
</body>

app.js

angular
.module('app',['ui.router','page1'])
.config(['$locationProvider','$stateProvider','$urlRouterProvider',function ($locationProvider,$stateProvider,$urlRouterProvider) {
    $locationProvider.html5Mode(true);
    $stateProvider.state({
      name: "page1",url: "/page1",abstract: true
    });
    $urlRouterProvider.otherwise('/page1');
}]);

page1.js

angular
.module('page1',['ui.router'])
.config(function ($stateProvider) {
    $stateProvider.state({
        name: 'page1.main',views: {
            title: {
                template: "My Title"
            },sidebar1: {
                template: "<ul><li ng-repeat='item on items'>{{item}}</li></ul>",controller: function($scope) {
                    $scope.items = ['foo1','bar1'];
                }
            },sidebar2: {
                template: "<ul><li ng-repeat='item on items'></li></ul>",controller: function($scope) {
                    $scope.items = ['foo2','bar2'];
                }
            },content: {
                template: "<div ng-repeat='one in many'>{{one}}</div>",resolve: {
                    stuff: function () { 
                        return [1,2,3,4,5] 
                    }
                },controller: function($scope,stuff) {
                    $scope.many = stuff;
                }
            }
         }
    });
});

我错过了什么？

非常感谢提前.

解决方法

我做了一些改动,让它运行 here.

首先,正如doc：Abstract States中所定义的那样,必须定义一个抽象状态的子状态,即必须定义一些url(这将帮助ui-router找出要使用的状态…抽象父进程无法访问)

$stateProvider.state({
名称：’page1.main’,
url：’/ main’,

并且默认路由更改为：

$urlRouterProvider.otherwise('/page1/main');

最重要的是使用正确的ui-view命名：

$stateProvider.state({
    name: 'page1.main',url : '/main',views: {
            "title@": {
                template: "My Title"
            },"sidebar1@": {
                template: "<ul><li ng-repeat='item on items'>{{item}}</li></ul>","sidebar2@": {
                template: "<ul><li ng-repeat='item in items'>{{item}}</li></ul>","content@": {
            ...

我们可以看到,视图名称后缀为@,这意味着：在顶部根,未命名视图(通常是index.html)中搜索它们

来自doc的一小段摘录：

///////////////////////////////////////////////////////
    // Absolute targeting using '@'                      //
    // Targets any view within this state or an ancestor //
    ///////////////////////////////////////////////////////

    // Absolutely targets the 'info' view in this state,'contacts.detail'.
    // <div ui-view='info'/> within contacts.detail.html
    "info@contacts.detail" : { }

    // Absolutely targets the 'detail' view in the 'contacts' state.
    // <div ui-view='detail'/> within contacts.html
    "detail@contacts" : { }

    // Absolutely targets the unnamed view in parent 'contacts' state.
    // <div ui-view/> within contacts.html
    "@contacts" : { }

工作plunker.

编辑：如何在URL中保留/ page1

由于(几乎)总是使用ui-router,我们可以给我们这种行为.诀窍是,重置url评估以在根级别开始 – 即使是对于子级(没有父URL部分).这可以通过一个神奇的“^”符号完成

$stateProvider.state({
    name: 'page1.main',url : '^/page1',views: {
       ....

这是doc：

> Absolute Routes (^)(引用)

If you want to have absolute url matching,then you need to prefix your url string with a special symbol ‘^’.

这是working plunker

angularjs – 具有多个ui视图的多模块嵌套ui-router

解决方法

相关文章