31

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 用です。

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

ありがとう！

2012 年 4 月 7 日更新:

独自の 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 を使用します。これは正しい方法ではないと思います。他の方法はありますか？

ありがとう！

4

2 に答える 2

50

テンプレートは、メインの 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 サービスのドキュメントに詳細があります。

于 2012-07-04T16:53:35.893 に答える
5

私がしているのは、templateUrl の代わりにテンプレートを使用し、requirejs テキスト プラグインを使用してテンプレートをロードすることです。そうすれば、開発のためにテンプレート用に何千ものファイルを持つことができますが、縮小すると、すべてのテンプレートがインライン化された JavaScript ファイルが 1 つだけになります。

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

于 2013-03-04T23:57:08.850 に答える