20

Angular JSの概要を読んだばかりですが、HTMLヘッダーコードとフッターコードを一度だけコード化して、すべてのページに含める方法については何もわかりませんでした。

これを行うための公式/推奨される方法はありますか？

4

4 に答える 4

35

単一ページのWebアプリケーションを作成している場合（たとえば、$ routeProviderを使用してブックマーク可能なビュー/ページを使用）、ヘッダーとフッターを直接index.htmlに配置して（またはng-includeを使用して）、ng-viewを使用して切り替えることができますビュー/ページ間：

<html ng-app>
<head>
   <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
   ... header here, or use ng-include ...
   <div ng-view></div>
   ... footer here, or use ng-include ...
</body>
</html>
于 2012-08-29T18:20:50.017 に答える
31

これを行う公式の方法は、ngIncludeディレクティブを使用することです。"fetches, compiles and includes an external HTML fragment".

<html ng-app>

<head>
  <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>

<body>
  <div ng-include src="'header.url'"></div>
  ...
  <div ng-include src="'footer.url'"></div>
</body>

</html>

header.urlこれにより、footer.urlすべてのページで同じものを再利用できます。

于 2012-08-29T17:21:39.700 に答える
10

同じコードを複数のビューに含める別の方法を見つけました：
=>独自のAngular'ディレクティブ'を作成して使用します

1）ディレクティブを定義します：

angular.module('myApp')
  .directive('appfooter', function() {
    return {
      templateUrl: 'widgets/footer.html'
    };
  });

2）ここで「widgets/footer.html」というテンプレートを作成します。
3）新しいディレクティブを使用します：

<div appfooter></div>

使用された参照：

お役に立てれば

于 2014-07-10T09:42:57.247 に答える
-5

HTMLの読み込みが角度によってブロックされないため、アプリの読み込み時間を改善するために、タグをページの最後に移動することをお勧めします

</head>
<body>
   <div ng-include src="header.url"></div>
   ...
   <div ng-include src="footer.url"></div>

   <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

</body>

于 2013-03-03T16:02:04.820 に答える