14

ヘッダー、サイドバー、フッターなどの再利用可能なウィジェットを含む HTML テンプレートを作成するために、パフォーマンスに関して角度のあるアプリを設計するための最良の方法を知りたいです。ヘッダーとフッターはほぼ同じですが、サイドバーは特定のページで異なる場合があります。

--- index.html

<body ng-cloak>
  <div data-ng-include data-src="'partials/template/header.html'"></div>
  <div data-ng-include data-src="'partials/template/sidebar.html'"></div>

  <div ng-view></div>

  <div data-ng-include data-src="'partials/template/footer.html'"></div>      
</body>

-- header.html

<div id="header">
   // ... HTML CONTENT 
</div>

$templateCache に header.html を入れたほうがいいでしょうか? たとえば、次のようにします。

-- header.html

<!-- CACHE FILE: header.html -->
<script type="text/ng-template" id="header.html">
    <div id="header">
       // ... HTML CONTENT 
    </div>                    
</scipt>

または、ウィジェットごとに次のようなディレクティブを使用する必要があります: <appHeader></appHeader>... ?

これらのウィジェットを各画面に埋め込むために、パフォーマンス、結束、再利用性、およびスケーラビリティに関して、どちらが優れていますか?

4

3 に答える 3

16

あなたの選択は、現時点ではパフォーマンスに左右される必要はありません。

まず、パーシャルをサーバーまたはサーバーに配置し、結果ng-templateを使用してそれらを含めるng-include場合は同じであり、両方が $templateCache にキャッシュされます。そのため、サーバーからの部分的な読み込みが遅く見える場合でも、これは 1 回実行されます。適切なサイズのパーシャルがある場合は、使用せずng-templateにサーバーからロードすることをお勧めします。

ページ構造に基づいて、少なくともディレクティブを使用する必要のないヘッダーとフッターについては、これらのコントロールのレンダリングは 1 回だけです。ng-include部分的でおそらくリンクされたコントローラーを備えた標準。それ自体がディレクティブであることを忘れないでくださいng-include。パフォーマンスを比較する意味はありません。

ディレクティブは、ページ全体で使用する必要があるコンポーネントが必要な場合に役立ちます。ヘッダーとフッターのナビゲーションは、ページにこれらの要素の単一のインスタンスがあるため、この法案に適合しません。

それが役に立てば幸い。

于 2014-03-01T03:57:17.437 に答える
8

ng-include はビュー部分を小さなモジュールに分割するだけなので、私はディレクティブを好みます。ディレクティブを使用すると、1 回しか使用しない場合でも、ページをより小さな独立したコンポーネントにうまくモジュール化できます。親ページのマークアップは見栄えがよくなり、メソッドを追加してコントローラーを乱雑にする必要がなくなります。いくつかのトリックを使用すると、(デフォルトの $rootScope.digest の代わりに) scope.$digest を介して、ディレクティブに固有のイベントやリモート呼び出しを処理することもできます。これにより、パフォーマンスが向上します。さらに、ディレクティブは、必要に応じて直接 DOM 操作を行うことができます。

于 2014-10-24T12:41:22.963 に答える
7

大規模なネストされたリスト (最大 1000 エントリ、深さ 4 レベル) のビューで両方のパフォーマンスを比較しました。

結論

ディレクティブは、大規模なデータ構造をレンダリングする場合よりも50 ～ 100%高速です。多くの複雑な/ネストされたデータ、特に再帰的なものng-includeをレンダリングする必要がある場合は、ディレクティブを使用してください。

また、機能要素 (ウィジェット、フィルター入力など) の場合、ロジックはモジュール内にあり、コントローラーのどこかに浮かんでいないため、ディレクティブはより適切です。

再帰の詳細については、こちらを参照してください: Angular ディレクティブでの再帰

アプリケーションを論理セクション(ヘッダー、サイドバーなど)に分割しようとしているだけの場合ng-includeは、おそらくより適切です。覚えておくべきことの 1 つは、 経由でコントローラのスコープにアクセスする方が簡単だということng-includeです。ディレクティブを使用すると、これが少し難しくなることがあります。

于 2016-02-02T22:17:30.660 に答える