Angular jsを使用したマルチページアプリケーションで2つの異なるヘッダーを作成する方法は？

Question

ヘッダーを持つホームページを持つアプリケーションがあります。しかし、ホームページのボタンをクリックすると、別のヘッダーとそのページ内のコンテンツがレンダリングされ、ng-viewにレンダリングされ、URLの変更時に、ng-viewの内容が変更され、ヘッダーも必要になります変化する。誰かがこれを行うためにいくつかのアイデアを与えてください。

Answer 1

あなたが使用できる状態のルータを使用します。 NGルータで

は、残念ながら、あなたはpageEg上の複数のビューを持つことはできません。

<div ui-view="header"> 
<div ui-view="content"> 

を明確にするため、ここでドキュメントを探すあなたのビューで

.state('/',{ 

    header:{ 
     templateUrl: 'urlpathHeader', 
     controller: headerController 
    }, 
    content: { 
     templateUrl: 'urlpathContent', 
     controller: ContentController 
    }, 


}) 
.state('other',{ 

    header:{ 
     templateUrl: 'otherurlpathHeader', 
     controller: OtherheaderController 
    }, 
    content: { 
     templateUrl: 'urlpathContent', 
     controller: ContentController 
    }, 


}) 

（HTML）：

としてルーティングを定義します

https://github.com/angular-ui/ui-router

Answer 2

あなたNG-ビューにヘッダーを移動するが、私はむしろ、そのためngRouteとネストされたUIビューのhttps://github.com/angular-ui/ui-router