web-dev-qa-db-ja.com

Angularjs：単一のhtmlに複数の部分テンプレート？

1つのHTMLで複数のHTMLパーシャルを取得することはできますか？私は次の状況を持っています：

Template: {header} {main} {footer}

/index: header:"Welcome" main:"welcome text" footer:""

/help: header:"Help title" main:"faq tips" footer"Back to home"

ng-includeを使用して、サーバーから6つのHTMLを取得します。 1つのhtmlで複数のパーシャルを取得する場合、サーバーからのみ2つのhtmlを取得します。1つは/ index用で、もう1つは/ help用です。

  • この状況は、実際の状況の小さな例です。
  • scriptタイプのタグng-templateは、ng-includeの前にスクリプトを含める必要があるため、機能しません。

ありがとう！

更新04/07/12：

私は、ユニークなhtml検索を使用して、一度に複数のdivを更新しようとしています。私はこれが好きではありません：

function IndexCtrl($scope) {
    $scope.mainPage = 'partials/index/index.html';
    $scope.headerTemplate = 'partials/index/header.html';
    $scope.footerTemplate = 'partials/index/footer.html';
}

テンプレートの後、これらのパーシャルを含めるためにng-includesを使用します。これは正しい方法ではないと思います。他の方法はありますか？

ありがとう！

htmlpartialsangularjs
31
jlarghi

テンプレートはメインhtmlに埋め込むことができます。たとえば、次のindex.html：

<!DOCTYPE html>
<html ng-app=app>
<meta charset=utf-8>
<title>App</title>
<ng-view>Loading...</ng-view>
<script type=text/ng-template id=partial1.html>
 <p>foo = {{foo}}</p>
</script>
<script type=text/ng-template id=partial2.html>
 <p>Contents of partial2.html</p>
</script>
<script src=app.js></script>

次を使用できますapp.js：

angular.module('app', [], ['$routeProvider', '$controllerProvider', function($routeProvider, $controllerProvider) {

  $routeProvider.when('/p1', { templateUrl: 'partial1.html', controller: 'Partial1' });

  $controllerProvider.register('Partial1', ['$scope', function($scope) {
    $scope.foo = 'bar';
  }]);
}]);

$ templateCacheサービスのドキュメント に詳細があります。

50
Marcello Nuccio

私が行うことは、templateUrlの代わりにテンプレートを使用し、requirejsテキストプラグインを使用してテンプレートをロードすることです。この方法で開発すると、テンプレート用に何千ものファイルを作成できますが、縮小すると、すべてのテンプレートがインライン化された1つのJavaScriptファイルしか作成できません。

私はバックボーン用にセットアップされているオープンソースプロジェクトを作成しましたが、angularのために簡単に変更できます。これにより、縮小とrequirejsテキストプラグインの配線が行われます。 http://github.com/davidjnelson/agilejs

5
davidjnelson