1

ブログのような 1 ページ アプリケーションがあるとしますsite.com/。すべての投稿が一覧表示される route のインデックス ページと、 route の「投稿ビュー」ページがありますsite.com/post/:post_id。すべてのデータは非同期で読み込まれます。

現在、すべてが 1 つに依存してng-viewおり、ルーターは次のように設定されています。

$routeProvider.
  when('/', {
    templateUrl: '/partials/index.html',
    controller: 'Index'
  }).
  when('/post/:post_id', {
    templateUrl: '/partials/post.html',
    controller: 'Post'
  })

明らかに、インデックス ページと投稿ページを切り替えると、ビューが DOM から削除され、コントローラーがリロードされます。

ポストバックからインデックスページに切り替えるたびに再レンダリングされないように、インデックスビューのキャッシュを実現する最良の方法は何ですか? サービスを使用してサーバーの応答データをキャッシュしているため、気になるのは再レンダリングです。

4

1 に答える 1

2

再レンダリングについて心配する必要はありません...これはすぐに終わります。Angularにそれを心配させてください。テンプレートのフェッチとキャッシュに関しては、テンプレートの Ajax 呼び出しを回避する 2 つの方法が考えられます。

  1. テンプレートを<script>タグの形式でページに配置します。

    <script type="text/ng-template" id="/partials/index.html">
   Your template here
</script>

<script type="text/ng-template" id="/partials/post.html">
    Another template here
</script>

    Angular はこれらのテンプレートを にロードします$templateCache。ASP.NET MVC、Ruby on Rails、Grails などのサーバー側テクノロジを使用している場合、これらのテクノロジでテンプレートを含む部分ビューを簡単に作成できます。

  2. ページにタグを付けたくない場合<script>は、「ビルド」ステップでテンプレートをコンパイルし、テンプレート キャッシュに配置できます。結果は、すべてのテンプレートを JavaScript 形式で含む 1 つの巨大な JavaScript ファイルになります。

    Angular テンプレートでこれを行う GruntJS プラグインがあります。基本的に、すべてのテンプレートを .xml にロードするモジュールを構築すると思います$templateCache。これはここにあります: https://github.com/karlgoldstein/grunt-html2js

于 2013-05-29T22:37:28.270 に答える