🚀
Incheol's TECH BLOG
  • Intro
  • Question & Answer
    • JAVA
      • JVM
      • String, StringBuffer, StringBuilder
      • JDK 17일 사용한 이유(feat. JDK 8 이후 훑어보기)
      • 스택 오버 플로우(SOF)
      • 블럭킹 | 논블럭킹 | 동기 | 비동기
      • 병렬처리를 이용한 이미지 리사이즈 개선
      • heap dump 분석하기 (feat. OOM)
      • G1 GC vs Z GC
      • JIT COMPILER
      • ENUM
      • STATIC
      • Thread(쓰레드)
      • hashCode()와 equals()
      • JDK 8 특징
      • break 와 continue 사용
      • STREAM
      • Optional
      • 람다와 클로저
      • Exception(예외)
      • Garbage Collector
      • Collection
      • Call by Value & Call by Reference
      • 제네릭(Generic)
    • SPRING
      • Spring 특징
      • N+1 문제
      • 테스트 코드 어디까지 알아보고 오셨어요?
      • 테스트 코드 성능 개선기
      • RestTemplate 사용시 주의사항
      • 동시성 해결하기(feat. TMI 주의)
      • redisson trylock 내부로직 살펴보기
      • DB 트래픽 분산시키기(feat. Routing Datasource)
      • OSIV
      • @Valid 동작 원리
      • mybatis @Builder 주의사항
      • 스프링 클라우드 컨피그 갱신 되지 않는 이슈(feat. 서비스 디스커버리)
      • ImageIO.read 동작하지 않는 경우
      • 카프카 transaction 처리는 어떻게 해야할까?
      • Spring Boot 특징
      • Spring 5 특징
      • JPA vs MyBatis
      • Filter와 Interceptor
      • 영속성 컨텍스트(Persistence Context)
      • @Transactional
      • @Controlleradvice, @ExceptionHandler
      • Spring Security
      • Dispatcher Servlet
      • @EnableWebMvc
      • Stereo Type(스테레오 타입)
      • AOP
      • JPA Repository 규칙
    • DATABASE
      • Database Index
      • SQL vs NoSQL
      • DB 교착상태
      • Isolation level
      • [MySQL] 이모지 저장은 어떻게 하면 좋을까?
      • SQL Hint
      • JOIN
    • INFRA
      • CLOUD COMPUTING
      • GIT
      • DOCKER
      • 카프카 찍먹하기 1부
      • 카프카 찍먹하기 2부 (feat. 프로듀서)
      • 카프카 찍먹하기 3부 (feat. 컨슈머)
      • JENKINS
      • POSTMAN
      • DNS 동작 원리
      • ALB, NLB,ELB 차이는?
      • 카프카 파티션 주의해서 사용하자
      • DEVOPS
      • JWT
      • OSI 7 Layer
      • MSA
      • 서비스 디스커버리는 어떻게 서비스 등록/해제 하는걸까?
      • 핀포인트 사용시 주의사항!! (feat 로그 파일 사이즈)
      • AWS EC2 도메인 설정 (with ALB)
      • ALB에 SSL 설정하기(feat. ACM)
      • 람다를 활용한 클라우드 와치 알림 받기
      • AWS Personalize 적용 후기… 😰
      • CloudFront를 활용한 S3 성능 및 비용 개선
    • ARCHITECTURE
      • 객체지향과 절차지향
      • 상속보단 합성
      • SOLID 원칙
      • 캡슐화
      • DDD(Domain Driven Design)
    • COMPUTER SCIENCE
      • 뮤텍스와 세마포어
      • Context Switch
      • REST API
      • HTTP HEADER
      • HTTP METHOD
      • HTTP STATUS
    • CULTURE
      • AGILE(Feat. 스크럼)
      • 우리는 성장 할수 있을까? (w. 함께 자라기)
      • Expert Beginner
    • SEMINAR
      • 2022 INFCON 후기
        • [104호] 사이드 프로젝트 만세! - 기술만큼 중요했던 제품과 팀 성장기
        • [102호] 팀을 넘어서 전사적 협업 환경 구축하기
        • [103호] 코드 리뷰의 또 다른 접근 방법: Pull Requests vs. Stacked Changes
        • [105호] 실전! 멀티 모듈 프로젝트 구조와 설계
        • [105호] 지금 당장 DevOps를 해야 하는 이유
        • [102호] (레거시 시스템) 개편의 기술 - 배달 플랫폼에서 겪은 N번의 개편 경험기
        • [102호] 서버비 0원, 클라우드 큐 도입으로 해냈습니다!
  • STUDY
    • 오브젝트
      • 1장 객체, 설계
      • 2장 객체지향 프로그래밍
      • 3장 역할, 책임, 협력
      • 4장 설계 품질과 트레이드 오프
      • 5장 책임 할당하기
      • 6장 메시지와 인터페이스
      • 7징 객체 분해
      • 8장 의존성 관리하기
      • 9장 유연한 설계
      • 10장 상속과 코드 재사용
      • 11장 합성과 유연한 설계
      • 12장 다형성
      • 13장 서브클래싱과 서브타이핑
      • 14장 일관성 있는 협력
      • 15장 디자인 패턴과 프레임워크
      • 마무리
    • 객체지향의 사실과 오해
      • 1장 협력하는 객체들의 공동체
      • 2장 이상한 나라의 객체
      • 3장 타입과 추상화
      • 4장 역할, 책임, 협력
    • JAVA ORM JPA
      • 1장 JPA 소개
      • 2장 JPA 시작
      • 3장 영속성 관리
      • 4장 엔티티 매핑
      • 5장 연관관계 매핑 기초
      • 6장 다양한 연관관계 매핑
      • 7장 고급 매핑
      • 8장 프록시와 연관관계 관리
      • 9장 값 타입
      • 10장 객체지향 쿼리 언어
      • 11장 웹 애플리케이션 제작
      • 12장 스프링 데이터 JPA
      • 13장 웹 애플리케이션과 영속성 관리
      • 14장 컬렉션과 부가 기능
      • 15장 고급 주제와 성능 최적화
      • 16장 트랜잭션과 락, 2차 캐시
    • 토비의 스프링 (3.1)
      • 스프링의 이해와 원리
        • 1장 오브젝트와 의존관계
        • 2장 테스트
        • 3장 템플릿
        • 4장 예외
        • 5장 서비스 추상화
        • 6장 AOP
        • 8장 스프링이란 무엇인가?
      • 스프링의 기술과 선택
        • 5장 AOP와 LTW
        • 6장 테스트 컨텍스트 프레임워크
    • 클린코드
      • 1장 깨끗한 코드
      • 2장 의미 있는 이름
      • 3장 함수
      • 4장 주석
      • 5장 형식 맞추기
      • 6장 객체와 자료 구조
      • 9장 단위 테스트
    • 자바 트러블슈팅(with scouter)
      • CHAP 01. 자바 기반의 시스템에서 발생할 수 있는 문제들
      • CHAP 02. scouter 살펴보기
      • CHAP 03. scouter 설정하기(서버 및 에이전트)
      • CHAP 04. scouter 클라이언트에서 제공하는 기능들
      • CHAP 05. scouter XLog
      • CHAP 06. scouter 서버/에이전트 플러그인
      • CHAP 07. scouter 사용 시 유용한 팁
      • CHAP 08. 스레드 때문에(스레드에서) 발생하는 문제들
      • CHAP 09. 스레드 단면 잘라 놓기
      • CHAP 10. 잘라 놓은 스레드 단면 분석하기
      • CHAP 11. 스레드 문제
      • CHAP 12. 메모리 때문에 발생할 수 있는 문제들
      • CHAP 13. 메모리 단면 잘라 놓기
      • CHAP 14. 잘라 놓은 메모리 단면 분석하기
      • CHAP 15. 메모리 문제(Case Study)
      • CHAP 24. scouter로 리소스 모니터링하기
      • CHAP 25. 장애 진단은 이렇게 한다
      • 부록 A. Fatal error log 분석
      • 부록 B. 자바 인스트럭션
    • 테스트 주도 개발 시작하기
      • CHAP 02. TDD 시작
      • CHAP 03. 테스트 코드 작성 순서
      • CHAP 04. TDD/기능 명세/설계
      • CHAP 05. JUnit 5 기초
      • CHAP 06. 테스트 코드의 구성
      • CHAP 07. 대역
      • CHAP 08. 테스트 가능한 설계
      • CHAP 09. 테스트 범위와 종류
      • CHAP 10. 테스트 코드와 유지보수
      • 부록 A. Junit 5 추가 내용
      • 부록 C. Mockito 기초 사용법
      • 부록 D. AssertJ 소개
    • KOTLIN IN ACTION
      • 1장 코틀린이란 무엇이며, 왜 필요한가?
      • 2장 코틀린 기초
      • 3장 함수 정의와 호출
      • 4장 클래스, 객체, 인터페이스
      • 5장 람다로 프로그래밍
      • 6장 코틀린 타입 시스템
      • 7장 연산자 오버로딩과 기타 관례
      • 8장 고차 함수: 파라미터와 반환 값으로 람다 사용
      • 9장 제네릭스
      • 10장 애노테이션과 리플렉션
      • 부록 A. 코틀린 프로젝트 빌드
      • 부록 B. 코틀린 코드 문서화
      • 부록 D. 코틀린 1.1과 1.2, 1.3 소개
    • KOTLIN 공식 레퍼런스
      • BASIC
      • Classes and Objects
        • Classes and Inheritance
        • Properties and Fields
    • 코틀린 동시성 프로그래밍
      • 1장 Hello, Concurrent World!
      • 2장 코루틴 인 액션
      • 3장 라이프 사이클과 에러 핸들링
      • 4장 일시 중단 함수와 코루틴 컨텍스트
      • 5장 이터레이터, 시퀀스 그리고 프로듀서
      • 7장 스레드 한정, 액터 그리고 뮤텍스
    • EFFECTIVE JAVA 3/e
      • 객체 생성과 파괴
        • 아이템1 생성자 대신 정적 팩터리 메서드를 고려하라
        • 아이템2 생성자에 매개변수가 많다면 빌더를 고려하라
        • 아이템3 private 생성자나 열거 타입으로 싱글턴임을 보증하라
        • 아이템4 인스턴스화를 막으려거든 private 생성자를 사용하라
        • 아이템5 자원을 직접 명시하지 말고 의존 객체 주입을 사용하라
        • 아이템6 불필요한 객체 생성을 피하라
        • 아이템7 다 쓴 객체 참조를 해제하라
        • 아이템8 finalizer와 cleaner 사용을 피하라
        • 아이템9 try-finally보다는 try-with-resources를 사용하라
      • 모든 객체의 공통 메서드
        • 아이템10 equals는 일반 규약을 지켜 재정의하라
        • 아이템11 equals를 재정의 하려거든 hashCode도 재정의 하라
        • 아이템12 toString을 항상 재정의하라
        • 아이템13 clone 재정의는 주의해서 진행해라
        • 아이템14 Comparable을 구현할지 고려하라
      • 클래스와 인터페이스
        • 아이템15 클래스와 멤버의 접근 권한을 최소화하라
        • 아이템16 public 클래스에서는 public 필드가 아닌 접근자 메서드를 사용하라
        • 아이템17 변경 가능성을 최소화하라
        • 아이템18 상속보다는 컴포지션을 사용하라
        • 아이템19 상속을 고려해 설계하고 문서화하라. 그러지 않았다면 상속을 금지하라
        • 아이템20 추상 클래스보다는 인터페이스를 우선하라
        • 아이템21 인터페이스는 구현하는 쪽을 생각해 설계하라
        • 아이템22 인터페이스 타입을 정의하는 용도로만 사용하라
        • 아이템23 태그 달린 클래스보다는 클래스 계층구조를 활용하라
        • 아이템24 멤버 클래스는 되도록 static으로 만들라
        • 아이템25 톱레벨 클래스는 한 파일에 하나만 담으라
      • 제네릭
        • 아이템26 로 타입은 사용하지 말라
        • 아이템27 비검사 경고를 제거하라
        • 아이템28 배열보다는 리스트를 사용하라
        • 아이템29 이왕이면 제네릭 타입으로 만들라
        • 아이템30 이왕이면 제네릭 메서드로 만들라
        • 아이템31 한정적 와일드카드를 사용해 API 유연성을 높이라
        • 아이템32 제네릭과 가변인수를 함께 쓸 때는 신중하라
        • 아이템33 타입 안전 이종 컨테이너를 고려하라
      • 열거 타입과 애너테이션
        • 아이템34 int 상수 대신 열거 타입을 사용하라
        • 아이템35 ordinal 메서드 대신 인스턴스 필드를 사용하라
        • 아이템36 비트 필드 대신 EnumSet을 사용하라
        • 아이템37 ordinal 인덱싱 대신 EnumMap을 사용하라
        • 아이템38 확장할 수 있는 열거 타입이 필요하면 인터페이스를 사용하라
        • 아이템 39 명명 패턴보다 애너테이션을 사용하라
        • 아이템40 @Override 애너테이션을 일관되게 사용하라
        • 아이템41 정의하려는 것이 타입이라면 마커 인터페이스를 사용하라
      • 람다와 스트림
        • 아이템46 스트림에는 부작용 없는 함수를 사용하라
        • 아이템47 반환 타입으로는 스트림보다 컬렉션이 낫다
        • 아이템48 스트림 병렬화는 주의해서 적용하라
      • 메서드
        • 아이템49 매개변수가 유효한지 검사하라
        • 아이템50 적시에 방어적 본사본을 만들라
        • 아이템53 가변인수는 신중히 사용하라
        • 아이템 54 null이 아닌, 빈 컬렉션이나 배열을 반환하라
        • 아이템56 공개된 API 요소에는 항상 문서화 주석을 작성하라
      • 일반적인 프로그래밍 원칙
        • 아이템56 공개된 API 요소에는 항상 문서화 주석을 작성하라
        • 아이템57 지역변수의 범위를 최소화하라
        • 아이템 60 정확한 답이 필요하다면 float와 double은 피하라
      • 예외
        • 아이템 73 추상화 수준에 맞는 예외를 던지라
        • 아이템 74 메서드가 던지는 모든 예외를 문서화하라
      • 동시성
        • 아이템78 공유 중인 가변 데이터는 동기화해 사용하라
        • 아이템79 과도한 동기화는 피하라
        • 아이템 80 스레드보다는 실행자, 태스크, 스트림을 애용하라
      • 직렬화
        • 아이템 87 커스텀 직렬화 형태를 고려해보라
    • Functional Programming in Java
      • Chap 01. 헬로, 람다 표현식
      • Chap 02. 컬렉션의 사용
      • Chap 03. String, Comparator, 그리고 filter
      • Chap 04. 람다 표현식을 이용한 설계
      • CHAP 05. 리소스를 사용한 작업
      • CHAP 06. 레이지
      • CHAP 07. 재귀 호출 최적화
      • CHAP 08. 람다 표현식의 조합
      • CHAP 09. 모든 것을 함께 사용해보자
      • 부록 1. 함수형 인터페이스의 집합
      • 부록 2. 신택스 오버뷰
    • 코틀린 쿡북
      • 2장 코틀린 기초
      • 3장 코틀린 객체지향 프로그래밍
      • 4장 함수형 프로그래밍
      • 5장 컬렉션
      • 6장 시퀀스
      • 7장 영역 함수
      • 9장 테스트
      • 10장 입력/출력
      • 11장 그 밖의 코틀린 기능
    • DDD START!
      • 1장 도메인 모델 시작
      • 2장 아키텍처 개요
      • 3장 애그리거트
      • 4장 리포지터리와 모델구현(JPA 중심)
      • 5장 리포지터리의 조회 기능(JPA 중심)
      • 6장 응용 서비스와 표현 영역
      • 7장 도메인 서비스
      • 8장 애그리거트 트랜잭션 관리
      • 9장 도메인 모델과 BOUNDED CONTEXT
      • 10장 이벤트
      • 11장 CQRS
    • JAVA 8 IN ACTION
      • 2장 동작 파라미터화 코드 전달하기
      • 3장 람다 표현식
      • 4장 스트림 소개
      • 5장 스트림 활용
      • 6장 스트림으로 데이터 수집
      • 7장 병렬 데이터 처리와 성능
      • 8장 리팩토링, 테스팅, 디버깅
      • 9장 디폴트 메서드
      • 10장 null 대신 Optional
      • 11장 CompletableFuture: 조합할 수 있는 비동기 프로그래밍
      • 12장 새로운 날짜와 시간 API
      • 13장 함수형 관점으로 생각하기
      • 14장 함수형 프로그래밍 기법
    • 객체지향과 디자인패턴
      • 객체 지향
      • 다형성과 추상 타입
      • 재사용: 상속보단 조립
      • 설계 원칙: SOLID
      • DI와 서비스 로케이터
      • 주요 디자인 패턴
        • 전략패턴
        • 템플릿 메서드 패턴
        • 상태 패턴
        • 데코레이터 패턴
        • 프록시 패턴
        • 어댑터 패턴
        • 옵저버 패턴
        • 파사드 패턴
        • 추상 팩토리 패턴
        • 컴포지트 패턴
    • NODE.JS
      • 1회차
      • 2회차
      • 3회차
      • 4회차
      • 6회차
      • 7회차
      • 8회차
      • 9회차
      • 10회차
      • 11회차
      • 12회차
      • mongoose
      • AWS란?
    • SRPING IN ACTION (5th)
      • Chap1. 스프링 시작하기
      • Chap 2. 웹 애플리케이션 개발하기
      • Chap 3. 데이터로 작업하기
      • Chap 4. 스프링 시큐리티
      • Chap 5. 구성 속성 사용하기
      • Chap 6. REST 서비스 생성하기
      • Chap 7. REST 서비스 사용하기
      • CHAP 8 비동기 메시지 전송하기
      • Chap 9. 스프링 통합하기
      • CHAP 10. 리액터 개요
      • CHAP 13. 서비스 탐구하기
      • CHAP 15. 실패와 지연 처리하기
      • CHAP 16. 스프링 부트 액추에이터 사용하기
    • 스프링부트 코딩 공작소
      • 스프링 부트를 왜 사용 해야 할까?
      • 첫 번째 스프링 부트 애플리케이션 개발하기
      • 구성을 사용자화 하기
      • 스프링부트 테스트하기
      • 액추에이터로 내부 들여다보기
    • ANGULAR 4
      • CHAPTER 1. A gentle introduction to ECMASCRIPT 6
      • CHAPTER 2. Diving into TypeScript
      • CHAPTER 3. The wonderful land of Web Components
      • CHAPTER 4. From zero to something
      • CHAPTER 5. The templating syntax
      • CHAPTER 6. Dependency injection
      • CHAPTER 7. Pipes
      • CHAPTER 8. Reactive Programming
      • CHAPTER 9. Building components and directives
      • CHAPTER 10. Styling components and encapsulation
      • CHAPTER 11. Services
      • CHAPTER 12. Testing your app
      • CHAPTER 13. Forms
      • CHAPTER 14. Send and receive data with Http
      • CHAPTER 15. Router
      • CHAPTER 16. Zones and the Angular magic
      • CHAPTER 17. This is the end
    • HTTP 완벽 가이드
      • 게이트웨이 vs 프록시
      • HTTP Header
      • REST API
      • HTTP Method 종류
        • HTTP Status Code
      • HTTP 2.x
  • REFERENCE
    • TECH BLOGS
      • 어썸데브블로그
      • NAVER D2
      • 우아한 형제들
      • 카카오
      • LINE
      • 스포카
      • 티몬
      • NHN
      • 마켓컬리
      • 쿠팡
      • 레진
      • 데일리 호텔
      • 지그재그
      • 스타일쉐어
      • 구글
      • 야놀자
    • ALGORITHM
      • 생활코딩
      • 프로그래머스
      • 백준
      • 알고스팟
      • 코딜리티
      • 구름
      • 릿코드
