Angular 2アプリをDjangoアプリに統合する方法

Question

私はこのTour of Heroesチュートリアルをフォローしています。

heroes/app/   contains all the .ts and .html files 
heroes/node_modules/ angular2 and other libraries 
heroes/styles.css  css file 
heroes/index.html 
heroes/package.json and other config files 

は、現在、私は、URLを介してHTTPリクエストを処理Djangoのビューを使ってAPIを構築した：私は、その構造

apps/my_app/migrations/ 
apps/my_app/__init__.py 
apps/my_app/urls.py 
apps/my_app/views.py 

frontend_stuff/js/ javascripts here 
frontend_stuff/css/ css here 

ヒーローアプリは、以下の構造を有しているが、以下のように単純化することができるDjangoのアプリを持っていますJSONを返します。しかし、私はこのAngularアプリを現在のDjangoアプリにどこに置くべきですか？Djangoバックエンドへの最初のGETリクエスト時にAngularアプリをブラウザにロードするにはどうしたらいいですか？

EDIT：ロードHTMLとJSのより具体的な質問：

角度2はComponentを使用し、テンプレートはむしろジャンゴよりも角度によってレンダリングされているので、角度の「アクセス」、これらのhtmlを聞かせする方法？ @Luisは、それらのファイルは静的フォルダの中に置かなければならないと述べましたが、{% static %}はDjangoの構文でAngularには意味がありません。

同様に、私はapp/main（下記参照）も静的フォルダに配置する必要があります。しかし、角度の中の場所を参照する方法は？ありがとう！

System.import('app/main') 
     .then(null, console.error.bind(console)); 

UPDATE： 私はthis answerを踏襲して/static/js/my_app/mainを使用し、それが正常になりました、 "主に" 搭載です。今までのすべてのjsファイルがロードされているようです。コンソールログには、いくつかの角度ファイルが正常に読み込まれる前に404エラーが発生することが示されています。

system.src.js:1085 GET http://localhost:8000/static/js/node_modules/angular2/src/platform/browser.js 404 (NOT FOUND)fetchTextFromURL @ system.src.js:1085(anonymous function) @ system.src.js:1646ZoneAwarePromise @ angular2-polyfills.js:589(anonymous function) @ system.src.js:1645(anonymous function) @ system.src.js:2667(anonymous function) @ system.src.js:3239(anonymous function) @ system.src.js:3506(anonymous function) @ system.src.js:3888(anonymous function) @ system.src.js:4347(anonymous function) @ system.src.js:4599(anonymous function) @ system.src.js:337ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482ZoneTask.invoke @ angular2-polyfills.js:434 
system.src.js:1085 XHR finished loading: GET "http://localhost:8000/static/js/rbac/app/rbac.service.js".fetchTextFromURL @ system.src.js:1085(anonymous function) @ system.src.js:1646ZoneAwarePromise @ angular2-polyfills.js:589(anonymous function) @ system.src.js:1645(anonymous function) @ system.src.js:2667(anonymous function) @ system.src.js:3239(anonymous function) @ system.src.js:3506(anonymous function) @ system.src.js:3888(anonymous function) @ system.src.js:4347(anonymous function) @ system.src.js:4599(anonymous function) @ system.src.js:337ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482ZoneTask.invoke @ angular2-polyfills.js:434 
system.src.js:1085 XHR finished loading: GET "http://localhost:8000/static/js/node_modules/angular2/src/platform/browser.js".fetchTextFromURL @ system.src.js:1085(anonymous function) @ system.src.js:1646ZoneAwarePromise @ angular2-polyfills.js:589(anonymous function) @ system.src.js:1645(anonymous function) @ system.src.js:2667(anonymous function) @ system.src.js:3239(anonymous function) @ system.src.js:3506(anonymous function) @ system.src.js:3888(anonymous function) @ system.src.js:4347(anonymous function) @ system.src.js:4599(anonymous function) @ system.src.js:337ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482ZoneTask.invoke @ angular2-polyfills.js:434 
angular2-polyfills.js:332 Error: Error: XHR error (404 NOT FOUND) loading http://localhost:8000/static/js/node_modules/angular2/src/platform/browser.js(…)ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482ZoneTask.invoke @ angular2-polyfills.js:434 
system.src.js:1085 GET http://localhost:8000/static/js/node_modules/angular2/src/http.js 404 (NOT FOUND) 

