2つの状態が1つのビュービューに定義されています

Question

私は、2つの状態（メインとチェックアウト）を持つウェブサイトを定義するために、angle-ui-routerを使って自分のアプリケーションをモジュレーションしようとしています。メインステートには、ui-viewアイテムとして定義しようとする複数の「セクション」タグが必要です。私は自分のルート設定で何が問題なのかは分からないが、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ビューにリンクされているテンプレートはありません。既存の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' 
       } 
      } 
     })