만약 네가 각도가 아니라 반응을 선택한다면, 너는 무엇을 잃게 될 것이다

List of stand-alone features that make angular framework distinguish from other frameworks.

사진은 engin akyurt 에서 Unsplash
이 글이'만약에 당신이angular가 아니라react를 선택한다면 당신은 무엇을 잃게 될 것입니까'에서 나는angular를 독특하고 다른 프레임워크에서 돋보이게 하는 기능을 지적할 것이다. 이 글은react와angular를 비교하는 것이 아니라 이미 많은 글이나 블로그 게시물이 이렇게 하고 있다. 그러나 내가 보기에는만약 당신이 y가 아닌 x를 선택한다면, 당신은 뭔가를 잃게 될 것입니다. 그래서 제가 이 글을 쓰는 것은 당신을 지도하기 위해서입니다. 만약에angular가 아니라react를 선택한다면, 당신은 약간의 기능을 잃게 될 것입니다. 마지막에 당신은 당신이 원하는 것을 자유롭게 선택할 수 있지만, 당신이 원하는 것을 잃게 될 것을 기억하세요.😉.
우리가 시작하기 전에, 나는 지역 사회 라이브러리에 이런 기능을 많이 추가하여 반응할 수 있다는 것을 알았지만, 이런 방법은 많은 문제를 가져왔다. 예를 들어

라이브러리가react의 최신 버전과 일치하도록 업데이트되지 않았습니다.

도서관의 저자는 그것을 삭제하기로 결정했다.

업그레이드 자체로 인해 라이브러리가 시대에 뒤떨어졌을 수 있습니다.

의존 주입

의심할 여지없이 의존 주입은 다른 프레임워크나 라이브러리와 구별되는 독립적인 특성 중 하나이기 때문에 나는 그것을 목록의 첫 번째로 꼽았다.
그렇다면 의존 주입은 무엇입니까?
소프트웨어 공학에서 의존 주입은 하나의 기술로 그 중의 한 대상이 의존하는 다른 대상을 받아들인다.다른 객체를 종속성이라고 합니다.전형적인'사용'관계에서 수신 대상을 클라이언트라고 하고 전달하는 대상을 서비스라고 한다.
의존 주입은 무엇을 제공합니까?

단례 클래스 (클래스의 실례화를 하나의 단일 인스턴스로 제한).

단원 테스트가 쉽습니다. (필요한 대상을 구조 함수에 전달할 것입니다.)

구성 요소 간 공유 상태입니다.

애플리케이션을 통한 기능 공유

react는angular에서 주입에 의존하는 것과 유사한 기능을 제공합니까?
공유 상태에 대해react는 구성 요소 트리를 통해 데이터를 전달하는 방법을 제공하는데 각 단계에서 수동으로 도구를 전달할 필요가 없다.모든 컨텍스트가 글로벌 상태이고 공유 상태로만 제한된 후에는 범위 문제를 해결할 수 없습니다.
공유 기능에 대해 클래스를 사용할 수 있지만, 단일 클래스를 원하거나, 필요할 때 불러올 수 있습니다. 왜냐하면react팀은 이 문제에 대한 해결 방안을 제공하지 않았기 때문입니다.

컨텍스트 관심사 분리

Angular는 한 파일이나 여러 파일에서 Angular 구성 요소를 작성하는 것을 제한하지 않습니다. 하나는 HTML, 하나는 CSS, 다른 하나는 javascript,render 함수에서 JSX 문법으로 HTML을 작성하도록 합니다. 구성 요소가 매우 작고 논리적 연결이 많지 않으면 가능하지만, 구성 요소의 확장이 읽기 쉬운 문제를 가져오면 어려운 문제가 됩니다.

역할 영역 CSS

Angular는 scope CSS에 삽입식 해결 방안을 제공합니다. 이것은 매우 관건적이고 중요한 기능입니다. 만약에 다시 사용할 수 있는 스타일화된 구성 요소를 구축하고 싶다면,react팀은 해결 방안을 제공하거나 추천하지 않습니다. 다시 한 번 자신의 해결 방안을 구축할 것인지 여러 가지 옵션을 사용해서 선택할 것인지 결정하도록 합니다.

표준 HTML😢

놀랍게도 JSX는 HTML이 아닙니다. HTML의 일부 속성을 직접 사용할 수 없습니다. 예를 들어 class, className, for 을 사용할 수 없습니다. 이것은 큰 문제가 아니라는 것을 알지만, 이것은 매우 중요합니다. 이것은 우리를 다른 섹션으로 인도할 것입니다.

react에서 웹 구성 요소를 완전히 지원하지 않음

웹 구성 요소가 무엇인지, 아니면 왜 웹 스탠더드가 되었는지 설명하지 않겠습니다. 이 를 보시면 더 자세한 정보를 얻을 수 있습니다.
reactlink에 따르면 "react와 웹 구성 요소는 서로 다른 문제를 해결하기 위해 구축된 것입니다. 웹 구성 요소는 재사용 가능한 구성 요소에 강력한 봉인을 제공하고, react는 DOM과 데이터의 동기화를 위한 성명 라이브러리를 제공합니다. 이 두 가지 목표는 서로 보완하는 것입니다. 개발자로서 웹 구성 요소에서react를 사용할 수도 있고, react에서 웹 구성 요소를 사용할 수도 있으며, 둘 다 사용할 수도 있습니다."
이것은 매우 좋지만, 이것은 완전히 성실한 것이 아니다. 예를 들어 같은 문서에 따라 영상 표시를 사용하고dom에서 온 이벤트를 재생하거나 멈추려면,ref를 사용하여dom 노드와 직접 상호작용을 해야 한다. 이것은 이전의 jquery와 같다.
React 팀은 이 제한을 해결할 수 있도록 React 구성 요소를 사용하여 웹 구성 요소를 왜곡하는 것을 권장합니다.

문서 명령

지령의 흥미로운 사실은react를 제외한 모든 프레임워크에 거의 존재한다는 것이다.대부분의 두 가지 방법을 사용하는 프레임워크는 자신의 템플릿 엔진, 예를 들어 laravel의 , 또는 일반적인 HTML을 템플릿 엔진, 예를 들어 RiotJs, VueJs, Angular를 사용합니다.
그럼, 지령은 무엇입니까?
서로 다른 프레임워크의 정의는 다를 수 있지만, 일반적으로 추가 기능을 추가함으로써 추가된 요소를 강화한다. 이러한 기능은 요소가 생성되거나 dom에 추가될 때 존재하지 않는다.
각도 명령은 무엇을 제공합니까?

더 읽을 수 있는 내연 삼원 연산자는 원소에 명령을 쓰기만 하면 된다.

재사용 가능한 코드 세그먼트.

명령은 속성 명령이나 구조 명령일 수 있다.

속성 명령은 DOM 요소의 모양 또는 동작을 변경합니다.

구조 명령은 HTML 레이아웃을 담당합니다.

칼날 양식, 양식 및 양식😁

현재 웹 응용 프로그램이나 사이트가 폼이 없거나 최소한 검색 표시줄이 없습니다. 저는 angular에만 존재하는 플래시 기능 중 하나라고 생각합니다. 이것은 우아하고 확장 가능한 방식으로 폼과 관련된 많은 문제를 해결했습니다. 이 놀라운 기능은 복잡한 폼을 구축하는 것을 매우 간단하고 유지하기 쉬우며 사용자 정의하기 쉽습니다.다른 한편,react팀은 흔히 볼 수 있는 폼 문제에 대해 어떠한 해결 방안도 제공하지 않고 이를 개발자의 결정에 사용함으로써 해결 방안의 부족을 초래했다. 그들 중 많은 사람들이 자신의 의견을 고집했고 그 중에서 많은 사람들이 일부 문제를 해결했다.
예: 각도 반응 형식(로그인 형식)

    const form = new FormGroup({
      email: new FormControl('', [
        Validators.required,
        Validators.email
      ]),
      password: new FormControl('', [
        Validators.required,
        noWhitespaceValidator // custom validator
      ]),
    });

    onSubmit() {
        if (this.form.valid) {
            const formValue = form.value; // get the form data
            // call the server or do what you want
            // ...
        }
    }

<form [formGroup]="form" (ngSubmit)="onSubmit()" autocomplete="off">
  <mat-form-field>
    <input
      matInput
      placeholder="Email"
      type="email"
      formControlName="email"
      autocomplete="off"
    />
  </mat-form-field>

  <mat-form-field>
    <input
      matInput
      placeholder="Password"
      type="password"
      formControlName="password"
      autocomplete="off"
    />
  </mat-form-field>

  <button mat-button type="submit">Login!</button>
</form>

보시다시피 이것은 유지보수, 읽기 쉽고 합리적입니다. 저는 수동적인 형식을 상세하게 설명하지 않겠지만, 아래에 그것의 두드러진 특성을 열거합니다.

반응식 폼은 시간에 따라 값이 변하는 폼 입력을 처리하는 모델 구동 방법을 제공한다.

무효 입력을 관찰할 수 있습니다.

사용자 정의 검증기.

비동기 인증기(예: 서버에서 사용자 이름 사용 가능 여부를 확인합니다.

복잡한 검증기(예를 들어 임대인의 비밀번호 입력이 비밀번호 입력과 일치하는지 확인).

반응 형식 각도 CLI

Angular CLI는 Schofield 생성기가 아니며 실행 중인 스크립트도 아닙니다. 이 외에도 일부 기능이 있습니다.

CLI에서 구성 요소 파일을 직접 생성합니다. 여기에는 cmd에 구성된 미리 채워진 데이터가 포함되어 있습니다.

angular 프로젝트를 명령으로 업그레이드합니다.

사용 을 사용하여 자신의 생성을 만듭니다.

sass,less, 기존 터치펜을 지원하며 웹 패키지 설정을 추가로 설정하거나 편집하거나 팝업할 필요가 없습니다.

각도 다이어그램 결론

많은 사람들이 더 흥미를 느끼는 것은 그들이 무엇을 잃게 될 것이지, 그들이 무엇을 얻게 될 것이 아니다. 그러면 그들은 이 결정을 후회하지 않을 것이다.이것은 일종의 취사와 같다. 생활에서든 프로그래밍에서든 모든 문제에 완벽한 해결 방안이 없다. 그러나 이러한 기능을 열거한 후에 일반적인 HTML의 각도 프레임워크를 사용하는 것을 볼 수 있다. 따라서 대부분의 해결 방안과 기능의 존재는 웹 표준을 파괴하는 것이 아니라 중용성에 치중하고 다른 한편, 데이터와 UI의 동기화를 유지하는 데 중점을 둔다.

각도 레이아웃 구성 전체 가이드

이슬람교 무함메드・ 2019년 3월 11일・ 4분 읽기

#angular #webdev #beginners #frontend