I recently tried incorporating Angular 2 into my Django application as a frontend. However, I encountered an issue while attempting to create a GET request. Angular 2 kept throwing me an error that I couldn't paste here due to formatting constraints.
https://i.sstatic.net/oMmEh.png
These are the key files involved in setting this up:
html
{% extends 'profile/base_profile.html' %}
{% load humanize_tags %}
{% load article_tags %}
{% load staticfiles %}
{% block body %}
{% include '_includes/_article-modal-container.html' %}
<div class="container" style="border:1px solid #bfbfbf">
<!-- Load dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.1/es6-sham.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="https://npmcdn.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e094999085938392899094a0d1ced7ced5">[email protected]</a>/lib/typescript.js"></script>
<script src="https://npmcdn.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6858f8582939b9c85b6c6d8c7cfd8ce">[email protected]</a>/dist/system.src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/http.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/router.dev.js"></script>
<!-- User defined component -->
<http-app></http-app>
<script>
System.config({
transpiler: 'typescript',
packages: {
app: {
format: 'register',
defaultExtension: 'ts'
}
}
});
System.import('{% static '_dev/a2_get_post/app.component.ts' %}')
.then(null, console.error.bind(console));
</script>
</div>
{% endblock body %}
app.component.ts
//import the Component and bootstrap from angular
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {DataService} from './data.service.ts';
import {error} from "util";
import {HTTP_PROVIDERS} from "angular2/http";
import {Injectable} from 'angular2/core'
@Component({
selector: 'http-app',
template: `
<div>
<div class="input">
<label for="title">Title</label>
<input type="text" id="title" #title>
</div>
<div class="input">
<label for="body">Body</label>
<input type="text" id="body" #body>
</div>
<div class="input">
<label for="user-id">User ID</label>
<input type="text" id="user-id" #userId>
</div>
<button (click)="onPost(title.value, body.value, userId.value)">Post Data</button>
<button (click)="onGetPosts()">Get All Posts</button>
<p>Response: {{response}}</p>
</div>
`,
providers: [DataService]
})
@Injectable()
export class AppComponent{
response: string;
constructor ( private _dataService: DataService) {
console.log('Constructor:');
console.log(this);
console.log('');
}
onPost(title: string, body: string, userId: string) {
console.log('onPost:');
console.log(this);
console.log('');
const data = {
title: title,
body: body,
userId: userId
};
this._dataService.postData(data)
.subscribe(
data => this.response = JSON.stringify(data),
error => console.log(error)
);
}
onGetPosts() {
console.log('onGetPosts:');
console.log(this);
console.log('');
this._dataService.getData()
.subscribe(
data => {
response = JSON.stringify(data);
},
error => console.error(error)
)
}
}
bootstrap(AppComponent, [HTTP_PROVIDERS]);
data.service.ts
import {Injectable} from "angular2/core";
import {Http, Headers} from "angular2/http";
import 'rxjs/Rx';
import {Observable} from "rxjs/Observable";
@Injectable()
export class DataService {
constructor (private _http: Http) {
}
postData(data: any): Observable<any> {
const body = JSON.stringify(data);
const headers = new Headers();
headers.append('Content-Type', 'application/json');
return this._http.post('<REMOVED>', body, {headers: headers})
.map(response => response.json());
}
getData(): Observable<any> {
console.log(this);
return this._http.get('<REMOVED>')
.map(response => response.json());
}
}
Technologies used: Django 1.9.6, Angular 2 Beta 17, Python 3.4.3
Looking for any guidance or suggestions!