Learning Angular2 for the CEAN Stack

CEAN("킨"으로 발음) 스택은 분리된 UI로 웹 앱을 디자인하는 데 사용됩니다("킨" 스택은 MEAN 스택과 비슷합니다. 카우치베이스 서버).

이번 달에 처음으로 Angular2를 배우고 작성하고 있기 때문에 잠시 시간을 내어 제가 배운 내용을 블로그에 올리려고 합니다. 제가 잘못하고 있거나 미흡한 부분이 있다면 지금이 바로 피드백을 주시고 제가 배울 수 있도록 도와주실 수 있는 기회입니다. 댓글을 남기거나 트윗 보내기.

간단한 배경 설명입니다: 저는 프로덕션 코드에서 이러한 최신 UI 프레임워크를 사용해 본 적이 없습니다(아직). 여기에는 Angular, Angular2, Ember, React 등이 포함됩니다. 제 출신 지역에서는 모든 것이 JavaScript/jQuery/jQuery UI로 되어 있었습니다.

타입스크립트 코드 비하인드

Angular2를 사용하기 위해 TypeScript를 사용할 필요는 없지만, 제 동료인 Nic Raboy가 한동안 사용해 왔고, 그가 저에게 사용하도록 안내해 주었습니다.

타입스크립트는 일반 자바스크립트로 변환되는 자바스크립트의 상위 집합(자바스크립트++와 비슷하다고 생각하면 됩니다)입니다. Angular2에서 페이지(또는 뷰)는 TypeScript(ts) 파일(ASP.NET 배경에서 나온 것으로, 저는 이를 "코드 비하인드 파일"이라고 생각합니다)에 연결됩니다. TS 파일은 뷰에서 사용할 수 있는 데이터를 로드하고 뷰의 이벤트에 응답하는 역할을 담당합니다.

REST 엔드포인트에서 회사를 로드하여 보기에서 사용할 수 있도록 하는 매우 간단한 TS 파일의 예입니다:

import { Component } from '@angular/core';
import { ICompany } from '../../entityInterfaces.ts';

@Component({
  selector: 'companies',
  templateUrl: './app/components/companies/companies.html'
})

export class CompaniesComponent {

    public companies : Array;

    public constructor() {
        this.loadCompanies();
    }
}

가져오기 { 구성 요소 } 에서 '@angular/core';

가져오기 { ICompany } 에서 '../../entityInterfaces.ts';

@구성 요소({

선택기: 'companies',

templateUl: './app/components/companies/companies.html'

})

