如何将Angular 2应用程序集成到Django应用程序中

How to integrate an Angular 2 app into a Django app

本文关键字：应用程序集成 Django Angular 更新时间：2023-10-17

我一直在学习英雄之旅教程。我有一个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 View构建了一个API，通过URL处理Http请求并返回JSON。但是，我应该在哪里/如何将这个Angular应用程序放入当前的Django应用程序中，以及如何在向Django后端发出初始GET请求时将Angular应用加载到浏览器中？

编辑：关于加载HTML和JS的更具体的问题：

由于Angular 2使用Component，模板由Angular而非Django呈现，如何让Angular"访问"那些html@Luis提到这些文件应该放在静态文件夹中，但{% static %}是Django语法，对Angular来说没有意义。

类似地，我认为app/main（如下所示）也应该放在静态文件夹中。但是如何参考Angular内部的位置？谢谢

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

更新：我按照这个答案，使用了/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)

更新：上述错误是由于系统配置中的路径不正确造成的。现在，所有内容都使用以下配置加载：

<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>

您应该注意以下几点：

Django不是Rails。它没有内置解析TypeScript的方法。你应该先编译所有TypeScript的东西
加载Angular应用程序只是普通的HTML。您可以一如既往地使用模板。我不太确定如何在Angular 2中做到这一点，但由于它只是普通的HTML/JS，所以没有什么区别：通过包含适当的文件，您将适当地引用Angular。在我的许多项目中，我更喜欢（出于问题范围之外的原因）显式调用angular.bootstrap。不知道Angular 2有相同的调用还是不同的调用，但过程不会改变
Angular 2模板不会被django处理，而是像静态文件一样处理。请确保将它们放在应用程序的static/目录中，并适当地引用它们（例如，在您的主django模板中，如果您声明您的angular应用程序和stateProvider仍然有效，则可以为状态lke声明一个模板："｛%static"myapp/angular templates/mytemplate.html"%｝"，前提是文件夹存在）
如果您有一个单独的.js文件（是的，编译您的.ts文件，因为Django不会）用于您的主angular模块，请确保您可以以某种方式将来自Django的STATIC_URL内容提供给配置模块的代码，以便找到模板（并直接使用window.STATIC_URL而不是静态Django标记）。在Angularjs 1中，我这样做是为了初始化所有内容：
```
 angular.element.ready(function() {
     window.STATIC_URL = '{{ STATIC_URL }}';
     // more constants I'd need
     angular.bootstrap(['myAngularModule']);
 });
```
编辑（请注意这一点，这会让人头疼）请记住，您必须在django服务的模板中引用{{ something }}或{% something %}。然后，像我在第4点中所做的那样，为JS变量赋值，这样值就可用了。在我的例子中，我不使用静态标签，而是使用static_URL变量。正如您所说，{% static %}在角度模板中不起作用，因此与其使用它，不如将所需资源连接到STATIC_URL（这与第4点中的代码相关）变量。这是AngularJS1中的.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?
     })
 }])
```

所以请记住：

请记住，AngularJS与后端fwk解耦，这对任何框架都适用，而不仅仅是AngularJS版本
记住，你需要引用，不知何故，你需要在你的。。。静态文件xD。传递变量的技巧可以在任何框架中完成工作：你只需告诉javascript主模板中django变量的值（在引导你的框架之前），然后你的js框架就可以访问javascript中的值
你永远不会从你的fwk访问django标签
Django不会将任何内容转换为JS。除非找到第三方资产管道库，否则您需要准备好.js文件