Question

我正在研究基于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;
                }
            }
         }
    });
});

我错过了什么？

提前多多感谢。

Answer 1

我做了一些更改，并让它运行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>",
                controller: function($scope) {
                    $scope.items = ['foo1', 'bar1'];
                }
            },
            "sidebar2@": {
                template: "<ul><li ng-repeat='item in items'>{{item}}</li></ul>",
                controller: function($scope) {
                    $scope.items = ['foo2', 'bar2'];
                }
            },
            "content@": {
            ...

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

在此处查看更多内容：View Names - Relative vs. Absolute Names

来自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。

编辑：如何保留网址中的/page1

当（差不多）始终与ui-router一起使用时，我们可以向我们提供此行为。诀窍是，重置url评估以在根级别开始 - 即使对于子（没有父URL部分）。这可以通过一个神奇的“^”标志

来完成

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

这是doc：

Absolute Routes (^) (a cite)

如果您想要绝对网址匹配，那么您需要在网址字符串前加上一个特殊符号'^'。

这是working plunker

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

1 个答案: