각도 의존 주입을 간소화했다.Net 및 Java 개발자

최근에 한 번.Net 개발자가 나에게 "왜 우리는 의존 주입을 사용할 때 인터페이스가 아닌 클래스를 사용하는가"라고 묻는 것은 전체로서 옳기 때문이다.Net 개발자, 이것은 우리가 배운 것입니다. 클래스 실례를 직접 사용하거나 만들지 마십시오.

소개하다.
솔직히 말하면, 나는 이미 1년여 동안 썼다.Net 코드입니다. 하지만 8년이 넘었습니다. Microsoft 문서의 예시를 복사할 것입니다. 다음 예시에서 실례를 만드는 방법을 보여 드리겠습니다. 이것은 사용하기에 적합합니다.네트와 각도.

public class IndexModel : PageModel
{
    MyDependency _dependency = new MyDependency();

    public async Task OnGetAsync()
    {
        await _dependency.WriteMessage(
            "IndexModel.OnGetAsync created this message.");
    }
}

의존 주입.그물
정확한 방법으로 이 일을 하다.온통

인터페이스 정의

public interface IMyDependency
{
    Task WriteMessage(string message);
}

이 인터페이스를 사용하여 새로운 서비스 만들기

public class MyDependency : IMyDependency
{
    private readonly ILogger<MyDependency> _logger;

    public MyDependency(ILogger<MyDependency> logger)
    {
        _logger = logger;
    }

    public Task WriteMessage(string message)
    {
        _logger.LogInformation(
            "MyDependency.WriteMessage called. Message: {MESSAGE}", 
            message);

        return Task.FromResult(0);
    }
}

등록 인터페이스 및 서비스

services.AddScoped<IMyDependency, MyDependency>();

다른 클래스에서 DI 사용

public class IndexModel : PageModel
{
    private readonly IMyDependency _myDependency;

    public IndexModel(IMyDependency myDependency) {
        _myDependency = myDependency;
    }

    public async Task OnGetAsync()
    {
        await _myDependency.WriteMessage(
            "IndexModel.OnGetAsync created this message.");
    }
}

상술한 방법을 사용하는 장점은 앞으로 우리는 MyDependency를 다른 종류로 쉽게 대체할 수 있다는 것이다. 우리가 어디에 IMyDependency를 주입하든지 간에 우리는 새로운 서비스의 실례를 얻어 서비스와 컨트롤러 간의 어떠한 직접적인 의존을 피할 수 있다.

Angular의 의존 주입
Angular는 이를 DI 프레임워크에 두기 때문에 등록 인터페이스와 관련 서비스는 우리가 본 것처럼 복잡하지 않습니다.Net 구현
본고는 실행 가능한 새로운 서비스를 만들기 위해 클래스 공급자를 소개할 것이다

ng g service <service-name>

서비스 코드는 다음과 같다.

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

@Injectable({
  providedIn: 'root',
})
export class LoginService {
  constructor(public http: HttpClient) { }

  login(user: any) {
    console.log('login service called.');
  }
}

보기 편리하도록 login 방법을 비워 두었습니다. 이 서비스도 HTTP 호출이 있을 수 있습니다.

구성 요소에서 사용

import { Component }   from '@angular/core';
import { LoginService } from './login.service';

@Component({
  selector: 'app-login',
  template: `<button (click)="login()">Login<button>`
})
export class LoginComponent {

  constructor(loginService: LoginService ) {

  }

  login() {
      this.loginService.login('test');
  }

}

위의 구성 요소는login 서비스에 주입되었지만, 등등, 우리가 여기에서 사용하는 것은 클래스 이름이지, 우리가 사용하는 인터페이스가 아닙니다.Net, 만약 우리가 이 클래스를 직접 사용한다면, 그 의존성 주입은 우리가 여기에서 사용하는 클래스와 Typescript에 확실히 존재하는 인터페이스를 사용하지 않는 이유와 같다.다음은 원인과 방식을 탐구해 봅시다.

왜 우리는 인터페이스를 사용할 수 없습니까
개발자가 생각한 첫 번째 문제는 누가 왔느냐는 것이다.Net 배경은 인터페이스가 존재하면 클래스가 아닌 인터페이스를 사용해서 의존 주입을 하지 않는 이유입니다.왜 불가능한지 프로그래밍 방식으로 봅시다.

