Angular

JS Framework 비교 Angular 구성 요소 component : @Compnent장식자 + component클래스 template : 화면 구성 역할을 담당하고 html로 작성 directive : template의 html태그 내의 속성 핸들링 service : 컴포넌트가 공통적으로 사용되는 비즈니스 로직 처리 담당 module : 각 구성요...

컴포넌트는 다음과 같이 3 영역으로 구분된다. > - import 영역 @Component 영역 컴포넌트 클래스 영역 import영역 > 컴포넌트에서 필요한 외부 모듈(모듈 패키지)의 특정 클래스를 사용하기 위해 import필요. 라이브러리 모듈 : Angular에 내장된 모듈을 의미, @사용 사용자 정의 모듈 : 사용자가 필요에 의해서 만든 모듈 의미...

자식이 생성되면, 자식 selector를 호출하여 부모에서 사용할 수 있다.

바인딩 > 컴포넌트는 화면 구현을 담당하는 template과 비즈니스 로직을 담당하는 컴포넌트 클래스 간의 상호작용을 위한 방법으로 바인딩을 이용한다. {{}} : 단방향, 인터폴레이션이라고 부름. 클래스 속성 및 메서드를 template에서 접근 가능 [속성] :

ng g interface book경로명/book파일명

속성 : 속성 바인딩, 태그안에서 사용되고 속성값으로 컴포넌트 클래스의 속성값과 연동

class.CSS클래스명 = boolean값;

app.component.ts app.component.html 실행화면

이벤트 바인딩

[(ngModel)] = "변수명"; template과 컴포넌트 클래스간에 양방향 바인딩 처리 가능

이벤트 바인딩에 대해서 실습을 해보자 결과 화면