Powered by GitBook
On this page
  • Interpolation
  • Using other components in our templates
  • Property binding
  • Events
  • Expressions vs statements
  • Local variables
  • syntax를 사용하여 DOM 개체 인 HTMLInputElement를 참조하는 로컬 변수 이름을 만든다.
  • Structural directives
  • Other template directives
  • Canonical syntax
  • Summary
  • Reference URL

Was this helpful?

  1. STUDY
  2. ANGULAR 4

CHAPTER 5. The templating syntax

Interpolation

보간법은 간단한 컨셉을 위한 하나의 큰 단어이다.

@Component({
  selector: 'ponyracer-app',
  template: `
   <h1>PonyRacer</h1>
   <h2>{{numberOfUsers}} users</h2>
  `
})
export class PonyRacerAppComponent {
  numberOfUsers: number = 146;
}

Angular가 태그를 찾을 때마다 활성화되는 PonyRacerAppComponent가 있다. PonyRacerAppComponent는 numberofUsers 라는 변수를 가지고 있다. 템플릿은 태그안에 값을 보여주는 표현식인 이중괄호를 사용하여 보여지고 있다.

<ponyracer-app>
  <h1>PonyRacer</h1>
  <h2>146 users</h2>
</ponyracer-app>

는 해당 값으로 대체될 것이다. Angular가 이라는 태그를 감지할 경우에, Angular는 PonyRacerAppComponent 인스턴스를 생성하고 해당 인스턴스는 템플릿의 표현식에 대한 문맥이다. PonyRacerAppComponent 인스턴스는 numberOfUsers 라는 변수를 146으로 설정할것이고 우리는 화면에 146 값을 확인할 것이다.

