Geek Answers Handbook

How to integrate an Angular 2 application into a Django application

I followed this Tour of Heroes . I have a Django application whose structure can be simplified as follows

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

The hero application has the following structure:

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

I have currently built an API using Django View, which processes an Http request through a URL and returns JSON. But where / how should I put this Angular application into the current Django application, and how to load the Angular application into the browser upon initial GET request for the Django firewall?

EDIT: More specific HTML and JS loading questions:

Angular 2 Component, Angular, Django, Angular " html? @Luis , , {% static %} - Django, Angular.

, , app/main ( ) . Angular? !

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

UPDATE: /static/js/my_app/main, " " . js , , ; , Angular 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>
+4
1

:

  • Django - Rails. TypeScript. TypeScript.
  • Angular - HTML. . , Angular 2, HTML/JS, : , Angular. ( , ), angular.bootstrap. , Angular 2 , .
  • Angular 2 django, . , static/ (, django, , Angular stateProvider , lke this: '{ % static 'myapp/angular -templates/mytemplate.html'%} ', ).

  • , .js (, COMPILE .ts , Django ) Angular, , - 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']);
 });

  • ( , ). , {{ something }} {% something %} , django. JS, 4, . , STATIC_URL. {% static %}, , Angular, , , STATIC_URL ( 4). .js AngularJS 1. , - 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, , AngularJS, - backend fwk.
  • , - , , ... xD. : javascript django ( ), js- javascript.
  • django fwk.
  • Django JS. .js, .
+4

More articles:


All Articles