-
Create a Django application
applicationwith this structure:application/__init__.pyurls.pytemplates/application/index.html
static/application/package.jsontsconfig.jsontypings.jsonapp/maint.tsapp.component.ts
-
Do the 5 minutes quickstart guide - https://angular.io/docs/ts/latest/quickstart.html.
-
Now you can start Django test server
python manage.py runserverin project root directory.
Last active
April 24, 2020 12:54
-
-
Save midoriiro/fa4e9c0acdef5e730f37 to your computer and use it in GitHub Desktop.
Angular2 - Django Template Application
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Component} from 'angular2/core'; | |
| @Component({ | |
| selector: 'my-app', | |
| template: '<h1>My First Angular 2 App</h1>' | |
| }) | |
| export class AppComponent{} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% load staticfiles %} | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>My Webapp</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!--<link rel="stylesheet" href="styles.css">--> | |
| <script src="{% static 'application/node_modules/es6-shim/es6-shim.min.js' %}"></script> | |
| <script src="{% static 'application/node_modules/systemjs/dist/system-polyfills.js' %}"></script> | |
| <script src="{% static 'application/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js' %}"></script> | |
| <script src="{% static 'application/node_modules/angular2/bundles/angular2-polyfills.js' %}"></script> | |
| <script src="{% static 'application/node_modules/systemjs/dist/system.src.js' %}"></script> | |
| <script src="{% static 'application/node_modules/rxjs/bundles/Rx.js' %}"></script> | |
| <script src="{% static 'application/node_modules/angular2/bundles/angular2.dev.js' %}"></script> | |
| <script> | |
| System.config({ | |
| transpiler: 'typescript', | |
| typescriptOptions: { | |
| emitDecoratorMetadata: true, | |
| experimentalDecorators: true | |
| }, | |
| map: {'typescript': '{% static 'application/node_modules/typescript/lib/typescript.js' %}'}, | |
| packages: { | |
| '{% static 'application/app' %}': { | |
| {% if DEBUG %} | |
| format: 'esm', | |
| defaultExtension: 'ts', | |
| {% else %} | |
| format: 'register', | |
| defaultExtension: 'js' | |
| {% endif %} | |
| } | |
| } | |
| }); | |
| System.import('{% static 'application/app/main' %}') | |
| .then(null, console.error.bind(console)); | |
| </script> | |
| </head> | |
| <body> | |
| <my-app>Loading...</my-app> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {bootstrap} from 'angular2/platform/browser'; | |
| import {AppComponent} from './app.component'; | |
| bootstrap(AppComponent); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| from django.conf.urls import url | |
| from django.shortcuts import render | |
| from django.conf import settings | |
| def root_index(request): | |
| return render(request, 'application/index.html', {'DEBUG': settings.DEBUG}) | |
| urlpatterns = [ | |
| url(r'^$', root_index, name='index') | |
| ] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment