티스토리 뷰

Django

Angular4

nickas 2019. 7. 14. 16:57
  • Install Node.js
  • Install Angular cli(npm install -g @angular/cli)
  • Create a new Angular project(ng new testapp)
  • Test it using local server(ng serve)
  • Build the project(ng build)

Integrating with Django project

  • Copy the js files to the static folder on your Django project (helloapp/static)
  • Copy index.html generated by angular project to the templates folder – override the existing one (first/templates)
  • Change the index.html file as follow:
{% load static %}
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Home</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
      <!-- index.html -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <app-root>Loading...</app-root>
<script type="text/javascript" src="{% static 'inline.bundle.js' %}"></script>
<script type="text/javascript" src="{% static 'polyfills.bundle.js' %}"></script>
<script type="text/javascript" src="{% static 'styles.bundle.js' %}"></script>
<script type="text/javascript" src="{% static 'vendor.bundle.js' %}"></script>
<script type="text/javascript" src="{% static 'main.bundle.js' %}"></script></body>
</html>

Example – http request from Angular to Django

  • Define another view in views.py file
class Customers(TemplateView):
    def getCust(request):
        name='liran'
        return HttpResponse('{ "name":"' + name + '", "age":31, "city":"New York" }
  • Declare the new url in urls.py file
urlpatterns = [
    url(r'^$', views.HomePageView.as_view()),
    url(r'^links/$' , views.LinksPageView.as_view()),
    url(r'^getcust/$',views.Customers.getCust),
]
  • Test it using the local web ( http://127.0.0.1:8000/getcust ) – you need to see the json response

Http request from Angular

  • Add the HttpModule to the app.module.ts file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
 
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • On the button click event make the http request to the ‘getcust’ view
import { Component } from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs';
import 'rxjs/add/operator/map';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 
  constructor(private _http:Http) {
    this.c1.name = "eli"
   }
  title = 'app';
  c1:Cust = new Cust();
  click1(){
    this.getAllBooks().subscribe(b => this.c1 = b)
  }
 
  getAllBooks()
  {
    return this._http
          .get("./getcust")
          .map(r => <Cust>r.json())
  }
}
 
export class Cust{
    name:string;
    age:number;
    city:string;
}
  • Add binding to the html file:
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  
</div>
<h2>Test App: {{c1.name}}</h2>
<button (click)="click1()" >click me</button>
  • build the client side(ng build)
  • Copy the js files to the static folder

 

'Django' 카테고리의 다른 글

REST API 구현하기  (0) 2019.07.22
queryset  (0) 2019.07.15
Class ListView()  (0) 2019.07.13
TypeError  (0) 2019.07.12
장고 폼의 기초  (0) 2019.07.11
최근에 올라온 글
글 보관함