객체 안에서 numberOfUsers라는 값이 변경될 때마다 템플릿은 자동으로 변경되어 보여질 것이다. 이것은 '변화 감지'라고 불리워지며 Angular의 굉장한 장점중에 하나이다.

기억할 중요한 한 가지 사실은 만약 우리가 value를 존재하지 않는다고 표현하려고 한다면, Angular 는 undefined 보다는 빈 문자열로 보여질 것이다. null 일 경우에도 마찬가지이다.

간단한 변수 대신에 복잡한 객체를 가지고 있다고 가정해보자.

@Component({
  selector: 'ponyracer-app',
  template: `
   <h1>PonyRacer</h1>
   <h2>Welcome {{user.name}}</h2>
  `
})
export class PonyRacerAppComponent {
  user: any = { name: 'Cédric' };
}

보시다시피, 우리는 객체의 속성에 접근하는 것과 같이 좀 더 복잡한 표현식을 삽입 할 수 있다.

<ponyracer-app>
  <h1>PonyRacer</h1>
  <h2>Welcome Cédric</h2>
</ponyracer-app>

만약 우리가 클래스에 존재하지 않는 변수를 템플릿안에 입력한다면 어떠한 일이 발생할것인가?

@Component({
  selector: 'ponyracer-app',
  // typo: users is not user!
  template: `
   <h1>PonyRacer</h1>
   <h2>Welcome {{users.name}}</h2>
  `
})
export class PonyRacerAppComponent {
  user: any = { name: 'Cédric' };
}

