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

【问题标题】：Multiple module nested ui-router with multiple ui-views具有多个 ui 视图的多个模块嵌套 ui-router
【发布时间】：2014-07-30 19:16:22
【问题描述】：

我正在研究基于 Angular 和 Angular UI Router 的复杂 UI 架构。我正在尝试在多个模块上使用嵌套的 ui 视图定义路由。

这是我想要做的：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;
                }
            }
         }
    });
});

我错过了什么？

非常感谢。

【问题讨论】：

标签： angularjs uiview module angular-ui-router

【解决方案1】：

我做了一些改动，让它运行here。

首先，如文档中所定义：Abstract States，必须定义抽象状态的子状态，即必须定义一些 url （这将有助于 ui-router 找出使用哪个状态...抽象父级不可访问）

$stateProvider.state({ 名称：'page1.main'，网址：'/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。

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

由于（几乎）总是使用ui-router，我们可以给我们这种行为。诀窍是，重置 url 评估以从根级别开始 - 即使对于子 （没有父 url 部分）。这可以通过一个神奇的“^”标志来完成

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

这里是文档：

Absolute Routes (^)(a cite)

如果你想进行绝对 url 匹配，那么你需要在你的 url 字符串前加上一个特殊符号 '^'。

这是working plunker

【讨论】：

非常感谢 Radim。我完全明白我在哪里搞砸了。只是关于您的更改的评论：我确实需要以 /page1 的形式访问 page1，并且应该在两个不同的模块中定义。也许我应该从一开始就澄清这一点。
从这个意义上说，否则指令应该保留“/page1”，page1.main 状态应该有一个空的 url。再次感谢 Radim 指出正确的方向。
如果我正确理解您的问题...更新后的答案应该会给您明确的答案;)