如何將Angular 2應用程序集成到Django應用程序中

Question

我一直在關注這個Tour of Heroes教程。我有一個Django應用程序，其結構可以簡化爲如下

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 

英雄應用具有以下結構：

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 

目前我已經建立了使用Django認爲，通過URL處理HTTP請求的API並返回JSON。但是，在哪裏/如何將這個Angular應用程序放入當前的Django應用程序，以及如何在將初始GET請求加載到Django後端時將Angular應用程序加載到瀏覽器中？

編輯：在加載HTML和JS更具體的問題：

由於角2使用Component和模板是由角呈現，而不是Django的，如何讓角「訪問」的HTML？ @Luis提到那些文件應該放在靜態文件夾中，但是{% static %}是Django語法，這對Angular來說是沒有意義的。

同樣，我想app/main（如下圖所示）也應該放在靜態文件夾中。但是如何引用Angular中的位置？謝謝！

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. 加載Angular應用程序只是普通的HTML。您可以一如既往地使用您的模板。我不太確定如何在Angular 2中實現它，但由於它只是簡單的HTML/JS，所以它沒有區別：通過包含適當的文件，您將適當引用Angular。在我的許多項目中，我更喜歡（因爲理由超出範圍）明確地呼叫angular.bootstrap。不知道Angular 2是否有相同的呼叫或不同的呼叫，但流程不會改變。
3. Angular 2模板不會被django處理，而是會像靜態文件一樣處理。確保將它們放在應用程序的static/目錄中並適當引用它們（例如，在主Django模板中，如果聲明角應用程序和stateProvider仍然有效，則可以爲狀態lke聲明一個模板：'{％static'myapp /angular-templates/mytemplate.html'％}'，前提是該文件夾存在）。

4. 如果你的主角度模塊有一個單獨的.js文件（是，你可以編譯你的.ts文件，因爲Django不會），請確保以某種方式將STATIC_URL內容從django提供給配置模塊，以找到模板（並使用window.STATIC_URL直接代替靜態django標籤）。在Angularjs 1，我這樣做是爲了初始化一切：

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

5. 編輯（請注意這點，這會導致頭痛），請記住，必須引用Django的{{ 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文件。