앱을 로딩하면 우리는 이러한 에러를 확인할 것이다.

Cannot read property 'name' of undefined in [{{users.name}} in PonyRacerAppComponent]

이제는 템플릿이 올바른지 확신 할 수 있기 때문에 더 나아졌다. Angular 1버젼에서 가장 자주 발생하는 문제 중 하나는 이러한 유형의 오류를 감지할 수 없기 때문에 해결하는데 오랜 시간이 걸릴 수 있었다.

내 사용자 객체가 실제로 서버에서 가져와서 서버 호출의 결과로 평가되기 전에 undefined로 초기화되면 어떻게 될까? 템플릿을 컴파일 할 때 오류를 방지 할 수있는 방법이 있을까?

그렇다. user.name을 사용하는 대신 user?.name을 사용하면 해결할 수 있다.

@Component({
  selector: 'ponyracer-app',
  // user is undefined
  // but the ?. will avoid the error
  template: `
   <h1>PonyRacer</h1>
   <h2>Welcome {{user?.name}}</h2>
  `
})
export class PonyRacerAppComponent {
  user: any;
}

당신은 이제 더이상 어떠한 에러도 없을것이다. "?."는 때때로 안전한 표현이다. 이제 당신은 템플릿을 안전하게 작성할 수 있고 적절하고 확실하게 수행할 수 있을것이다. 우리의 예제로 돌아가보자. 우리는 받은 메시지를 표현할 것이다. 아마도 우리는 다음 스텝에서도 다가오는 pony races를 표현할 수 있을것이다.

그것은 우리로 하여금 우리의 두 번째 구성 요소를 사용하도록 이끌 것이다. 현재로서는 간단하게 만글 것이다.

// in another file, races.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'ns-races',
  template: `<h2>Races</h2>`
})
class RacesComponent {
}

이제이 구성 요소를 PonyRacerAppComponent 템플릿에 포함하려고 한다. 우리는 무엇을 해야 하는가?

Using other components in our templates

우리는 PonyRace 구성 요소 인 RacesComponent를 표시하려는 PonyRacerAppComponent라는 응용 프로그램 구성 요소를 가지고 있다.

// in ponyracer_app.ts
import { Component } from '@angular/core';
@Component({
  selector: 'ponyracer-app',
  // added the RacesComponent component
  template: `
   <h1>PonyRacer</h1>
   <ns-races></ns-races>
  `
})
export class PonyRacerAppComponent {
}

보시다시피 템플릿에 이전에 선언한 태그와 매칭하여 RacesComponent 를 템플릿에 추가하였다. 그러나 이것은 동작하지 않을것이다. 당신의 브라우져는 races 컴포넌트를 보여주지 못한다. 왜 그럴까? 이유는 매우 간단하다.: Angular는 racesComponent를 아직 알지 못하기 때문이다. 고치는것은 매우 간단하다. PonyracerAppComponent 를 추가하였던 방법을 기억하는가? 우리는 이제 두 번째 컴포넌트가 있다. 이것도 반드시 선언해 주어야 한다. racesComponent는 root 컴포넌트는 아니다. 그래서, 이것은 선언을 해주어야 한다.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PonyRacerAppComponent } from './app.component';
// do not forget to import the component
import { RacesComponent } from './races.component';
@NgModule({
  imports: [BrowserModule],
  declarations: [PonyRacerAppComponent, RacesComponent],
  bootstrap: [PonyRacerAppComponent]
})
export class AppModule {
}

클래스를 직접적으로 전달하므로 클래스를 가져와야 한다. 가져오기를 하기위해서는 소스 파일인 races.component.ts 에서 RacesComponent 클래스를 내보내야 한다.

// in another file, races.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'ns-races',
  template: `<h2>Races</h2>`
})
export class RacesComponent {
}

이제 reces 컴포넌트는 우리의 브라우져에 이렇게 보일 것이다.

<ponyracer-app>
  <h1>PonyRacer</h1>
  <ns-races>
   <h2>Races</h2>
  </ns-races>
</ponyracer-app>

Property binding

보간법은 템플릿에서 동적인 부분을 갖는 유일한 방법 중 하나이다. 실제로 우리가 보았던 보간법은 Angular 2 템플릿 시스템의 핵심 인 속성 바인딩을 사용하는 쉬운 방법이다.

Angular 2에서는 각 대괄호를 대괄호 []로 묶인 HTML 요소의 특수 속성을 통해 작성할 수 있다. 처음에는 이상하게 보이지만 실제로는 유효한 HTML 이다. HTML 속성은 따옴표, 어포 스트로피, 슬래시, 같음, 공백과 같은 몇 가지 문자를 제외하고 원하는 모든 것으로 시작할 수 있다.

나는 DOM 속성에 대해 이야기하고 있지만 어쩌면 이것이 당신에게 명확하지 않을 수도 있다. 우리는 일반적으로 HTML 속성에 쓰고 있다.

<input type="text" value="hello">

위의 입력 태그에는 두 가지 속성, 즉 유형 속성과 값 속성이 있다. 브라우저가이 태그를 파싱하면 일치하는 속성 유형 및 값이있는 해당 DOM 노드 (HTMLInputElement)를 만든다. 각 표준 HTML 속성에는 DOM 노드에 해당 속성이 있다. 그러나 DOM 노드에는 해당 특성이없는 추가 속성도 있다. (예 : childElementCount, innerHTML 또는 textContent )

사용자 이름을 표시하기 위한 보간법은 다음과 같다.

{% raw %}<p>{{user.name}}</p>{% endraw %}

다음은 간단한 구문이다.

<p [textContent]="user.name"></p>

대괄호 구문을 사용하면 DOM 속성 textContent를 수정할 수 있으며 보간 용으로 사용 된 것처럼 현재 구성 요소 인스턴스의 컨텍스트에서 평가되는 user.name 값을 지정한다. 구문 분석기는 대소문자를 인지하기 때문에 정확한 이름을 사용해야한다. DOM 속성은 HTML 속성보다 큰 이점을 가지고 있다. 만약 내가 입력 예제에서 value 속성은 항상 'hello'를 보여주는 반면에 DOM 의 Value 속성 노드는 브라우저에 의해 동적으로 수정되므로 사용자가 텍스트 필드에 입력 한 내용이 모두 포합된다.

마지막으로 속성은 부울 값을 가질 수 있지만 일부 속성은 시작 태그에 존재하거나 부재함으로써 속성을 반영 할 수 있다. 예를 들어, option 태그에 selected 속성이 있다. 어떤 값을 지정했는지에 상관없이 옵션이있는 한 옵션을 선택한다.

<option selected>Rainbow Dash</option>
<option selected="false">Rainbow Dash</option> <!-- still selected -->

Angular 2 와 같은 속성 접근을 사용하게 되면

<option [selected]="isPonySelected" value="Rainbow Dash">Rainbow Dash</option>

