2012-12-06 24 views
32

角度jsの別のページにHTMLページを埋め込むことは可能ですか?角型JSと部分図

もしそうなら、それを行う方法は?

Hereこのチュートリアルでは、この部分はページに埋め込まれていませんが、アイテムの1つをクリックすると別のページのようになります。 (see demo

答えて

32

はい、ngIncludeディレクティブを使用して実行できます。

がここにドキュメントと例を参照してください:ng-includeは何が必要でない場合はhttp://docs.angularjs.org/api/ng.directive:ngInclude

+22

これはひどいです。初期のHTMLペイロードに再利用可能なフラグメントなど、新しい要求を呼び出さずに部分的なものを含める方法はありませんか? – davidgoli

+0

正確に私が必要としたもの。明らかに、これは控えめに使用する必要がありますが、私のログインフォームを再利用するためには完全に機能しました。 – RevNoah

+9

@davidgoli、私が知る限り、角キャッシュは後続のリクエストを避けるためにテンプレートをロードしました。 –

6

を、あなたは角度-UI-ルータモジュールをチェックアウトする場合があります。これは、ネストされた並列ビューを行うことができます...それは素晴らしい、柔軟性、使いやすく、よく文書化されています。ルートテンプレートで https://github.com/angular-ui/ui-router

7

@Wiltは正しいですが、ここではより具体的なリンクと(https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-viewから)のサンプルコードで

<div ui-view></div> 
<div ui-view="chart"></div> 
<div ui-view="data"></div> 

そして、あなたのapp.config機能

$stateProvider.state("home", { 
    views: { 
     "": { 
      template: "<h1>Some HTML</h1>" 
     }, 
     "chart": { 
      templateUrl: "templates/chart.html" 
     }, 
     "data": { 
      template: "<data_thing/>" 
     } 
    }  
})