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

Question

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

leo*_*eog 3 module uiview angularjs angular-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>

Run Code Online (Sandbox Code Playgroud)

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');
}]);

Run Code Online (Sandbox Code Playgroud)

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;
                }
            }
         }
    });
});

Run Code Online (Sandbox Code Playgroud)

我错过了什么？

非常感谢提前.

Answer 1

Rad*_*ler 7

我做了一些改动,并让它在这里运行.

首先,正如doc:Abstract States中所定义的那样,必须定义一个抽象状态的子状态,即必须定义一些url (这将有助于ui-router找出使用哪个状态...抽象父级是无法访问的)

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

并且默认路由更改为:

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

Run Code Online (Sandbox Code Playgroud)

最重要的是使用正确的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@": {
            ...

Run Code Online (Sandbox Code Playgroud)

我们可以看到,视图名称后缀为@,这意味着:在顶部根,未命名视图(通常是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" : { }

Run Code Online (Sandbox Code Playgroud)

工作的plunker.

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

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

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

Run Code Online (Sandbox Code Playgroud)

这是doc:

绝对路线(^) (a cite)

如果您想要绝对URL匹配,那么您需要在url字符串前面加上特殊符号'^'.

这是一个工作的plunker

归档时间：	11 年，5 月前
查看次数：	8796 次
最近记录：	11 年，5 月前