pony는 isPonySelected가 true이면 선택되어 질 것이고 그렇지 않으면 선택되지 않을 것이다. 그리고 isPonySelected의 값이 변할 때마다 선택된 속성도 변경될 것이다.

Angular 1에서는 번거롭지만 많은 것들을 할수 있었다. 예를 들어 이미지를 동적 주소로 바인딩 하는것이 있다.

{% raw %}<img src="{{pony.avatar.url}}">{% endraw %}

이 구문은 큰 문제가 있다. 브라우져는 src 속성을 읽자마자 이미지를 가져오려고 시도할 것이고 실패로 보여질 것이다. 왜냐하면 은 유효한 URL이 아닌 HTTP 요청이기 때문이다.

그래서 Angular 1에서는 특별한 디렉티브가 있었다. : ng-src

{% raw %}<img ng-src="{{pony.avatar.url}}">{% endraw %}

src 대신 ng-src를 사용하여 문제는 해결하였다. AngularJS가 앱을 컴파일하고 나면 src 속성에 올바른 URL이 추가되어 이미지 다운로드가 시작된다. 그러나 이는 두 가지 문제점이 있다.

  • Angular 팀은 각 표준 속성에 대한 지침을 작성해야했습니다.

    그들은 그렇게했고, 우리는 그것들을 배워야했다.

    그러나 이제는 HTML에 외부 웹 구성 요소가 포함될 수있는 세상에 있다.

<ns-pony name="Rainbow Dash"></ns-pony>

Web Component를 사용하려는 경우 Web Component 개발자가 주의 깊게 처리 한 경우를 제외하고 대부분의 JS 프레임 워크에서 동적 값을 전달하는 쉬운 방법이 없다. 자세한 내용은 Web Component 챕터를 읽어보도록 해라.

Web Component는 브라우져 엘리먼트처럼 동작해야 한다. Web Component들은 Angular 2기반의 속성, 이벤트, 함수 등을 가져야 한다.

<ns-pony [name]="pony.name"></ns-pony>

그리고 정상적으로 동작한다. Angular는 속성과 요소에 대한 동기화를 유지할것이다. 더 이상 지시어를 배울 필요가 없다. 요소를 숨기려면 표준 숨김 속성을 사용할 수 있다.

<div [hidden]="isHidden">Hidden or not</div>

ishidden이 true일 경우 div는 사라질 것이다. Angular는 숨겨진 속성과 직접 작동하기 때문이다. 더 이상 Angular에서 사용된 directives 중의 하나 인 ng-hide와 같은 directive를 사용할 필요가 없다. 스타일 속성의 color 속성과 같이 중첩된 속성에 접근할 수도 있다.

<p [style.color]="foreground">Friendship is Magic</p>

foreground의 속성이 '녹색'으로 변한다고 하면, color도 녹색으로 변할 것이다. 따라서 Angular 2는 속성을 사용하고 있다. 어떤 값을 전달할 수 있을까? 우리는 이미 보간 속성 property="" 을 이미 보았다.

{% raw %}<ns-pony name="{{pony.name}}"></ns-pony> {% endraw %}

이것은 [property] ="expression"과 동일하다.

<ns-pony [name]="pony.name"></ns-pony>

'Pony' 글자 뒤에 pony의 이름을 덧 붙이기를 원한다면 당신은 두 가지 옵션이 있다.

{% raw %}<ns-pony name="Pony {{pony.name}}"></ns-pony>{% endraw %}
<ns-pony [name]="'Pony ' + pony.name"></ns-pony>

만약 당신이 동적인 변수를 사용하지 않는다면 property = "value" 와 같이 간단하게 적을 수 있다.

<ns-pony name="Rainbow Dash"></ns-pony>

이들 모두는 동등하고 구문은 개발자가 구성 요소를 설계하는 방법에 달려 있지 않는다. 구성 요소가 값 또는 참조 예를 기대하고 있는지를 알아야하는 AngularJS 1.x의 경우와 같다고 할 수 있다.

{% raw %}<ns-pony name="{{pony.fullName()}}"></ns-pony>
<ns-pony [name]="pony.fullName()"></ns-pony>{% endraw %}

Events

웹 애플리케이션을 개발한다면, 일을 표시하는 것이 일의 한 부분 일뿐만 아니라 사용자 상호 작용을 처리해야한다는 것을 알고 있어야 한다. 이를 허용하기 위해 브라우져는 당신이 받을 수 제어 할 수 있도록 이벤트를 발생시킨다. click, keyup, mousemove 등 ... AngularJS 1.x는 이벤트 당 하나의 지시문을 가지고 있고, ng-click, ng-keyup, ng-mousemove 등 ... Angular 2에서 이것을 더욱 기억하기 쉽고 간단하게 설계하였다.

우리 RacesComponent로 돌아가서, 이제 클릭했을 때 레이스를 표시 할 버튼이 필요하다. 상호작용은 다음과 같이 작성할 것이다.

<button (click)="onButtonClick()">Click me!</button>

위 예의 버튼을 클릭하면 onButtonClick () 메소드의 호출이 트리거가 발생한다.

@Component({
  selector: 'ns-races',
  template: `
   <h2>Races</h2>
   <button (click)="refreshRaces()">Refresh the races list</button>
   <p>{{races.length}} races</p>
  `
})
export class RacesComponent {
  races: any = [];
  refreshRaces() {
   this.races = [{ name: 'London' }, { name: 'Lyon' }];
  }
}

만약 당신의 브라우져에서 시도하려면, 당신은 처음에 이러한 구조를 확인할 것이다.

<ponyracer-app>
  <h1>PonyRacer</h1>
  <ns-races>
   <h2>Races</h2>
   <button (click)="refreshRaces()">Refresh the races list</button>
   <p>0 races</p>
  </ns-races>
</ponyracer-app>

클릭한 이후에 '0 races'는 '2 races'로 변할 것이다. 명령문은 함수 호출이 될 수도 있지만 실행 가능한 명령문 또는 실행 가능한 명령문의 연속일 수도 있다.

<button (click)="firstName = 'Cédric'; lastName = 'Exbrayat'">
  Click to change name to Cédric Exbrayat
</button>

그러나 나는 이것을 권고하지는 않는다. 메서드를 사용하면 동작을 캡슐화 하는데 더 좋은 방법이기 때문이다. 코드를 유지 관리하고 테스트하기가 쉬우며 보기가 더 단순하다.

좋은 점은 표준 DOM 이벤트뿐만 아니라 발생시킬 수 있는 사용자 정의 이벤트에서도 작동한다는 것이다. Angular 구성 요소 또는 웹 구성 요소에서 가져올것이다. 나중에 맞춤 이벤트를 시작하는 방법을 살펴 보겠다.

잠시 동안 RacesComponent 구성 요소가 새로운 경주를 사용할 수 있음을 앱에 알리기 위해 맞춤 이벤트를 내 보냈다고 가정 해 보자.

@Component({
  selector: 'ponyracer-app',
  template: `
   <h1>PonyRacer</h1>
   <ns-races (newRaceAvailable)="onNewRace()"></ns-races>
  `
})
export class PonyRacerAppComponent {
  onNewRace() {
   // add a flashy message for the user.
  }
}

구성 요소에 newRaceAvailable이라는 사용자 지정 이벤트가 있고이 이벤트가 발생하면 PonyRacerAppComponentis의 onNewRace () 메서드가 호출되었음을 쉽게 알 수 있다. Angular는 요소와 해당 요소의 이벤트를 수신하므로 거품이 발생하는 이벤트에 반응한다. 템플릿을 고려해보도록 하자.

<div (click)="onButtonClick()">
  <button>Click me!</button>
