TypeScript 및 ES5를 사용하여 Angular 2에서 구성 요소 생성

코어 포인트

Angular 2.0은 TypeScript (JavaScript의 슈퍼 세트)를 사용하여 성능을 최적화하고 페이지 속도 및 워크 플로 자동화를 개선합니다. TypeScript를 사용하면 개발자가 유형 정보를 사용하여 JavaScript 코드에 주석을 달 수 있으므로 코드 기반에서 오류를 포착 할 수 있습니다.

Angular 2.0은 뷰와 논리를 포함하는 재사용 가능한 코드 블록 인 구성 요소의 개념을 소개합니다. 구성 요소는 지침을 프레임 워크의 주요 요소로 바꾸어 응용 프로그램 코드의 한 부분이 코드의 다른 부분을 방해하지 않도록합니다.

TypeScript를 사용하여 각도 2.0에서 구성 요소를 작성하려면 구성 요소 클래스를 정의하고 각도에서 필요한 기능을 가져 오는 것이 포함됩니다. 그런 다음 @Component 데코레이터로 클래스를 장식하고 응용 프로그램의 다른 부분에서 사용하기 위해 내보내십시오.
• Angular 2.0은 또한 대부분의 브라우저에서 실행되는 표준 JavaScript 버전 인 ES5를 지원합니다. 각도 2.0에서 ES5를 사용하여 구성 요소를 만들려면 개발자는 NG 객체의 메소드를 사용하여 구성 요소를 정의하고 기능을 추가 할 수 있습니다. 그런 다음 서버없이 브라우저에서 직접 코드를 실행할 수 있습니다.
• 이 기사는 Stephan Max, Jeff Smith 및 Ravi Kiran이 검토했습니다. itepoint 컨텐츠를 최대한 활용 한 모든 Sitepoint Peer Reviewers에게 감사합니다!
연말이 다가옴에 따라 Angular Team은 Angular 2.0의 안정적인 버전을 공개하는 데 그 어느 때보 다 더 가깝습니다. 이것은 각도 응용 프로그램이 개발되는 방식을 재구성하지만 더 나은 결과를 얻을 수 있습니다. 이 기사에서는 Angular 2.0의 핵심 개념과 사용 방법을 보여 드리겠습니다. 구체적으로, 나는 처음부터 끝까지 Angular 2 구성 요소를 구축하는 과정을 안내합니다. 먼저 TypeScript 로이 작업을 수행하는 방법에 대한 자세한 내용은 각도 구성 요소를 마이그레이션하여 순수한 ES5로 실행할 수 있습니다.
• 이 튜토리얼의 코드는 GitHub 코드 기반에서 찾을 수 있습니다. 코드베이스에는 TypeScript 버전과 ES5 버전 용 두 개의 브랜치가 있습니다. 특정 지점을 복제하려면 를 사용하십시오.
구성 요소는 무엇입니까?

JavaScript의 구성 요소 사용은 지난 몇 개월 동안 크게 증가했습니다. 그들은 React, Knockout, Ember 등과 같은 프로젝트에 사용되므로 Angular가 버전 2.0에 통합하는 것은 놀라운 일이 아닙니다. 코드 모듈성은 항상 Angular Team의 초점이었으며 구성 요소를 사용하면 코드가 캡슐화 된 블록으로 코드를 나눌 수 있기 때문에이를 강조합니다.

그럼 구성 요소는 무엇입니까? 본질적으로 응용 프로그램 전체에서 재사용 할 수있는 코드입니다. 보기와 논리의 두 부분이 포함되어 있습니다. Angular Development 팀의 구성 요소에 대한 관심을 활용하여 매우 강력한 기능을 활용할 수 있습니다. Angular 2를 사용하면 프레임 워크의 핵심으로 지침을 대체 한 다양한 구성 요소로 구성된 동적 응용 프로그램을 쉽게 만들 수 있습니다. Angular 2에서는 지침은 DOM에 기능을 추가하는 데만 사용되는 경량 구성 요소입니다. 이제 Angular 개발자는 $ 범위를 격리하는 것과 관련된 충돌 문제로 인해 응용 프로그램을 엉망으로 만드는 것에 대해 걱정할 필요가 없습니다. 대신, 구성 요소를 사용하는 것은 응용 프로그램 코드의 한 부분이 코드의 다른 부분을 방해하지 않도록하는 방법입니다.

