我应该在Django项目中包含哪些Angular文件

时间:2016-07-27 23:34:45

标签: javascript angularjs django

我正在尝试用Django获得角度2官方quickstart。执行npm install后,我得到一个名为node_modules的文件夹,其中包含12.523项和66 MB。然后,快速入门将此引用写入html:

<!-- IE required polyfill -->
<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>

<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/@angular/core/bundles/core.umd.js"></script>
<script src="node_modules/@angular/common/bundles/common.umd.js"></script>
<script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
<script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>

所以,我把这些文件放在我的django静态文件中。然后,在我的django渲染的html中模拟快速入门。但是我得到了错误:

  

TypeError:_angular_common未定义

看起来我错过了一些js文件。我怎么能找到我失踪的?我应该在node_modules文件夹中提供所有12.523下载的项目吗?可能不是。如何让Quickstart使用Django?

这是Django html以防万一:

{% load staticfiles %}
<html>
<head>
    <!-- IE required polyfill -->
    <script src="{%  static 'assets/js/angular/shim.js' %}"></script>
    <script src="{%  static 'assets/js/angular/zone.js' %}"></script>
    <script src="{%  static 'assets/js/angular/Reflect.js' %}"></script>
    <script src="{%  static 'assets/js/angular/Rx.umd.js' %}"></script>
    <script src="{%  static 'assets/js/angular/core.umd.js' %}"></script>
    <script src="{%  static 'assets/js/angular/compiler.umd.js' %}"></script>
    <script src="{%  static 'assets/js/angular/platform-browser.umd.js' %}"></script>
    <script src="{%  static 'assets/js/angular/platform-browser-dynamic.umd.js' %}"></script>
</head>

<body>
    <my-app>Loading...</my-app>
</body>

<script>
(function(app){
    app.Component=ng.core.Component({
        selector: 'my-app',
        template: "<h1>Lets See...</h1>"
        })
        .Class({
            constructor: function() {}
        });
}) (window.app || (window.app = {}));

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platformBrowserDynamic.bootstrap(app.AppComponent);
  });
})(window.app || (window.app = {}));
</script>
</html>

0 个答案:

没有答案