兩個狀態與定義一個視圖的意見

Question

我試圖使用angular-ui-router來定義我的應用程序來定義一個有兩個狀態的網站：main和checkout。主要狀態應該有多個「節」標籤，我試圖定義爲UI視圖項目。我不知道我的路由設置有什麼問題，但是我感覺main.html沒有被加載。對什麼是錯我的定義任何建議...我能避免使用意見的secions，只需使用NG-包括...

routes.js

app.config(function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/main'); 
    $stateProvider 
     .state('main', { 
      url: '/main', 
      controller: 'MainCtrl', 
      templateUrl: 'templates/main.html', 
      views:{ 
       'home': { 
        templateUrl: 'templates/main.home.html' 
       }, 
       'about': { 
        templateUrl: 'templates/main.about.html' 
       }, 
       'services': { 
        templateUrl: 'templates/main.services.html' 
       }, 
       'shop': { 
        templateUrl: 'templates/main.shop.html', 
        controller: 'ShopCtrl' 
       } 
      } 
     }) 
     .state('checkout', { 
      url: '/checkout', 
      templateUrl: 'templates/checkout.html', 
      controller: 'CheckoutCtrl' 
}); 

的index.html

<div ui-view id="app-ui-view"></div> 

模板/ main.html中

<section ui-view="home" id="home"></section> 
<section ui-view="about" id="about"></section> 
<section ui-view="services" id="services"></section> 
<section ui-view="shop" id="shop"></section> 

基本上頁面加載，但主要或結賬狀態不加載。我如何將事物嵌套錯誤？

Answer 1

通過不指定父項，可以將兩個狀態都映射到index.html中的默認UI視圖。所以當訪問主狀態時，不會有任何模板鏈接到默認的ui-view，這是唯一存在於現有html中的模板。

所以主要國家應該有這樣的定義：

.state('main', { 
      url: '/main', 
      views:{ 
       '': { 
        controller: 'MainCtrl', 
        templateUrl: 'templates/main.html', 
       }, 
       'home@main': { 
        templateUrl: 'templates/main.home.html' 
       }, 
       'about@main': { 
        templateUrl: 'templates/main.about.html' 
       }, 
       'services@main': { 
        templateUrl: 'templates/main.services.html' 
       }, 
       'shop@main': { 
        templateUrl: 'templates/main.shop.html', 
        controller: 'ShopCtrl' 
       } 
      } 
     })