角度Jsのフォームでのレイアウト

Question

私は角度Jの初心者であり、いくつかのヘルプ/ポインタが必要です。私はアプリケーション（SPA）を作成したいと思います。アプリケーションのすべてのページにヘッダーバーがあり、そのヘッダーバーには、ユーザーがデータを追加して検索できるフォーム（検索バーなど）があります。しかし、私はアプローチすることができません。

私のアプローチは、このヘッダーが私のアプリのどのページにも存在し、どのページでも検索できるようにするにはどうすればよいですか。どのようにコードの繰り返しなしでこれを行うことができますか？私は、ディレクティブを作成してすべてのページで呼びたいとは思っていません。私はそれを行う適切な方法があるかどうかを知りたいですか？

アプリは質問の入力フィールドがどこのページにもあるQuoraのようにする必要があります。

私はAngularで素朴で、助けが必要なので、あなたにはdownvoteを要求しないでください。

ありがとうございます。

Answer 1

ui-routerを検索し、アプリケーションのいくつかの状態を定義します。基本的には、ヘッダーとフッターを保持するメイン状態と、メイン状態の子であるサブ状態があります。

<header></header> 

<ui-view></ui-view> 

<footer></footer> 

とヘッダーは検索フォームを含めることができ、およびすべてのサブ状態は、あなたがui-routerをチェックアウトしまし<ui-view>

Answer 2

電源にロードされます

あなたのマークアップは、このようなものでしょうか？

テンプレートで複数の名前のui-viewが定義されているレイアウト/ルート状態を定義できます。レイアウト/ルート状態は、永続的な要素（例えば、検索入力フィールド）を1つのビューにロードし、子状態は、ユニークなページコンテンツを別のビューにロードすることができる。

ex。 layout.html

<div class="layout"> 
    <div class="search" ui-view="search"></div> 
    <div class="content" ui-view="content"></div> 
</div> 

ex。その設定で（モジュールのconfig()機能で）状態構成

$stateProvider.state('root', { 
    url: '', 
    views: { 
    'main': { 
     templateUrl: 'layout.html' 
    }, 
    'search@root': { 
     template: '<input type="text" ng-model="search.input" />', 
     controller: ['$scope', function($scope){ 
      $scope.search = { 
       input: '' 
      }; 
     }] 
    } 
    } 
}); 

$stateProvider.state('root.page1', { 
    views: { 
    'content@root': { 
     template: '<p>This is the first page.</p>', 
    } 
    } 
}) 
.state('root.page2', { 
    views: { 
    'content@root': { 
     template: '<p>This is the second page.</p>' 
    } 
    } 
}); 

、あなたはあなたのメインのindex.htmlに持っている必要があります：私は見 <div ui-view="main"></div>

Plunker Demo

Answer 3

最も簡単な方法はにありますcreator a header.htmを使用し、ng-includeを使用してheader.htmを実装すると、すべてのページにヘッダーが含まれます。