角度UIルータ - 動的コンテンツを含む固定メニュー

Question

いくつかの入力とボタンを含む固定トップメニューを持つページを作成する必要があります。

どのデータが入力され、どのボタンが押されたかによって、データのあるマップがメニューの下に表示されます。

メニューは常に表示され、マップのみが更新されます。

ROUTE私だけ "を選択してください何か" ではなく、メニューを見ることができた瞬間のために

$stateProvider 
.state('login', { 
    url : '/login', 
    templateUrl : 'app/login/login.html', 
    controller : 'LoginController' 
}) 
.state('home', { 
    url : '/home', 
    templateUrl : 'app/home/home.html' 
}) 
.state('menu', { 
    url : '', 
    templateUrl : 'app/menu/menu.html', 
    parent : 'home' 
}); 

home.html

<div ui-view="menu"></div> 

<h1 class="ui huge header"> 
    Please select something 
</h1> 

。

その後、必要な地図で「選択してください」をどのように置き換えることができますか？デフォルトビューを使用することは可能ですか？家に着陸すると、私はここでメッセージとしないマップ

EDIT は私が答えた後、得たもの

ROUTE

$stateProvider 
.state('login', { 
    url : '/login', 
    views : { 
     'login' : { 
      templateUrl : 'app/login/login.html', 
      controller : 'LoginController' 
     } 
    } 
}) 
.state('home', { 
    url : '/home', 
    views : { 
     'menu' : { 
      templateUrl : 'app/menu/menu.html' 
     }, 
     'content' : { 
      templateUrl : 'app/home/home.html', 
     } 
    } 
}) 
.state('home.other', { 
    url : '/other', 
    views : { 
     'content@' : { 
      templateUrl : 'app/home/home.html' 
     } 
    } 
}); 

がINDEX.HTML

で表示されるはずです

<div ui-view="login"></div> 

<div ui-view="menu"></div> 
<div ui-view="content"></div> 

それはうまくいっていますが、それを行う最良の方法ですか？さまざまなコンテンツがあるので、すべての州のメニュービューを複製する必要がありますか？

レイアウトが異なるページ（メニューとコンテンツなし）をお持ちの場合は、index.htmlに新しい<div ui-view="list"></div>を追加するだけですか？

Answer 1

EDITED質問更新

に応じて、より良いUI-ルータの既存のソリューションを理解するためにNested viewsにこの記事を読むことをお試しください。あなたが内側と理由が何であるかをURLから読んで理解することは非常に明確で見ることができるように

$stateProvider 
.state('login', { 
    url: '/login', 
    views: { 
     'login': { 
      templateUrl: 'app/login/login.html', 
      controller: 'LoginController' 
     } 
    } 
}) 
.state('menu', { 
    url: '/menu', 
    templateUrl: 'app/menu/menu.html' 
}) 
.state('menu.content', { 
    views: { 
     'default': { 
      url: '/default', 
      template: '<h1>Please select something</h1>' 
     }, 
     'content1': { 
      url: '/content1', 
      templateUrl: 'app/content1/content1.html' 
     }, 
     'content2': { 
      url: '/content2', 
      templateUrl: 'app/content2/content2.html' 
     } 
    } 
}); 

：ここ

は、あなたがルートの重複を避けるために何ができるかの例です。​​というURLをお持ちの場合は、あなたのメニューの下にコンテンツ1が表示されていることを意味します。

Answer 2

メニューの別の状態を別のビューとしてホーム状態に追加する必要はありません。

<div ui-view="menu"></div> 
<div ui-view="home"></div> 

し、表示を更新したいとき（同じメニューを保つ）、このようなそのビューの状態を作成します：

この

.state('home', { 

    url: '/home', 
    views:{ 

     'menu': { 
      templateUrl: 'app/menu/menu.html' 
     }, 

     'home': { 
      templateUrl: 'app/home/home.html' 
     } 

    } 
}) 

そして、これにあなたのHTMLを変更するなどの

.state('home.newState', { 

    url: '/newState', 
    views:{ 
     'home@':{ 
      templateUrl: 'app/home/newState.html' 
     } 
    } 

}) 

これは、home.htmlテンプレートの代わりにnewState.htmlテンプレートを追加して、メニューを同じに保ちながらビューを更新します。