</div>

사용자가 div 안에 포함 된 버튼을 클릭하더라도 onButtonClick () 메서드가 호출된다. 왜냐하면 이벤트가 거품을 내뿜기 때문이다. 그리고 당신은라는 메서드에서 이벤트에 액세스 할 수 있다. 단지 $ event를 당신의 메소드에 넘겨 주면된다.

<div (click)="onButtonClick($event)">
  <button>Click me!</button>
</div>

그런 다음 구성 요소 클래스에서 이벤트를 처리 할 수 있다.

onButtonClick(event) {
  console.log(event);
}

기본적으로 이벤트는 지속적으로 거품을 내며 결국 계층에서 다른 이벤트 리스너를 트리거하게된다. 이 이벤트를 사용하여 기본 동작을 방지하고 원하는 경우 전파를 취소 할 수 있다.

onButtonClick(event) {
  event.preventDefault();
  event.stopPropagation();
}

또 하나의 특징은 키보드 이벤트를 보다 쉽게 처리할 수 있다는 것이다.

<textarea (keydown.space)="onSpacePress()">Press space!</textarea>

spacekey를 누를 때마다 onSpacePress () 메소드가 호출있고 (keydown.alt.space) 등의 커스터마이징된 콤보를 할 수 있다. 이 부분을 결론 짓기 위해 나는 다음과 같이 큰 차이가 있음을 지적하고자 한다.

<component [property]="doSomething()"></component>
<component (event)="doSomething()"></component>

첫 번째 속성 바인딩은 doSomething () 값은 식이라고 각 변경 검색주기에서 평가 된 속성을 업데이트 할 필요가 있는지 여부를 확인한다.

그러나 두 번째의 경우는 이벤트 바인딩은 doSomething () 값은 문장이라고 이벤트가 트리거 된 경우에만 평가된다.

정의에 따르면 그들은 완전히 다른 목표를 가지고 있으며, 당신이 의심 할 수 있듯이, 그들은 다른 제한을 가지고 있다.

Expressions vs statements

웹 애플리케이션을 개발한다면, 일을 표시하는 것이 일의 한 부분 일뿐만 아니라 사용자 상호 작용을 처리해야한다는 것을 알고 있어야 한다. 이를 허용하기 위해 브라우져는 당신이 받을 수 제어 할 수 있도록 이벤트를 발생시킨다. click, keyup, mousemove 등 ... AngularJS 1.x는 이벤트 당 하나의 지시문을 가지고 있고, ng-click, ng-keyup, ng-mousemove 등 ... Angular 2에서 이것을 더욱 기억하기 쉽고 간단하게 설계하였다.

우리 RacesComponent로 돌아가서, 이제 클릭했을 때 레이스를 표시 할 버튼이 필요하다. 상호작용은 다음과 같이 작성할 것이다.

<button (click)="onButtonClick()">Click me!</button>

위 예의 버튼을 클릭하면 onButtonClick () 메소드의 호출이 트리거가 발생한다.

@Component({
  selector: 'ns-races',
  template: `
   <h2>Races</h2>
   <button (click)="refreshRaces()">Refresh the races list</button>
   <p>{{races.length}} races</p>
  `
})
export class RacesComponent {
  races: any = [];
  refreshRaces() {
   this.races = [{ name: 'London' }, { name: 'Lyon' }];
  }
}

만약 당신의 브라우져에서 시도하려면, 당신은 처음에 이러한 구조를 확인할 것이다.

<ponyracer-app>
  <h1>PonyRacer</h1>
  <ns-races>
   <h2>Races</h2>
   <button (click)="refreshRaces()">Refresh the races list</button>
   <p>0 races</p>
  </ns-races>
</ponyracer-app>

클릭한 이후에 '0 races'는 '2 races'로 변할 것이다. 명령문은 함수 호출이 될 수도 있지만 실행 가능한 명령문 또는 실행 가능한 명령문의 연속일 수도 있다.

<button (click)="firstName = 'Cédric'; lastName = 'Exbrayat'">
  Click to change name to Cédric Exbrayat
</button>

그러나 나는 이것을 권고하지는 않는다. 메서드를 사용하면 동작을 캡슐화 하는데 더 좋은 방법이기 때문이다. 코드를 유지 관리하고 테스트하기가 쉬우며 보기가 더 단순하다.

좋은 점은 표준 DOM 이벤트뿐만 아니라 발생시킬 수 있는 사용자 정의 이벤트에서도 작동한다는 것이다. Angular 구성 요소 또는 웹 구성 요소에서 가져올것이다. 나중에 맞춤 이벤트를 시작하는 방법을 살펴 보겠다.

잠시 동안 RacesComponent 구성 요소가 새로운 경주를 사용할 수 있음을 앱에 알리기 위해 맞춤 이벤트를 내 보냈다고 가정 해 보자.

@Component({
  selector: 'ponyracer-app',
  template: '<h1>PonyRacer</h1> <ns-races (newRaceAvailable)="onNewRace()"></ns-races>'
})
export class PonyRacerAppComponent {
  onNewRace() {
   // add a flashy message for the user.
  }
}

구성 요소에 newRaceAvailable이라는 사용자 지정 이벤트가 있고이 이벤트가 발생하면 PonyRacerAppComponentis의 onNewRace () 메서드가 호출되었음을 쉽게 알 수 있다. Angular는 요소와 해당 요소의 이벤트를 수신하므로 거품이 발생하는 이벤트에 반응한다. 템플릿을 고려해보도록 하자.

<div (click)="onButtonClick()">
  <button>Click me!</button>
</div>

사용자가 div 안에 포함 된 버튼을 클릭하더라도 onButtonClick () 메서드가 호출된다. 왜냐하면 이벤트가 거품을 내뿜기 때문이다. 그리고 당신은라는 메서드에서 이벤트에 액세스 할 수 있다. 단지 $ event를 당신의 메소드에 넘겨 주면된다.

<div (click)="onButtonClick($event)">
  <button>Click me!</button>
</div>

그런 다음 구성 요소 클래스에서 이벤트를 처리 할 수 있다.

onButtonClick(event) {
  console.log(event);
}

기본적으로 이벤트는 지속적으로 거품을 내며 결국 계층에서 다른 이벤트 리스너를 트리거하게된다. 이 이벤트를 사용하여 기본 동작을 방지하고 원하는 경우 전파를 취소 할 수 있다.

onButtonClick(event) {
  event.preventDefault();
  event.stopPropagation();
}

또 하나의 특징은 키보드 이벤트를 보다 쉽게 처리할 수 있다는 것이다.

<textarea (keydown.space)="onSpacePress()">Press space!</textarea>

spacekey를 누를 때마다 onSpacePress () 메소드가 호출있고 (keydown.alt.space) 등의 커스터마이징된 콤보를 할 수 있다. 이 부분을 결론 짓기 위해 나는 다음과 같이 큰 차이가 있음을 지적하고자 한다.

<component [property]="doSomething()"></component>
<component (event)="doSomething()"></component>

첫 번째 속성 바인딩은 doSomething () 값은 식이라고 각 변경 검색주기에서 평가 된 속성을 업데이트 할 필요가 있는지 여부를 확인한다.

그러나 두 번째의 경우는 이벤트 바인딩은 doSomething () 값은 문장이라고 이벤트가 트리거 된 경우에만 평가된다.

정의에 따르면 그들은 완전히 다른 목표를 가지고 있으며, 당신이 의심 할 수 있듯이, 그들은 다른 제한을 가지고 있다.

Local variables

