Зависимость впрыска в угловых

Question

Я новичок в Angular, у меня есть уже работающий бэкэнд (написанный на c # asp.net), и я хотел сделать фронтенд с помощью angular. Я следил за некоторыми хорошими уроками, но многие из них использовали фальшивый бэкэнд.

Я знаю, что внедрение зависимостей является хорошей практикой в ​​angular, у меня есть кое-что в моем коде, но сейчас я вызываю свой бэкэнд для создания пользователя, и мне было интересно, стоит ли мне использовать внедрение зависимостей для создания объект, который я хочу отправить как тело в моем запросе POST (и если, как я должен это сделать) или могу ли я оставить его как есть в моем коде прямо сейчас.

Мой код работает с Angular 7.

Вот мой класс:

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;
}
}  `

Мой сервис, который я использую через инъекцию зависимостей для вызова моих веб-сервисов:

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' })
}
}
}

А вот как я называю свою службу и где я спрашиваю себя, следует ли мне продолжать ее или использовать инъекцию зависимости:

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;
    });
 }

Код работает, как и ожидалось, но я бы хотел сделать это как можно лучше уже сейчас!

Спасибо за ответы / чтение / советы, хорошего дня!

Лио

Answer 1

Для приведения FormGroup в модель:

Object.assign(YourVariable, this.YoutFormName.value);

Answer 2

Что касается вашей переменной user:
Вы используете внедрение зависимостей в основном для сервисов или «реальных классов».Ваш класс UserRegister является скорее объектом передачи данных (DTO) и не предоставляет никакой собственной логики.Но важная часть заключается в том, что DI становится несколько уродливым, если вам нужны не входящие в конструктор параметры.Есть способы обойти это, то есть с помощью метода «Initialize» после его внедрения, но я думаю, что в вашем случае предпочтительнее не использовать DI.

Answer 3

Лучше всего всегда использовать DI в контексте Angular.Это запекается в структуре.

https://angular.io/guide/dependency-injection