更新：上記のエラーは、System Confingでの不正なパスによるものです。あなたはいくつかの世話をする必要があります

<script> 
    System.config({ 
    defaultJSExtensions: true, 
    map:{ 
     angular2: '/static/js/node_modules/angular2', 
     rxjs: '/static/js/node_modules/rxjs' 
    }, 
    packages: { 
     app: { 
     format: 'register', 
     defaultExtension: 'js' 
     } 
    } 
    }); 
    System.import('/static/apps/my_app/app/main') 
     .then(null, console.error.bind(console)); 
</script> 

Answer 1

：以下の設定と今ではすべての負荷

1. DjangoはRailsのではありません。 TypeScriptを解析する組み込みの方法はありません。 TypeScriptのすべてのものを最初にコンパイルする必要があります。
2. Loading角度アプリは単なるHTMLです。いつものようにテンプレートを使うことができます。私はAngular 2でそれをどうするかについてはあまりよく分かりませんが、単純なHTML/JSなので、違いはありません。適切なファイルを含めることによって、Angularを適切に参照します。私のプロジェクトの多くでは、質問の範囲外の理由で、angular.bootstrapを明示的に呼び出す方が好きです。 Angular 2に同じ呼び出しか別の呼び出しがあるかどうかはわかりませんが、プロセスは変わりません。
3. 角2のテンプレートはdjangoで処理されるのではなく、静的ファイルのように扱われます。あなたのアプリケーションのstatic/ディレクトリに入れて、それらを適切に参照するようにしてください（例えば、あなたのメインのdjangoテンプレートでは、角度アプリを宣言してもstateProviderが有効であれば、この状態のテンプレートを宣言できます： '{％static' myapp /angular-templates/mytemplate.html '％}'、フォルダが存在する場合）。

4. 主角モジュールのために別の.jsファイル（Djangoは使用しないので、.tsファイルをコンパイルします）がある場合は、何らかの形でdjangoのSTATIC_URLコンテンツを、テンプレートを見つけることができます（静的なdjangoタグの代わりにwindow.STATIC_URLを直接使用します）。Angularjs 1では、私はこれがすべてを初期化するために行います。

   angular.element.ready(function() { 
       window.STATIC_URL = '{{ STATIC_URL }}'; 
       // more constants I'd need 
       angular.bootstrap(['myAngularModule']); 
   }); 
   

5. 編集は（頭痛の原因となるこのポイントに注意してください）あなたはジャンゴで{{ something }}または{% something %}テンプレートを務め参照しなければならないことに注意してください。次に、ポイント4で行ったようにJS変数に代入して、値を使用できるようにします。私の場合は、静的タグは使用しませんが、STATIC_URL変数を使用します。 {% static %}は、あなたが言ったように角テンプレート内では機能しないので、それを使用する代わりに、必要なリソースをSTATIC_URL（これはポイント4のコードと相関があります）変数に連結するだけです。これは、適切にそれを微調整することでAngularJS 1の.jsファイル内の例であり、あなたはAngularJSで2つのファイルを似たようなことを行う必要があります。

   mymodule.config(['$stateProvider', function($stateProvider) { 
       $stateProvider.state({ 
        name: 'main', 
        templateUrl: window.STATIC_URL + 'path/to/template.html' 
        // perhaps better inject $window if you want to run test suites? 
       }) 
   }]) 
   

ので覚えておいてください：

1. がいることを忘れないでくださいAngularJSであり、これはAngularJSのバージョンだけでなく、あらゆるフレームワークに当てはまり、バックエンドのfwkを切り離します。
2. 何らかの理由で、静的ファイルxDで参照する必要がある静的ファイルがどこにあるかを参照する必要があることに注意してください。変数を渡すトリックは、どのフレームワークでも動作します。（フレームワークをブートストラップする前に）メインテンプレートのdjango変数の値をjavascriptに伝えれば、jsフレームワークはjavascriptの値にアクセスできます。
3. fwkからdjangoタグにアクセスすることは決してありません。
4. Djangoは何もJSに変換しません。サードパーティのアセットパイプラインライブラリが見つからない限り、.jsファイルを準備する必要があります。