typeScript

Angular 2.0은 JavaScript의 슈퍼 세트 인 TypeScript를 사용하도록 만들어졌습니다. Angular Developers는이 릴리스를 완료하는 데 많은 시간을 보냈습니다. 페이지 속도 및 워크 플로 자동화를 포함하여 성능을 최적화하기 위해 열심히 노력합니다. TypeScript는 다른 트랜스 코더와 유사하므로 개발자는 유효한 JavaScript로 쉽게 변환 할 수있는 코드를 작성할 수 있습니다. 즉, 지난 1 년 동안 더 인기를 얻었으므로 Angular 팀은 프레임 워크를 만들기 위해이를 사용하기로 결정했습니다. TypeScript를 사용하는 이점 중 하나는 유형 시스템으로, 개발자가 유형 정보를 사용하여 JavaScript를 주석 할 수 있습니다. 이 주석이 달린 코드는 컴파일러를 통해 실행되므로 사용자 발견을 기다리는 코드 기반에 숨어있는 오류를 포착하는 데 도움이됩니다. 이제 TypeScript의 실제 적용을 살펴 보겠습니다. 아래에서 TJ van Toll의 기사 "The Rise of TypeScript"에서 예제를 추출했습니다. 이 기능에서는 높이와 너비 매개 변수가 숫자 유형이어야합니다. 기능 본체가 숫자 유형이기도 한 반환 유형을 지정합니다. 따라서이 함수에 전달 된 숫자가 아닌 컨텐츠는 컴파일러가 컴파일 시간에 오류를 던지게됩니다.

유형 선언은 API를 문서화하고 시간이 지남에 따라 코드를 더 쉽게 유지할 수 있도록 도와줍니다.

설치

타임 스크립트를 JavaScript로 컴파일하는 프로세스는 매우 간단합니다. 먼저 NPM에서 TypeScript 패키지를 가져옵니다

설치가 완료된 후에는 javaScript로 TypeScript를 컴파일하는 것만 큼 간단합니다. : number 이제 Angular 2가 어떻게 사용자 지정 구성 요소를 쉽게 만들기 위해 TypeScript의 힘을 활용할 수 있는지 살펴 보겠습니다. 첫 번째 예제의 코드는 GitHub 코드 기반의 TypeScript 브랜치에서 찾을 수 있습니다.

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

<<> typescript <🎜

<🎜 🎜>에서 구성 요소를 만듭니다 TypeScript는 JavaScript의 슈퍼 세트이므로 유효한 JavaScript가 .ts 파일에서 제대로 작동 할 수 있습니다. TypeScript를 사용하면 개발자는 JavaScript 코드를 확장하여 최신 ES6 기능을 활용할 수 있습니다. 이 예에서는 수업을 사용합니다.

아래에서 TypeScript 코드를 사용하여 구성 요소를 만들었습니다. ES6 가져 오기 구문을 사용하여 먼저 각도를 가져 왔습니다. 이 예에서는 해당 구성 요소의 구성 요소와보기를 정의합니다. 완료되면 Angular를 코드를 실행하려면 Angular의 부트 스트랩 함수가 필요합니다. 이 코드에서 우리는 @ 기호를 볼 수 있습니다. @ 기호는 우리가 구축하려는 것을 각도에 알리는 데 사용됩니다.

<2> Angular 2는 TypeScript 위에 구축되었으므로 프레임 워크는 @Component 주석을 인식하고 새로운 구성 요소를 만들려고한다는 것을 알고 있습니다. 또한, HTML에서

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