typescript 설치 사용

npm i typescript -g

폴더 만들기InterfaceDemo, 여러 파일 만들기

VS 코드로 폴더를 열고 다음 명령을 실행하여 tsconfig를 만듭니다.json

tsc -init

파일을 열고 tsconfig.json를 target로 변경합니다.

새 파일 이름 Ilogin을 만듭니다.ts 다음 코드를 복사합니다.

interface ILogin {
    login(user:any): any;
}

터미널에서 명령보다 낮게 실행됩니다.

tsc

이제 당신은 이로킨을 얻게 됩니다.js 파일에서 파일을 열고 코드를 봅니다

"use strict";

방금 발생한 일은 우리가 ES2015 파일을 얻으면 인터페이스에 작성된 어떤 코드도 존재하지 않는다는 것을 의미하는 것입니까?
네, 그렇습니다. typescript는 주로 형식 안전에 사용됩니다. 코드가 자바스크립트로 컴파일되면 존재하지 않습니다.이제 우리는 왜 우리가 여기서 DI를 위해 인터페이스를 사용할 수 없는지 알게 되었다.

만약 우리가 클래스 실례에 의존한다면, 주입에 의존하는 것은 무엇입니까
이제 Login Service가 구성 요소에 주입되더라도 직접 의존하지 않는 방법에 대해 살펴보겠습니다.

Login Service 실례 코드를 만들지 않은 것을 보시면 인터페이스 사용처럼 주입하고 있습니다.Net, Angular는 의존 관계를 어떻게 해결하는지 알고 있기 때문에, 주입된 서비스가 다른 서비스에 의존하더라도, 예를 들어 상술한 예시 .js 를 만들 필요가 없습니다.

알겠습니다. 실례를 만들지 않는 것에 동의하지만, 다른 서비스로 Login Service를 바꾸고 싶다면, New Login Service라고 부릅니다. 코드를 다시 변경해야 하지 않습니까?
답은 정해지지 않았다. 우리는 이 점을 어떻게 실현하는지 보여줄 필요가 없다.

CLI를 사용하여 신규 로그인 서비스 생성

ng g service NewLogin

다음 코드를 서비스에 추가합니다.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LoginService } from './login.service';

@Injectable({
  providedIn: 'root',
})
export class NewLoginService extends LoginService {
  constructor(public http: HttpClient) { super(http); }

  login(user: any) {
     console.log('new login service called.');
  }
}

다음 변경을 진행하기 전에 LoginComponent를 사용하여 프로그램을 실행한 다음 Login 단추를 누르면 우리가 볼 콘솔HttpClient을 볼 수 있습니다

현재 login service called로 이동하면 다음 코드로 바꿀 수 있습니다.

providers: [{ provide : LoginService , useClass : NewLoginService }]

응용 프로그램을 실행하고 콘솔을 다시 검사한 다음 로그인 단추를 누르고 우리가 볼 콘솔app.module.ts을 보십시오.

이것이 바로 우리가 한 줄의 코드도 바꾸지 않고 새로운 서비스로 낡은 서비스를 바꾸는 방법이다. 이것이 바로 우리가 응용 프로그램이 어떤 서비스를 사용할 수 있는지 제어하는 방법이다.
만약에 낡은 서비스에 10개의 방법이 있다면 우리는 5개의 방법만 바꾸고 새로운 서비스에서 5개의 새로운 방법만 추가하여 실현하고자 한다면 우리는 또 다른 장점을 얻을 수 있다.새로운 서비스에 존재하지 않는 방법이 낡은 서비스에서 인용되기 때문에 신기하지 않습니까?

결론
Angular를 사용하는 개발자들이 범하는 가장 큰 오류는 typescript를 사용하는 것에 정말 익숙해져서 편안함을 느낀다는 것이다. C#의 대다수 개념은 모두 사용할 수 있지만 개발자에게도 자바script를 읽으라고 조언한다. 이것은 매우 중요하다. typescript를 사용해서 때때로 출력new login service called 파일을 보려고 한다.좋은 댓글 리스트가 있어요.