Angular가 변수를 찾기 위해 구성 요소 인스턴스를 볼 것이라고 말하면 기술적으로 올바르지 않다. 실제로 구성 요소 인스턴스와 로컬 변수를 검사한다. 지역 변수는 #syntax를 사용하여 템플릿에서 동적으로 선언 할 수있는 변수이다.

입력 값을 표시한다고 가정해 보자.

{% raw %}<input type="text" #name>
{{ name.value }}{% endraw %}

syntax를 사용하여 DOM 개체 인 HTMLInputElement를 참조하는 로컬 변수 이름을 만든다.

이 로컬 변수는 템플릿의 어느 위치에서나 사용할 수 있다. value 속성을 가지므로 이 속성을 보간 된 표현식에 표시 할 수 있다. 나중에 이 예제로 돌아 오겠다.

지역 변수의 또 다른 유용한 사용법은 다른 요소에서 어떤 종류의 액션을 실행하고자 할 때이다.

예를 들어, 버튼을 클릭 할 때 요소에 포커스를 둘 수 있습니다. 이는 AngularJS 1.x에서 사용자 지정 지시문을 작성해야했기 때문에 약간 번거로운 점이 있었다.

focus () 메소드는 DOM API의 표준 부분이며이를 활용할 수 있고 지역 변수를 사용하면 Angular 2를 쉽게 접근 할 수 있다.

<input type="text" #name>
<button (click)="name.focus()">Focus the input</button>

또한 사용자 정의 구성 요소 (응용 프로그램에서 작성한 구성 요소, 다른 프로젝트에서 가져온 구성 요소 또는 실제 웹 구성 요소)와 함께 사용할 수도 있다.

<google-youtube #player></google-youtube>
<button (click)="player.play()">Play!</button>

여기에서 버튼은 구성 요소의 동영상 재생을 시작할 수 있다. 이것은 실제로 Polymer로 작성된 실제 웹 구성 요소이다! 이 구성 요소에는 단추를 클릭 할 때 Angular가 호출하는 play () 메서드가 있다.

지역 변수에는 몇 가지 유스 케이스가 있으며, 점진적으로 살펴 보겠습니다. 그 중 하나가 바로 다음 섹션에 설명되어 있습니다.

Structural directives

702/5000 이제 우리의 RacesComponent는 여전히 레이스를 표시하지 않는다. Angular 2의 "적절한 방법"은 각 레이스를 표시하는 또 다른 구성 요소 인 RaceComponent를 만드는 것을 의미한다. 약간 더 간단한 작업을 수행하기 위해 간단한 목록을 사용할 것이다.

속성 및 이벤트 바인딩은 훌륭하지만 컬렉션을 반복하고 항목 당 요소를 추가하는 것과 같이 DOM 구조를 변경할 수는 없다. 이를 위해서는 구조 지시문을 사용해야한다. Angular의 지시문은 실제로 구성 요소와 비슷하지만 템플릿이 없다. 요소에 비헤이비어를 추가하는 데 사용된다. Angular 2에서 제공하는 구조 지시문은 HTML 사양의 표준 태그 인 template 요소를 사용한다.

<template>
  <div>Races list</div>
</template>

여기에 템플릿을 정의하고 간단한 div를 표시한다. 브라우져가 표시하지 않으므로 단일로는 사용되지 않는다. 그러나 하나의 'template'요소를 뷰에 추가한다면 Angular 2 는 해당 내용을 사용할 수 있다. 구조적 지시문에는 내용을 표시하거나 표시하지 않고 반복하는 등의 간단한 작업을 수행 할 수 있다.

NgIf

조건이 일치하는 경우에만 템플릿을 사용하길 원한다면 ngIf를 사용하면 된다.

<template [ngIf]="races.length > 0">
  <div><h2>Races</h2></div>
</template>

여기서 템플릿은 race가 적어도 하나의 요소를 가지고있을 때, 즉 race가 있다면 인스턴스화 될 것이다. 이 구문은 약간 길기 때문에 짧은 버전으로 보여주었다.

<div *ngIf="races.length > 0"><h2>Races</h2></div>

구문은 *를 사용하여 구조 지시문임을 나타낸다. ngIf 또는 경주 값이 변경 될 때마다 div가 표시되지 않는다. 더 이상 경주가 없으면 div는 사라질것이다. 프레임 워크에서 제공되는 지시문은 이미 사전 로드되어 있으므로 @Componentdecorator의 지시어 속성에서 NgIf를 가져오고 선언 할 필요가 없다.

import { Component } from '@angular/core';
@Component({
  selector: 'ns-races',
  template: `<div *ngIf="races.length > 0"><h2>Races</h2></div>`
})
export class RacesComponent {
  races: Array<any> = [];
}

NgFor

실제 데이터로 작업하면 필연적으로 무언가의 목록을 표시하게 된다. NgFor는 매우 유용하게 사용 된다. 컬렉션의 항목 당 하나의 템플릿을 인스턴스화 할 수 있다. 우리의 RacesComponent 구성 요소에는 아마 추측 할 수 있듯이 표시 할 경주의 배열 인 필드 경주가 있습니다.

import { Component } from '@angular/core';
@Component({
  selector: 'ns-races',
  template: `<div *ngIf="races.length > 0">
  <h2>Races</h2>
  <ul>
   <li *ngFor="let race of races">{{race.name}}</li>
  </ul>
  </div>`
})
export class RacesComponent {
  races: Array<any> = [{ name: 'London' }, { name: 'Lyon' }];
}

이제 우리 컬렉션에는 항목 당 하나의 li 태그가있는 멋진 목록이 있다.

<ul>
  <li>London</li>
  <li>Lyon</li>
</ul>

NgFor가 microsyntax라고 하는 특정 구문을 사용하고 있다.

<ul>
  <li *ngFor="let race of races">{{race.name}}</li>
</ul>
<ul>
  <template ngFor let-race [ngForOf]="races">
   {% raw %}<li>{{race.name}}</li>{% endraw %}
  </template>
</ul>

여기서 당신이 인지할 수 있는 것들이 있다.

  • template 요소는 template 안에 있는 요소들을 정의한다.

  • NgFor 지시문이 적용되어 있다.

  • NgForOf 요소는 표현할 집합에 대한 정의 이다.

  • race 변수는 현재 요소를 반영하고 함춥된 변수를 사용하는 것을 허용한다.

그러나 이 모든 것을 기억하는 것보다는 짧은 형식으로 사용하는 게 더 효과적이다.

<ul>
  {% raw %}<li *ngFor="let race of races">{{race.name}}</li>{% endraw %}
</ul>

현재 요소의 색인에 바인드 된 다른 지역 변수를 선언 할 수 있다.

<ul>
  {% raw %}<li *ngFor="let race of races; let i=index">{{i}} - {{race.name}}</li>{% endraw %}
</ul>

지역 변수 i는 0에서 시작하여 현재 요소의 인덱스를 받는다.

<ul>
  <li>0 - London</li>
  <li>1 - Lyon</li>
</ul>

유용 할 수있는 다른 내 보낸 변수도 있습니다. • even, 요소가 짝수 인덱스를 갖는 경우 참인 부울 값이다. • odd, 부울 값은 요소에 홀수 색인이있는 경우 true이다. • first : 요소가 컬렉션의 첫 번째 요소 인 경우 참인 부울값 이다. • last : 요소가 컬렉션의 마지막 요소 인 경우 참인 부울값 이다.

NgSwtich

이름에서 짐작할 수 있듯이 지시문은 조건에 따라 다른 템플릿을 전환 할 수있게 해준다.