를 볼 때마다 구성 요소를 인스턴스화하고 싶다고 말합니다.

위에서 언급 한 바와 같이, 구성 요소에는 두 부분이 포함되어 있습니다 <user-name></user-name>

view <🎜 🎜>

로지스틱 <🎜 🎜>

구성 요소가 정의되므로 이제 뷰와 논리를 만들어야합니다.

구성 요소 후에는 뷰를 정의하기 위해 일부 TypeScript 코드를 추가 할 수 있습니다. 위의 코드의 연속을 살펴보고 각도가 사용자 정의 구성 요소에보기를 추가하는 방법을 직접 확인해 봅시다.
• 이제 index.html 파일에
를 추가하면이 템플릿이 dom에 주입됩니다. 즉, 사용자 통신 클래스에 코드가 포함되어 있지 않기 때문에 구성 요소의 논리적 부분은 비어 있습니다.
• 위의 예에는 빈 클래스가 하나뿐입니다. 그러나 이제 이름 변수를 만들고 표현식을 사용 하여이 이름 변수를 렌더링합니다.
앞에서 언급 한 부트 스트랩 함수도 표시됩니다. 이름을 공유하지만이 기능은 <🎜

우리의 각도 응용 프로그램을 시작하거나 부팅하는 데 사용되며 Twitter 부트 스트랩 프레임 워크와 관련이 없습니다. 우리가 구성 요소를이 함수로 전달하는 것을 잊어 버리면 Angular는 우리의 구성 요소를로드하는 것을 알지 못할 것입니다.

또한 응용 프로그램이 어떤 종류의 서버를 사용하여 올바르게 표시해야한다는 점도 빨리 주목하고 싶습니다. 직접 액세스하면 System.js는 코드가 포함 된 기본 모듈을로드 할 수 없습니다.

이제이 예제 저장소를 사용하는 사용자는 루트 디렉토리에서

를 실행할 수 있습니다. 이 명령을 실행 한 후

https://www.php.cn/link/f74d6ef882234fd34400a296b1da6149 <🎜 🎜>를 방문하여 구성 요소의 실제 효과를 볼 수 있습니다. 바라건대 이것은 Angular가 구성 요소에 논리를 추가하는 방법을 보여줍니다!

npm install -g typescript

<<> 구성 요소를 ES5 <🎜 <user-name></user-name>

로 마이그레이션합니다 ES5를 사용하려는 사람들이 2.0의 힘을 활용하려는 사람들의 경우 Angular 2 팀은 단순히 웹 사이트에 넣을 수있는 프레임 워크 버전을 만들었습니다. ES5에는 모듈 시스템이 없기 때문에 필요합니다. 따라서 일종의 자체 실행 번들이 필요합니다. 첫 번째 예제의 코드를 살펴 보면 응용 프로그램에 세 가지 스크립트 태그를 추가해야합니다. 이 예에서는 다음 스크립트 만 추가하면됩니다.

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

이 스크립트를 사용하여 개발자는 프레임 워크의 기능을 희생하는 것에 대해 걱정하지 않고 ES5에 대한 지식을 사용할 수 있습니다. ES5를 사용하여 각도 구성 요소를 구축하는 방법을 살펴 보겠습니다. 이 예제의 코드는 GitHub 코드 기반의 ES5 브랜치에서 찾을 수 있습니다. 즉, 시작하자!

typeScript 대신 ES5를 사용하여 구성 요소를 재현하려면 몇 가지 다른 접근법을 사용합니다. 이것은 기본적으로 위의 예제에서 수행 한 것과 동일하지만 @ 기호를 사용하는 대신 NG 객체의 메소드 링크를 사용합니다. 이것은 다음 코드에 나와 있습니다 :

이제 응용 프로그램이

선택기를 읽을 때 표시 될 구성 요소에 기능을 계속 추가 할 수 있습니다.

npm install -g typescript

