Django + Angular 6 예제 | Django Rest Framework + MySQL CRUD 예제 – 3부: Angular 클라이언트

https://ozenero.com/django-angular-6-example-django-rest-framework-angular-crud-mysql-example-part-3-angular-client

Django + Angular 6 예제 | Django Rest Framework + MySQL CRUD 예제 – 3부: Angular 클라이언트

이 자습서는 Django-Angular-MySQL series 의 3부입니다. 오늘은 Angular Client를 생성하여 HTTP 요청을 하고 Django Server로부터 응답을 받을 것입니다.

>> Part 1: Overview >> Part 2: Django Server

동영상

Angular 클라이언트 개요

목표

아래 이미지는 생성할 Angular 구성 요소에 대한 개요를 보여줍니다.



프로젝트 구조



우리는:- 4개의 구성 요소: 고객 목록, 고객 세부 정보, 고객 생성, 고객 검색.- 3개의 모듈: FormsModule, HttpClientModule, AppRoutingModule.- customer.ts: 클래스 고객(id, firstName, lastName)- 고객. service.ts: Http 클라이언트용 서비스 방법 - app-routing.module.ts: 라우팅 구성

Angular 프로젝트 설정

각도 프로젝트 만들기

실행 명령: ng new AngularDjango .

서비스 및 구성 요소 만들기

프로젝트 폴더에서 아래 명령을 실행합니다.- ng g s customer - ng g c create-customer - ng g c customer-details - ng g c customers-list - ng g c search-customers 각 구성 요소 선택기에서 app- 접두사를 삭제한 다음 tslint.json rules - "component-selector"을 변경합니다. ) 거짓으로.

Angular 클라이언트 앱 구현

데이터 모델

customer.ts라는 새 파일을 만듭니다.

export class Customer {
    id: number;
    name: string;
    age: number;
    active: boolean;
}

데이터 서비스

더 보기:

Django + Angular 6 예제 | Django Rest Framework + MySQL CRUD 예제 – 3부: Angular 클라이언트

https://ozenero.com/django-angular-6-example-django-rest-framework-angular-crud-mysql-example-part-3-angular-client