내보내기 클래스 회사구성요소 {

public 회사 : 배열;

public 생성자() {

이.로드 컴퍼니();

}

이 예제에서는 ICompany라는 인터페이스 유형을 "임포트"(C#에서는 "사용"과 비슷합니다)했습니다. 맞습니다. 타입스크립트에서는 일반 자바스크립트보다 훨씬 더 명시적인 방식으로 타입을 선언할 수 있습니다. 타입스크립트의 templateUrl 에서 @컴포넌트 는 이 TS 파일이 어떤 HTML 파일에 해당하는지 알려줍니다. 마지막으로 생성자와 다음과 같은 필드가 있는 클래스를 만들고 있습니다. 기업. 생성자는 해당 회사를 로드하는 메서드를 호출합니다(Ajax를 사용하는 REST 엔드포인트에서). 이 시점에서 기업 를 참조할 수 있는 HTML 파일을 사용할 수 있습니다.

Angular2 보기

Angular2의 HTML 뷰는 대부분 HTML이지만 저는 이를 템플릿이라고 생각합니다. 이 템플릿 내에서 저는 다양한 Angular2 전용 태그와 구문을 사용하여 무언가를 동적으로 렌더링합니다.

예를 들어, 이제 기업 배열을 사용하면 모든 회사를 나열하는 테이블을 렌더링할 수 있습니다.

<table>
    <tr><th>Name</th></tr>
    <tr *ngFor="let company of companies;">
        <td>{{company.companyName}}</td>
        <td>
            <a href="#" (click)="delete(company.id)">Delete</a>
            </div>
        </td>
    </tr>
</table>

<테이블>

<td>

</div>

</td>

</tr>

</테이블>

대부분 HTML로 되어 있어 읽는 데 문제가 없습니다.

일반적인 HTML이 아닌 첫 번째 것은 *ngFor 어트리뷰트를 지정합니다: 회사 회사. 저는 이것을 다음과 같이 생각합니다. foreach(var company in companies) 를 C# 용어로 사용합니다. 이후 ngFor 는 <tr> 엘리먼트가 있으면 해당 엘리먼트(및 그 자식)는 배열의 각 회사에 대해 한 번씩 반복됩니다. 따라서 회사가 3개인 경우 3개의 <tr> 행입니다.

다음으로 평범하지 않은 것은 {{company.companyName}}. 사용한 적이 있는 경우 콧수염 또는 다른 클라이언트 측 템플릿을 사용해 본 적이 있다면 익숙하게 느껴질 것입니다. 이 템플릿은 단지 값을 보간하는 것입니다. 회사명 필드를 HTML에 추가합니다. 따라서 첫 번째 company.companyName 의 값이 "Couchbase"인 경우 출력은 다음과 같습니다. <td>카우치베이스</td>.

마지막으로 각 행에 '삭제' 링크를 만들었습니다. 여기서 특이한 점은 (클릭) 속성을 추가합니다. 이는 삭제 링크를 클릭할 때 Angular가 일부 TypeScript를 실행하도록 지시합니다. 이 경우에는 삭제 메서드를 호출합니다. 해당 메서드에 매개변수 하나를 전달하고 있습니다.

삭제 방법을 사용하면 코드 배후는 다음과 같이 표시됩니다:

import { Component } from '@angular/core';
import { ICompany } from '../../entityInterfaces.ts';
@Component({ 
  selector: 'companies',
  templateUrl: './app/components/companies/companies.html'
})

export class CompaniesComponent {
  public companies : Array; 
  public constructor() {
    this.loadCompanies();
  }
  public delete(id: string) {
    console.log("Deleting Company: " + id) 
    this.deleteCompany(id); 
    // delete from the companies array
    for(let i=0; i < this.companies.length; i++) {
      if(this.companies[i].id == id) {
        this.companies.splice(i, 1);
        break;
      }
    }
  }
}

가져오기 { 구성 요소 } 에서 '@angular/core';

가져오기 { ICompany } 에서 '../../entityInterfaces.ts';

@구성 요소({

선택기: 'companies',

templateUl: './app/components/companies/companies.html'

})

내보내기 클래스 회사구성요소 {

public 회사 : 배열;

public 생성자() {

이.로드 컴퍼니();

}

public 삭제(id: 문자열) {

콘솔.로그("회사 삭제: " + id)

이.삭제 회사(id);

// 회사 배열에서 삭제

에 대한(let i=0; i < 이.회사.길이; i++) {

만약(이.회사[i].id == id) {

이.회사.스플라이스(i, 1);

break;

}

참고 삭제 메서드에는 매개 변수가 있고, 이것은 타입스크립트이므로 입력 매개변수입니다.

이 삭제 방법에는 세 가지 작업이 있습니다:

콘솔에 메시지 쓰기(디버깅/일러스트용)
HTTP 엔드포인트에 POST 또는 DELETE 요청을 전송하는 메서드 호출(자세한 내용은 중요하지 않으므로 생략했습니다). 또한 이와 같은 비동기 상황에서 필요한 Promise/콜백의 사용도 생략했습니다.)
회사 필드에서 회사를 제거하고 있습니다(일치하는 ID를 가진 회사를 반복해서 연결). 또는 loadCompanies를 호출하여 전체 목록을 다시 새로 고칠 수도 있지만, 이 경우 데이터베이스를 다시 한 번 방문해야 합니다.

3단계에는 알아야 할 몇 가지 Angular2 마법이 포함되어 있습니다. 기업 필드가 변경되면 Angular2는 이를 감지하고 렌더링된 HTML을 자동으로 업데이트합니다. *ngFor 를 다시 반복합니다.

기타 항목

제가 해온 다른 일들도 나중에 블로그에 소개할 수 있습니다:

Angular2의 양식: 위의 예제에서 회사를 생성/편집할 수 있습니다.
자바스크립트 라이브러리/플러그인: 자바스크립트 라이브러리/플러그인의 경우 삭제 메서드를 사용하는 경우 확인 대화 상자가 있으면 좋을 것 같습니다. 저는 부트스트랩따라서 다음과 같이 할 수 있다면 좋을 것입니다. 부트박스 가져오기 를 사용하여 확인 대화 상자에 사용할 수 있습니다.
약속: 비동기적으로 작업할 때(예: API 엔드포인트에 HTTP 요청을 할 때) 중요하지 않습니다.

결론

저는 이러한 JS 프레임워크와 TypeScript 자체의 장기적인 이점에 대해 회의적인 입장입니다(언젠가 트위터에서 저에게 물어보세요), 하지만 도구를 배우기 위한 단계를 밟고 있습니다. 이 모든 과정을 거친 후에도 여전히 회의적이라면 적어도 무지한 회의론자가 되지는 않을 것입니다.

TypeScript와 Angular2를 계속 살펴볼 수 있는 몇 가지 리소스입니다:

매튜 그로브스

이 문서 공유하기

Platform

Self-Managed

Services

Capabilities

Why Couchbase?

Migrate to Capella

By Use Case

By Industry

By Application Need

Popular Docs

By Developer Role

Quickstart

Resource Center

About

Partnerships

Our Services

Partners: Register a Deal

Ready to register a deal with Couchbase?

Marriott

CEAN 스택용 Angular2 학습하기

타입스크립트 코드 비하인드

Angular2 보기

기타 항목

결론

받은 편지함에서 카우치베이스 블로그 업데이트 받기

작성자

게시자 매튜 그로브스

댓글 남기기 응답 취소

카우치베이스 카펠라를 시작할 준비가 되셨나요?

구축 시작

카펠라 무료 사용

연락하기