沒有嵌套視圖的嵌套ui-router狀態？

Question

我想知道是否有可能沒有嵌套視圖的嵌套狀態。 假設我有這個設置：

App.config(function($stateProvider, $urlRouterProvider) {
    //
    //
    // Now set up the states
    $stateProvider
    .state('index', {
        url: "/index",
       templateUrl: "views/home.html",
        controller: "MainController",
        ncyBreadcrumb: {
            label: 'Home'
        }
    })
    .state('About', {
        url: "/about",
        templateUrl: "views/about.html",
        controller: "AboutController",
        ncyBreadcrumb: {
            label: 'About',
            parent: 'index'
        }
    })
    .state('us', {
        url: "/us",
        templateUrl: "views/us.html",
        controller: "UsController",
        parent: 'about',
        ncyBreadcrumb: {
            label: 'Us'
        }
    })
    //
    // For any unmatched url, redirect to /home
    $urlRouterProvider.otherwise("/index");

});

當我訪問/about ，我得到了關於頁面。 當我訪問/about/us ，我仍然會在about頁面的ui-view中加載帶有us頁面的about頁面。 但是，我想要做的是在/us上加載about頁面，在/about us上加載us頁面。 這可能嗎？

Answer 1

對的，這是可能的。 我們必須使用的是絕對命名。 州定義如下：

.state('us', {
    url: "/us",
    views : {
      "@" : { // here we are using absolute name targeting
        templateUrl: "views/us.html",
        controller: "UsController", 
      },
    }
    parent: 'about',
    ncyBreadcrumb: {
        label: 'Us'
    }
})

見文檔：

查看名稱 - 相對名稱與絕對名稱

在幕后，為每個視圖分配一個絕對名稱，該名稱遵循viewname@statename的方案，其中viewname是視圖指令中使用的名稱，狀態名稱是狀態的絕對名稱，例如contact.item。 您還可以選擇以絕對語法編寫視圖名稱。

例如，前面的示例也可以寫成：

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

因此，正如文檔所示，我們可以使用絕對命名。 在我們的例子中，我們將目標根目錄狀態，其中nams為字符串為空（index.html） - 分隔符@之后的部分。 它是未命名的視圖 - 在@之前字符串為空。 這就是我們使用的原因：

    views : {
      "@" : {

注意：在幕后， UI-Router使用它來表示us ：

    views : {
      "@about" : {

有一個工作的plunker ，這些狀態在起作用 ：

// States
$stateProvider

  .state('index', {
    url: "/index",
    templateUrl: 'tpl.html',
  })
  .state('about', {
    url: "/about",
    templateUrl: 'tpl.html',
  })
  .state('us', {
    url: "/us",
    parent: "about",
    views : {
      '@': {
        templateUrl: 'tpl.html',
      },
    }
  })

檢查它在行動 ，如果“我們”是一個國家的名字與UI SREF =“US”將正確定位到'/about/us' 。

Answer 2

當然，僅僅因為一個州分享網址的一部分並不意味着它必須是父/子關系。 剛剛成立的us國家的網址/about/us並沒有給它一個父。

App.config(function($stateProvider, $urlRouterProvider) {
    //
    //
    // Now set up the states
    $stateProvider
    .state('index', {
        url: "/index",
        templateUrl: "views/home.html",
        controller: "MainController",
        ncyBreadcrumb: {
            label: 'Home'
        }
    })
    .state('About', {
        url: "/about",
        templateUrl: "views/about.html",
        controller: "AboutController",
        ncyBreadcrumb: {
            label: 'About',
            parent: 'index'
        }
    })
    .state('us', {
        url: "/about/us",
        templateUrl: "views/us.html",
        controller: "UsController",
        ncyBreadcrumb: {
            label: 'Us'
        }
    })
    //
    // For any unmatched url, redirect to /home
    $urlRouterProvider.otherwise("/index");
});