보기와 클래스 방법을 사용해 봅시다. View Method에서는 이전에 사용한 템플릿 문자열을 전달하면됩니다. ES5에서는 클래스가 지원되지 않으므로 이름 속성이 포함 된 간단한 생성자를 만들어 클래스 메소드에서 사용을 시뮬레이션합니다.

<user-name> 하지만 우리는 뭔가 빠져 있습니다. TypeScript 예제에서는 부트 스트랩 함수를 사용하여 각도 코드를 시작했습니다. ES5에서 동일하게 수행하는 방법은 다음과 같습니다

이것은 사용자 정의 응용 프로그램 코드에 배치해야합니다. 이로 인해 Angular가 응용 프로그램을 부팅하고 페이지로드 후 구성 요소를로드하게됩니다. 이전 예제 (서버 필요)와 달리이 페이지는 브라우저에서 직접 볼 수 있습니다.

보시다시피, Angular Team은 ES5로 2.0 응용 프로그램을 구축하려는 사용자에게 명확한 솔루션을 제공합니다. 이에 관심이 있으시면 A.JS 라이브러리를 확인하는 것이 좋습니다.이 라이브러리는 개발자가 TypeScript와 같은 구문을 사용하여 ES5에서 각도 응용 프로그램을 구축 할 수 있습니다.

<🎜 🎜> <<> 결론

tsc <filename.ts>

이것은 다음 버전의 프레임 워크에 나타날 각도의 다양한 측면을 심도있게 보이게합니다. Angular 2 및 TypeScript (이 경우 게시판)로 완전한 응용 프로그램을 추가로 구축하려면이 기사를 확인하는 것이 좋습니다. TypeScript와 함께 Angular 2로 시작하십시오.

나는 또한 Angular 2에 대한 당신의 경험을 알고 싶습니다. 당신은 그것을 시도 했습니까? 공유하고 싶은 것을 만들었습니까? 의견에 알려주십시오.

import { Component, View, bootstrap } from 'angular2/angular2';
@Component({
  selector: 'user-name'
})

<🎜 🎜> <<> angular 2에서 구성 요소 생성에 대한 FAQ 및 ES5 <🎜 🎜> <🎜 🎜> TypeScript를 사용하여 Angular 2에서 구성 요소를 만드는 방법은 무엇입니까?

각도 2에서 구성 요소 생성 TypeScript를 사용하여 여러 단계가 필요합니다. 먼저 각도 코어 라이브러리에서 구성 요소 기호를 가져와야합니다. 그런 다음 구성 요소 클래스를 정의하고 @Component 데코레이터로 장식하십시오. 데코레이터는 클래스가 구성 요소이며 선택기 및 템플릿과 같은 메타 데이터를 제공한다고 말합니다. 마지막으로, 구성 요소 클래스를 내보내므로 응용 프로그램의 다른 부분에서 사용할 수 있습니다. 기본 예는 다음과 같습니다.

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

각도 2에서 TypeScript와 ES5의 차이점은 무엇입니까?

typescript와 es5는 각도 2 응용 프로그램을 작성하는 데 사용할 수있는 언어이지만 몇 가지 주요 차이점이 있습니다. TypeScript는 언어에 유형 및 기타 기능을 추가하는 정적으로 입력 한 JavaScript 슈퍼 세트입니다. 코드를보다 강력하고 유지 관리하기가 더 쉽기 때문에 Angular 2의 선호되는 언어입니다. 반면에 ES5는 대부분의 브라우저에서 실행되는 표준 JavaScript 버전입니다. Angular 2 응용 프로그램은 ES5를 사용하여 작성할 수 있지만 TypeScript의 이점을 놓치게됩니다.

(나머지 FAQ는 각도 및 반응과 관련이 있으며 원래 주제와 일치하지 않으므로 생략됩니다.)

위 내용은 TypeScript 및 ES5를 사용하여 Angular 2에서 구성 요소 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!