앵귤러/02 앵귤러 기초 - 아키텍처
-
03-08 의존성 주입(Dependency Injection)앵귤러/02 앵귤러 기초 - 아키텍처 2017. 8. 18. 21:38
의존성주입 의존성주입은 클래스의 새로운 인스턴스에 필요한 완전한 형태의 의존성을 제공하는 방법입니다. 대부분의 의존성은 서비스입니다. Angular는 새로운 컴포넌트에 서비스를 제공하기 위해 의존성 주입을 사용합니다.Angular는 생성자 매개수의 유형을 살펴봄으로써 컴포넌트에 필요한 서비스를 알수 있습니다. 예를 들어 HeroListComponent의 생성자에는 HeroService가 필요합니다. src/app/hero-list.component.ts (constructor) constructor(private service: HeroService) { } Angular가 컴포넌트를 만들면 먼저 컴포넌트에 필요한 서비스를 인젝터에 요청합니다.인젝터는 이전에 생성한 서비스 인스턴스의 컨테이너를 관리합니다..
-
03-07 서비스앵귤러/02 앵귤러 기초 - 아키텍처 2017. 8. 18. 21:31
서비스 서비스는 응용프로그램에 필요한 모든 값, 함수 또는 특성을 포괄하는 광범위한 범주입니다.거의 모든 것이 서비스가 될 수 있습니다. 서비스는 일반적으로 잘 정의된 목적을 가진 클래스입니다. 그것은 정의된 일을 잘 수행해야 합니다.예 :l 로깅 서비스l 데이터 서비스l 메시지 버스l 세금 계산기l 응용프로그램 구성Angular는 서비스에 대하여 구체적인 것은 없습니다. Angular는 서비스에 대한 정의가 없습니다. 서비스 기본 클래스가 없으며 서비스를 등록할 곳도 없습니다.그러나 서비스는 Angular 응용프로그램의 기본입니다. 컴포넌트는 서비스를 자주 사용합니다.다음은 브라우저 콘솔에 기록하는 서비스 클래스의 예입니다. src/app/logger.service.ts (class) export cl..
-
03-06 디렉티브앵귤러/02 앵귤러 기초 - 아키텍처 2017. 8. 15. 22:16
디렉티브 Angular 템플릿은 동적입니다. Angular가 표시할할 때 디렉티브가 제공하는 명령에 따라 DOM을 변형합니다.디렉티브는 @Directive 데코레이터가 있는 클래스입니다. 컴포넌트는 템플릿이 있는 디렉티브입니다. @Component 데코레이터는 실제로 템플릿지향 기능으로 확장된 @Directive 데코레이터입니다.두 가지 다른 종류의 디렉티브가 있습니다: 구조 디렉티브와 어트리뷰트 디렉티브.어트리뷰트처럼 엘리먼트 태그 내에 나타나기도 하고, 때로는 이름으로 표시되기도 하지만 할당이나 바인딩의 대상으로 표시되는 경우가 많습니다.구조 디렉티브는 DOM의 엘리먼트를 추가, 제거 및 교체하여 레이아웃을 변경합니다.예제 템플릿은 두 가지 내장 구조디렉티브를 사용합니다. src/app/hero-li..
-
03-05 데이터 바인딩앵귤러/02 앵귤러 기초 - 아키텍처 2017. 8. 15. 20:58
데이터 바인딩 프레임워크가 없으면 데이터 값을 HTML 컨트롤로 푸시하고 사용자 응답을 작업 및 값 업데이트로 변환 할 책임이 개발자에게 있습니다. 그러한 푸시/풀 로직을 직접 작성하는 것은 지루하고 오류가 발생하기 쉽고 숙련된 jQuery 프로그래머가 입증할 수 있기 때문에 악몽처럼 읽을 수 있습니다. Angular는 템플릿의 일부를 컴포넌트의 일부와 조율하는 메커니즘인 데이터 바인딩을 지원합니다. 템플릿 HTML에 바인딩 마크업을 추가하여 Angular에 양면을 연결하는 방법을 알려줍니다.그림에서 볼 수 있듯이 네 가지 형태의 데이터 바인딩 구문이 있습니다. 각 양식은 방향(DOM으로, DOM에서부터, 또는 양방향)을 나타냅니다.HeroListComponent 예제 템플릿에는 세 가지 형식이 있습니다..
-
03-04 메타데이타앵귤러/02 앵귤러 기초 - 아키텍처 2017. 8. 15. 20:50
메타데이타 메타데이타는 클래스를 처리하는 방법을 앵귤러에게 알려줍니다.HeroListComponent의 코드를 살펴보면, 클래스임을 알 수 있습니다. 프레임워크에 대한 어떠한 증거도 없으며 "Angular"는 전혀 없습니다.사실 HeroListComponent는 실제로 클래스일 뿐입니다. 당신이 Angular에 컴포넌트라고 알릴 때까지는 컴포넌트가 아닙니다.HeroListComponent가 컴포넌트라는 것을 Angular에게 알려주려면 메타데이터를 클래스에 첨부하십시오.TypeScript에서는 데코레이터를 사용하여 메타데이터를 첨부합니다. HeroListComponent의 메타데이터는 다음과 같습니다. src/app/hero-list.component.ts (metadata) @Component({ se..
-
03-03 템플릿앵귤러/02 앵귤러 기초 - 아키텍처 2017. 8. 15. 01:26
템플릿 동반템플릿으로 컴포넌트 뷰를 정의합니다. 템플릿은 Angular에서 컴포넌트를 표현하는 방법을 알려주는 HTML 형식입니다.템플릿은 몇 가지 차이점을 제외하고는 일반 HTML처럼 보입니다. 다음은 HeroListComponent의 템플릿입니다. src/app/hero-list.component.html Hero List Pick a hero from the list {{hero.name}} 이 템플릿은 및 와 같은 일반적인 HTML 엘리먼트를 사용하지만 일부 차이점도 있습니다. *ngFor와 같은 코드, {{hero.name}}, (click), [hero] 및 은 Angular의 템플릿 구문을 사용합니다.템플릿의 마지막 줄에서 태그는 새 컴포넌트 인 HeroDetailComponent를 나타내는..
-
03-02 컴포넌트앵귤러/02 앵귤러 기초 - 아키텍처 2017. 8. 15. 01:24
컴포넌트 컴포넌트는 화면의 일부분인 뷰를 제어합니다.예를 들어, 다음뷰는 컴포넌트에 의해 제어됩니다.l 탐색링크가 있는 앱루트l 영웅의 목록.l 영웅 편집기.당신은 클래스 내에서 컴포넌트의 응용프로그램 로직(뷰를 지원하기 위해 수행하는 작업)을 정의합니다. 클래스는 프로퍼티 및 메서드의 API를 통해 뷰와 상호작용합니다.예를 들어, HeroListComponent에는 서비스에서 얻은 영웅의 배열을 반환하는 heroes 프로퍼티가 있습니다. HeroListComponent에는 사용자가 해당 목록에서 영웅을 선택하기 위해 클릭할 때 selectedHero 프로퍼티를 설정하는 selectHero() 메서드도 있습니다. src/app/hero-list.component.ts (class) export class..
-
03-01 아키텍처 개요앵귤러/02 앵귤러 기초 - 아키텍처 2017. 8. 14. 08:55
아키텍처 개요Angular는 HTML과 JavaScript 또는 JavaScript로 컴파일되는 TypeScript와 같은 언어로 클라이언트 응용 프로그램을 작성하기 위한 프레임워크입니다.프레임 워크는 몇개의 라이브러리로 구성되며, 일부 라이브러리는 코어라이브러리이고 일부 라이브러리는 선택적 라이브러리입니다.Angular용 마크업을 사용하여 HTML 템플릿을 구성하고, 이러한 템플릿을 관리하기 위한 컴포넌트 클래스를 작성하며, 서비스의 응용 프로그램 로직을 추가하며, 컴포넌트와 서비스를 모듈로 묶음으로써 Angular 응용 프로그램을 작성합니다.그런 다음 루트모듈을 부트스트랩하여 앱을 실행합니다. Angular는 브라우저에서 애플리케이션 콘텐츠를 제공하고 당신이 제공하는 명령에 따라 사용자 상호작용에 응..