Ui-Router深層嵌套狀態與父母

Question

我一直在四處搜尋，發現沒有什么能像我需要的那樣起作用，或者任何有效的東西。

我有一個我正在構建的應用程序的狀態，如下所示：

app - 主要父母狀態

facebook - Facebook所有路線的父狀態

adwords - Adwords所有路由的父狀態

bing - Bing所有路由的父狀態

... - 還有很多......很多......

所以，例如，如果我想要一個Facebook概述，它將是app.facebook.overview 。 但是，它沒有以我試過的任何方式工作（ dot注釋，聲明中的parent等）

$stateProvider
    .state('app', {
        url: '',
        abstract: true,
        templateUrl: 'assets/views/default.html'
    })
    .state('app.facebook', {
        url: '/facebook',
        abstract: true
    })
    .state('app.facebook.overview', {
        url: '/overview',
        templateUrl: '/assets/views/facebook/overview/overview.html',
        controller: 'FacebookOverviewCtrl'
    });

我已經嘗試了abstract和parent每個組合，以及dot注釋。 我無法讓它發揮作用。 它沒有給我以下錯誤：

Could not resolve 'app.facebook.overview' from state 'app'

我在這做錯了什么？ 我不明白，我已經關注它的文檔，並在Stackoverflow上查看了很多問題。 有任何想法嗎？

編輯：

我已經找到了問題所在。 基本錯誤。 我沒有在主angular.module聲明中包含該模塊。 嗯...凌晨4點為你編碼。

Answer 1

我立足我的回答就這一個在這里基本上，你只需要設置的網址/facebook以url: ':facebook'和應該做的伎倆。 http://plnkr.co/edit/LQLYTu0YHlvTdB26vQcP

Answer 2

我想說的是，我是愚蠢的。

這是一個有效的插件： https ：//plnkr.co/edit/aAeoucDidw3NX7QJqise？p = preview

如果我包含該模塊，它將有助於我的代碼。

var App = angular.module('app', [
    '... other modules ...',
    'ui.router',
    '... other modules ...',
]);

固定：

var App = angular.module('app', [
    '... other modules ...',
    'ui.router',
    'app.facebook',
    '... other modules ...',
]);

基本錯誤，但值得保留在這里，因為我花了很長時間才弄清楚如何使用ui-router進行深度嵌套狀態。 我學到的一些東西：

• 您不需要在抽象狀態上使用URL，但如果這樣做，則會預先設置

  • 例如： app沒有網址， app.facebook的網址為'/facebook' ， app.facebook.overview的網址為'/overview' 。 這意味着將要使用的URL最終將成為/facebook/overview

• 您可以根據需要將狀態嵌套為深度。

• 如果進一步向下，則需要在狀態聲明中包含template: '<ui-view></ui-view>' ，因此它將根據需要繼續輸入下一個狀態。

  • 例如： app有一個模板頁面，其中包含<ui-view></ui-view> ，但是app.facebook也必須有template: '<ui-view></ui-view>'聲明如此將在其下方插入您想要的頁面（ app.facebook.overview ）。

我希望這能幫助更多的人而不僅僅是我。 花了一段時間才弄明白，但是plunk的代碼工作正常。 現在，這是處理。 我覺得我終於可以繼續......