REST фреймворк для Django. Начало работы. REST фреймворк для Django. Начало работы. angular ajax service api document

REST фреймворк для Django. Начало работы.

Open in new window

Создание компонента.

ng g component document

Роутинг (app-routing.modules.ts)

const routes: Routes = [
  { path: 'index', component: IndexComponent },
  { path: 'login', component: LoginComponent },
  { path: 'documents', component: DocumentComponent },
  { path: '',
  redirectTo: '/index',
  pathMatch: 'full'
}
];

Ссылка в шаблоне компонента навигации.

  <li class="nav-item active">
    <a class="nav-link" routerLink="/documents">Documents</a>
  </li>

Вывод тестовых данных (document/document.component.html).

    <li  *ngFor="let item of items" > {{ item.title  }}  </li>
    

Тестовые данные в компоненте.

import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-document',
  templateUrl: './document.component.html',
  styleUrls: ['./document.component.sass']
})
export class DocumentComponent implements OnInit {

  items = [{"title": 'one'},{"title": "two"}]

  constructor() { }

  ngOnInit() {


  }

}

Результат.

django rest framework

Генерируем сервис.

ng g service document/document

Подключаем его вместе с HttpClientModule из коробки ангуляр в корневой модуль (app.module.ts).

import { DocumentService } from ‘./document/document.service’; import { HttpClientModule } from ‘@angular/common/http’;

@NgModule({
  declarations: [
    AppComponent,
    NavComponent,
    IndexComponent,
    LoginComponent,
    DocumentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    NgbModule.forRoot()
  ],
  providers: [ DocumentService  ],
  bootstrap: [AppComponent]
})

Пишем сервис.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'

@Injectable({
  providedIn: 'root'
})
export class DocumentService {

  constructor(private http: HttpClient) { }

  getDocList() {
    return this.http.get('http://localhost:8989/api/documents');
  }

}

Используем сервис в компоненте (document/document.component.ts).

import { Component, OnInit } from '@angular/core';
import { DocumentService } from './document.service';

@Component({
  selector: 'app-document',
  templateUrl: './document.component.html',
  styleUrls: ['./document.component.sass']
})
export class DocumentComponent implements OnInit {

  constructor(private http_service: DocumentService) { }

  ngOnInit() {

      this.http_service.getDocList().subscribe((data: any) => {
        this.items = data['results'];
      })


  }

}

django rest framework

Other topics