앵귤러
-
02 템플릿 구문 04앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 10:59
프로퍼티 바인딩 ([property])템플릿 프로퍼티 바인딩을 작성하여 뷰 엘리먼트의 프로퍼티를 설정합니다. 바인딩은 프로퍼티를 템플릿 표현식의 값으로 설정합니다.가장 일반적인 프로퍼티 바인딩은 엘리먼트 프로퍼티를 컴포넌트 프로퍼티 값으로 설정합니다. 다음은 이미지 엘리먼트의 src 속성을 컴포넌트의 heroImageUrl 속성에 바인딩하는 예입니다. src/app/app.component.html 또 다른 예는 컴포넌트가가 변경되지 않았다고 알릴 때 버튼을 비활성화하는 것입니다. src/app/app.component.html Cancel is disabled 다음은 지시어의 프로퍼티를 설정하는 것입니다. src/app/app.component.html [ngClass] binding to the cl..
-
02 템플릿 구문 03앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 10:58
바인딩 구문 : 개요데이터 바인딩은 사용자가 보는 것을 응용프로그램 데이터 값과 조율하는 메커니즘입니다. HTML에서 값을 넣거나 가져올 수는 있지만 이러한 작업을 바인딩 프레임 워크로 바꾸면 응용프로그램을 작성하고 읽고 유지하는 것이 더 쉽습니다. 바인딩 소스와 대상 HTML 엘리먼트 사이의 바인딩을 선언하고 프레임 워크가 작동하도록합니다.Angular는 많은 종류의 데이터 바인딩을 제공합니다. 이 가이드에서는 Angular 데이터 바인딩 및 구문에 대한 고급 수준을 설명한 후 대부분을 다루고 있습니다.바인딩 유형은 데이터 흐름의 방향에 따라 구분되는 세 가지 범주로 그룹화 할 수 있습니다. 소스에서 뷰로(source-to-view), 뷰에서 소스로(view-to-source), 양방향 시퀀스로 뷰에서..
-
02 템플릿 구분 02앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 10:56
템플릿 명령문템플릿 명령문은 엘리먼트, 컴포넌트 또는 디렉티브와 같은 바인딩 대상에서 발생하는 이벤트에 응답합니다. = 기호의 오른쪽에 따옴표로 묶여있는 (event) = "statement"와 같이 이벤트 바인딩 섹션에 템플릿 명령문이 표시됩니다. src/app/app.component.html Delete hero 템플릿 명령문은 또다른 측면을 가지고 있습니다. 그것은 사용자 동작에서 응용프로그램 상태를 업데이트하는 방법입니다.이벤트에 응답하는 것은 Angular의 "단방향 데이터 흐름"의 또 다른 측면입니다. 이번 이벤트 루프가 진행되는 동안 어디에서든지 자유롭게 변경할 수 있습니다.템플릿 표현식과 마찬가지로 템플릿 명령문은 자바 스크립트처럼 보이는 언어를 사용합니다. 템플릿 명령문 구문 분석기는 ..
-
02 템플릿 구문 01앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 10:55
템플릿 구문Angular 응용프로그램은 사용자가 보고 뭘 할 수 있는지 관리합니다. 컴포넌트 클래스 인스턴스 와 사용자 지향 템플릿의 상호 작용을 통해 이를 수행합니다.model-view-controller (MVC) 또는 model-view-viewmodel (MVVM)을 사용하여 얻은 컴포넌트/템플릿 이중성에 익숙 할 수도 있습니다. Angular에서 컴포넌트는 컨트롤러/뷰 모델의 일부이며 템플릿은 뷰를 나타냅니다.이 페이지는 Angular 템플릿 언어에 대한 포괄적인 기술 참조입니다. 템플릿 언어의 기본 원리를 설명하고 문서의 다른 부분에서 발생할 수있는 대부분의 구문을 설명합니다. 템플릿의 HTMLHTML은 Angular 템플릿의 언어입니다. 거의 모든 HTML 구문은 유효한 템플릿 구문입니다. ..
-
01 데이터의 표현앵귤러/03 템플릿&데이터 바인딩 2017. 8. 18. 22:30
데이터의 표현HTML 템플릿의 컨트롤을 앵귤러 엘리먼트의 속성에 바인딩하여 데이터를 표시할 수 있습니다.이 페이지에서는 영웅의 목록이 있는 컴포넌트를 만듭니다. 영웅 이름 목록을 표시하고 목록 아래에 조건부로 메시지를 표시합니다.최종 UI는 다음과 같습니다.. 보간으로 컴포넌트 속성 표시컴포넌트 등록정보를 표시하는 가장 쉬운 방법은 보간을 통해 속성 이름을 바인딩하는 것입니다. 보간법을 사용하면 두 개의 중괄호로 묶인 뷰 템플릿에 속성 이름을 넣을 수 있습니다. {{myHero}}.display-data라는 새 프로젝트를 작성하십시오.그런 다음 템플릿과 컴포넌트의 본문을 변경하여 app.component.ts 파일을 수정합니다.완료되면 다음과 같이 보입니다.ng new my-app src/app/app...
-
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..