How to integrate AngularJs with Django - angularjs

Question

I have little/no knowdlege in AngularJs, i want to create a very simple SPA with django as backend and AngularJs as frontend. User will be able to Register, Login & logout all taking place on the same page when a user logs in they will see a message"Welcome (user email)".
This is very easy to do in a normal django web app as we don't even need to create the whole authentication system. But i want to learn how to do this with AngularJS as my employer wants me to do.
I have read the basics of AngularJs and it looked well explained (it made sense) but how to integrate it with django. I tried searching on the internet but there is nothing out there, the tutorials that are there are more then 7 years old.

Answer 1

First you need to look at angular HttpClient because that what going to enable communication between django and angular..then create a service to handle authentication you can call it anything import HttpClient inside to login user for example i will do this:
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { Router } from '#angular/router';
#Injectable({
providedIn: 'root'
})
export class AuthServiceService {
constructor(private http: HttpClient, private router: Router) { }
// Skip authorization from these requests
private skip_token_headers = {
skip: "true"
};
loginUser(user): Observable<any> {
return this.makePostRequest(environment.LOGIN_URL, user,
this.skip_token_headers);
}
makePostRequest(url: string, data: any, req_headers: any): Observable<any> {
return this.http.post(url, data, { headers: req_headers });
}
then in your login component under .ts you import your service and use it like bellow
onLoginSuccess(result){
localStorage.setItem('token', result.key);
localStorage.setItem('user', JSON.stringify(result.user));
this.router.navigate(['/userpage']);
}
onSubmit(form: NgForm) {
this.authService.loginUser(this.user).subscribe(
result => {
this.onLoginSuccess(result);
},
error => {
this.login_errors = [];
if (error['error']['non_field_errors']) {
this.login_errors = error['error']['non_field_errors'];
}
// this.clearErrors(this.user);
// this.showErrors(error);
}
);
}