mardi 7 mai 2019

Injection Dependency in Angular

I'm new in Angular, I have a back-end already functional (written in c# asp.net), and I wanted to do a front-end using angular. I've been following some good tutorials but many of them used a fake back-end.

I know that dependency injection is good practice in angular, I have some of it in my code, but right now I'm calling my back-end for creating an user and I was wondering if I should use dependency injection to create the object that I want to send as body in my POST request (and if, how should I do this) or if I can leave it as it is in my code right now.

My code is running with Angular 7.

Here is my class :

export class UserRegister {  

username: string;
password: string;  
Email: string;  
town: string;
fiability: number;
nbEventsParticipated: number;
nbEventRegistered: number;
constructor( userN: string,pass:string,email:string, location:string) {
this.username = userN;
this.password = pass;
this.Email = email;
this.town = location;
}
}  `

My service that I use via dependency Injection to call my webServices :

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { EnvironmentUrlService } from './environment-url.service';

@Injectable()
export class RepositoryService {

constructor(private http: HttpClient, private envUrl:EnvironmentUrlService) { }

public getData(route: string) {
return this.http.get(this.createCompleteRoute(route,   this.envUrl.urlAddress));
 }

public create(route: string, body) {
return this.http.post(this.createCompleteRoute(route, this.envUrl.urlAddress), body, this.generateHeaders());
}

public update(route: string, body) {
return this.http.put(this.createCompleteRoute(route, this.envUrl.urlAddress), body, this.generateHeaders());
 }

public delete(route: string) {
return this.http.delete(this.createCompleteRoute(route, this.envUrl.urlAddress));
}

private createCompleteRoute(route: string, envAddress: string) {
return `${envAddress}/${route}`;
}

private generateHeaders() {
return {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
}
}
}

And here is how I call my service and where I ask myself if I should keep it that way or if I should use Dependecy Injection :

onSubmit() {
this.submitted = true;

// stop here if form is invalid
if (this.registerForm.invalid) {
  return;
}
this.loading = true;
//Should I keep it like that?
let user: UserRegister = new UserRegister(this.f.username.value,this.f.password.value,this.f.mail.value,this.f.town.value);
let body = JSON.stringify(user)   
localStorage.removeItem('currentUserJWT');
this.repo.create('api/Login/CreateProfil',body)
  .subscribe(res => {
    alert(res);
    this.router.navigate(['/login']);
  },
    error => {
      this.alertService.error(error);
      this.loading = false;
    });
 }

The code is working as expected but I would like to do it as perfectly as possible already now !

Thanks for the responses/reading/advices, have a nice day !

Lio




Aucun commentaire:

Enregistrer un commentaire