midoriiro/app.component.ts

## readme.md

      
    Raw
  

              readme.md
            
          
Create a Django application application with this structure:

application/

__init__.py
urls.py
templates/application/

index.html


static/application/

package.json
tsconfig.json
typings.json
app/

maint.ts
app.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 runserver in project root directory.


## app.component.ts
import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent{}

## index.html
{% 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>

## main.ts
import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

## urls.py
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')
]
	import {Component} from 'angular2/core';

	@Component({
	selector: 'my-app',
	template: '<h1>My First Angular 2 App</h1>'
	})
	export class AppComponent{}
	{% 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>
	import {bootstrap} from 'angular2/platform/browser';
	import {AppComponent} from './app.component';

	bootstrap(AppComponent);
	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')
	]