<div [ngSwitch]="messageCount">
  <p *ngSwitchCase="0">You have no message</p>
  <p *ngSwitchCase="1">You have a message</p>
  <p *ngSwitchDefault>You have some messages</p>
</div>

보시다시피 ngSwitch는 조건을 취하고 ngSwitchCase는 가능한 값을 취한다. 일치하는 값이 없을 경우 ngSwitchDefault를 표시 할 수도 있다.

Other template directives

다른 두 개의 지시문은 템플릿을 작성할 때 유용 할 수 있지만 방금 본 것과 같은 구조 지시문은 아니다. 이러한 지시문은 표준 지시문이다.

NgStyle

우리는 이미 우리가 요소의 스타일에 따라 행동 할 수 있음을 보았다.

<p [style.color]="foreground">Friendship is Magic</p>

동시에 여러 스타일을 설정해야하는 경우 ngStyle 지시문을 사용할 수 있습니다.

{% raw %}<div [ngStyle]="{fontWeight: fontWeight, color: color}">I've got style</div>{% endraw %}

지시문은 키가 스타일을 설정할 객체를 기대한다. 키는 camelCase (fontWeight) 또는 대시 ( 'font-weight') 중 하나 일 수 있다.

NgClass

같은 문맥으로 클래스 지시어를 사용하면 요소를 동적으로 클래스에 추가하거나 제거 할 수 있다. 스타일은 속성 바인딩을 사용하여 하나의 클래스를 설정할 수 있다.

<div [class.awesome-div]="isAnAwesomeDiv()">I've got style</div>

또는 여러 항목을 동시에 설정하려는 경우 ngClass를 사용할 수 있다.

{% raw %} <div [ngClass]="{'awesome-div': isAnAwesomeDiv(), 'colored-div': isAColoredDiv()}">I've got style</div>{% endraw %}

Canonical syntax

우리가 본 모든 구문은 표준 구문이라는보다 긴 상응을 가지고 있다. 이것은 주로 서버 측의 템플릿 시스템이 [] 또는 () 구문에 문제가있을 경우 또는, () *를 사용할 수없는 경우에 유용하다.

속성 바인딩을 선언하려는 경우 다음을 수행 할 수 있다.

<ns-pony [name]="pony.name"></ns-pony>

또는 정규 구문을 사용하여 표현할 수 있다.

<ns-pony bind-name="pony.name"></ns-pony>

이벤트 할당도 마찬가지 이다.

<button (click)="onButtonClick()">Click me!</button>

또는 정규 구문을 사용하여 표현할 수 있다.

<button on-click="onButtonClick()">Click me!</button>
<input type="text" ref-name>
<button on-click="name.focus()">Focus the input</button>
<input type="text" #name>
<button (click)="name.focus()">Focus the input</button>

Summary

Angular 2 템플릿 시스템은 HTML의 동적 부분을 표현하는 강력한 구문을 제공한다. 데이터와 속성 바인딩, 이벤트 바인딩 및 템플릿 관련 문제를 명확한 방법으로 표현할 수 있다. 각각 고유 한 심볼이 있다.

• 보간을 위한 • 속성 바인딩을 위한 [] • 이벤트 바인딩을 위한 () • 변수 선언을 위한 #for • 구조 지시문을 위한 *

다른 프레임 워크처럼 표준 웹 구성 요소와 상호 작용할 수있는 방법을 제공한다. 다양한 의미 사이에 모호성이 없으므로 템플릿과 IDE가 점진적으로 향상되어 템플릿에서 작성한 내용에 대한 의미있는 경고를 얻을 수 있다. 이 모든 기호는 정식 버전의 짧은 버전으로, 원하는 경우 사용할 수도 있다. 이 구문을 유창하게하려면 시간이 좀 걸리 겠지만 곧 속도가 빨라진다. 그러면 읽고 쓰는 것이 쉽다. 계속 진행하기 전에 전체 예제를 살펴 보도록 하자.

pony 목록을 표시하는 PoniesComponent 구성 요소를 작성하고 싶다. 각 조랑말은 PonyComponent 구성 요소로 나타내야하지만 구성 요소에 매개 변수를 전달하는 방법을 아직 보지 못했다. 이제는 간단한 목록을 보여줄 것이다. 목록은 표시되지 않는 경우에만 표시되어야 한다. 비어있는, 그리고 내 목록의 짝수 라인에 대한 몇 가지 색상을 갖고 싶다. 마지막으로 버튼 클릭으로 목록을 새로 고침하고 싶다.

import { Component } from '@angular/core';
@Component({
  selector: 'ns-ponies',
  template: ``
})
export class PoniesComponent {
}

이전 장에서 테스트 한 PonyRacerAppComponent 구성 요소에 추가 할 수 있다. 이를 가져 와서 지시문에 추가하고 </ ns-ponies> 태그를 템플릿에 삽입해야 한다.

import { Component } from '@angular/core';
@Component({
  selector: 'ns-ponies',
  template: ``
})
export class PoniesComponent {
  ponies: Array<any> = [{ name: 'Rainbow Dash' }, { name: 'Pinkie Pie' }];
}

우리는 Ngfor를 사용하여 리스트를 보여줄것이다.

import { Component } from '@angular/core';
@Component({
  selector: 'ns-ponies',
  template: `<ul>
   <li *ngFor="let pony of ponies">{{pony.name}}</li>
  </ul>`
})
export class PoniesComponent {
  ponies: Array<any> = [{ name: 'Rainbow Dash' }, { name: 'Pinkie Pie' }];
}

추가 버튼도 추가해보자.

import { Component } from '@angular/core';
@Component({
  selector: 'ns-ponies',
  template: `<button (click)="refreshPonies()">Refresh</button>
  <ul>
   <li *ngFor="let pony of ponies">{{pony.name}}</li>
  </ul>`
})
export class PoniesComponent {
  ponies: Array<any> = [{ name: 'Rainbow Dash' }, { name: 'Pinkie Pie' }];
  refreshPonies() {
   this.ponies = [{ name: 'Fluttershy' }, { name: 'Rarity' }];
  }
}
import { Component } from '@angular/core';
@Component({
  selector: 'ns-ponies',
  template: `<button (click)="refreshPonies()">Refresh</button>
  <ul>
   <li *ngFor="let pony of ponies; let isEven=even"
   [style.color]="isEven ? 'green' : 'black'">
   {{pony.name}}
   </li>
  </ul>`
})
export class PoniesComponent {
  ponies: Array<any> = [{ name: 'Rainbow Dash' }, { name: 'Pinkie Pie' }];
  refreshPonies() {
   this.ponies = [{ name: 'Fluttershy' }, { name: 'Rarity' }];
  }
}

보시다시피, 우리는 템플릿 구문의 모든 범위를 사용했으며, 우리는 완벽하게 작동하는 구성 요소를 가지고 있다. 우리의 데이터는 여전히 하드 코드되어 있다. 곧 서비스를 사용하여 가져 오는 방법을 살펴 보자! 이것은 의존성 주입을 먼저 배우므로 HTTP 서비스를 사용할 수 있음을 의미한다.

Reference URL

PreviousCHAPTER 4. From zero to somethingNextCHAPTER 6. Dependency injection

Last updated 5 years ago

Was this helpful?

먼저 개발자로서 ng-src에 제공 할 가치를 알아야 한다. 그것은 ' '' ''? 'pony.avatar.url'? ''? 문서를 읽는 것 외에는 알 길이 없다.

https://gravatar.com'이었습니까?
https://gravatar.com
Become a NINJA with Angular 2
Learn Angular 2
Angular 2 Component
An Introduction to Angular 2