AngularJS, Application Structure

Module

AngularJS 애플리케이션의 기본 구성 단위로, 여러 구성 요소를 그룹화합니다.

Service, Factory, Provider

• Data와 Business Logic을 담고 있는 그릇
• Controller에 주입해서 넣을 수 있음

Directive

• React의 JSX Component와 같이 요소로 사용 가능
• restrict를 통해 요소, 속성, 클래스로 사용가능
• 주의점은 JS에서는 CamelCase Ex) yeChanSong html에서 태그로 사용될 경우 kebabCase Ex)ye-chan-song
• DOM 조작 혹은 복잡한 동작에 적합

Component

• Angular 1.5버전 부터 나온 컴포넌트 React 컴포넌트와 유사한 부분이 많다.
• 재사용성 UI와 단방향 바인드로 구성이 쉽고 사용하기 간결하다.
• 주의점은 JS에서는 CamelCase Ex) yeChanSong html에서 태그로 사용될 경우 kebabCase Ex)ye-chan-song
• UI 구성 요소로 재활용 사용 용도

참고 그림 1

참고 그림 2

MVC 패턴에서의 역할

• Model: 애플리케이션의 데이터와 비즈니스 로직을 관리합니다. AngularJS에서는 서비스(Service)나 팩토리(Factory)가 모델 역할을 할 수 있습니다.
• View: 사용자가 보는 화면입니다. HTML 템플릿을 사용하여 데이터를 표시합니다.
• Controller: 모델과 뷰를 연결하고, 사용자 입력을 처리하며, 데이터를 업데이트합니다.

AngularJS를 소개합니다.