2012-07-04 4 views
31

1つのHTMLで複数のHTML部分を取り出すことは可能ですか?Angularjs:単一のhtmlの倍数の部分?

NG-含ま私は、サーバーから6のhtmlを盗んしましたを使用して
Template: {header} {main} {footer} 

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

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

:私は次のような状況をしました。 1つのhtmlで複数の部分的な部分を検索すると、サーバーからのみ2つのhtmlを取得します.1つは/ indexに、もう1つは/ helpです。

  • この状況は、実際の状況の小さな例です。
  • タグタイプngのテンプレートとスクリプトをNG-含まの前にスクリプトが含まれなければならないので、私のために動作しません。

ありがとう!

更新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を使用します。私はこれが正しい方法ではないと思う。別の方法がありますか?

ありがとうございます!

+0

は、あなたが探しているものについての詳細な情報を提供することができますかあなたが達成しようとしているものとバイブル? – ganaraj

答えて

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'; 
    }]); 
}]); 

documentation for the $templateCache serviceは、より多くの詳細を持っています。

+0

ありがとう!非常に役立ちます。 – jlarghi

+4

この解決策に留意しなければならないことの1つは、おそらくスケールがよくないことです。いくつかのテンプレートしかない場合、これはうまく動作します。数十のテンプレートを使用して大規模アプリケーションを構築する場合、インデックスファイルは非常に重くて管理しにくいでしょう。 – ryanzec

+9

ええと、HTMLを生成するためにバックエンドを使用すると、パーシャルを実際のパーシャル(異なるファイル)として管理できますが、パフォーマンスのためにすべてのHTMLを1つにまとめることができます。私は今それをどうやってやっているのですか? –

5

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

私はバックボーンのために設定されたオープンソースのプロジェクトを作成したが、簡単にあなたのために縮小してrequirejsテキストプラグインの配線をした角度のために変更することができます:http://github.com/davidjnelson/agilejs

+0

もう一つの選択肢は、googleは、依存関係管理のためにrequirejsの代わりにクロージャを使用することです。 – davidjnelson

関連する問題