[Angular] 4장 템플릿

✅ 1. Angular 템플릿이란?Angular 템플릿은 컴포넌트의 UI(View)를 정의하는 구조로 단순 HTML 뿐만 아닌 Angular 문법을 이용합니다.데이터 표시이벤트 처리조건/반복 렌더링스타일/클래스 동적 적용컴포넌트 클래스에 정의된 변수와 메서드에 연동 ng generate component user// user.component.tsimport { Component } from '@angular/core';@Component({ selector: 'app-user', templateUrl: './user.component.html',})export class UserComponent { name = 'Angular';}// app-routing-module.tsimport { Rout..

• format_list_bulleted Front-End/Angualr
• · 2025. 8. 20.
• textsms

[Angular] 3장 컴포넌트 생성 및 데이터 바인딩

✅ 1.컴포넌트 생성하기Angular CLI를 사용해 컴포넌트를 생성할 수 있습니다. 터미널에 다음 명령어로 컴포넌트를 생성해줍니다.ng generate component example# orng g c example 명령어를 실행하고 생성하면 /src/app/example/ 폴더에 컴포넌트 관련 파일이 생성됩니다. 그럼 아래 코드를 입력하여 컴폰넌트를 적용시켜줍니다.import { Component } from '@angular/core';import { FormsModule } from '@angular/forms';@Component({ selector: 'app-example', standalone: true, imports: [FormsModule], templateUrl: './exam..

• format_list_bulleted Front-End/Angualr
• · 2025. 8. 10.
• textsms

[Angular] 2장 Angular 모듈 구조 이해

1. Angular 모듈이란?Angular에 NgModule은 Angular 애플리케이션의 기능 단위를 정의하는 데 사용되며 Angular 모듈은 @NgMudle 데코레이터를 사용해 정의하며, 주요 속성으로 declarations,imports, porviders, bootstrap 등이 있습니다. 각 모듈은 컴포넌트, 디렉티브, 파이, 서비스 등과 같은 Angular 애플리케이션 요소들을 그룹화해 하나의 독립적 단위로 묶습니다.2. 모듈의 주요 역할앱 기능의 그룹화: 관련된 기능들을 하나의 모듈로 묶어 애플리케이션을 조직화코드 분리: 애플리케이션의 크기가 클 경우, 각 모듈을 독립적으로 개발, 테스트, 유지보수할 수 있도록 지원Lazy Loading(지연 로딩): 필요할 떄만 모듈을 로드하여 앱의 성능..

• format_list_bulleted Front-End/Angualr
• · 2025. 3. 27.
• textsms

[Angular] 1장 Angular란?

1. Angular 2016년 9월 14일 약 8년 전 Google(구글)은 Angular를 출시합니다. Angular는 오픈 소스 웹 애플리케이션 플랫폼으로, 주로 단일 페이지 애플리케이션(SPA: Single Page Application)을 만드는 데 사용하는 언어입니다. Angluar의 특징으로는 아래와 같습니다.모듈화: Angular는 애플리케이션을 모듈로 나누어 관리할 수 있어, 코드의 재사용성 및 유지보수성을 높임양방향 데이터 바인딩: 모델과 뷰 간의 데이터 변경이 자동으로 반영되어 개발자가 수동으로 DOM을 업데이트 할 필요가 없음 의존성 주입: 컴포넌트 간의 의존성을 관리해 코드의 유연성을 높이고 테스트에 용이함Typescript 사용: Typescript로 작성된 코드로 인해 정적 타입..

• format_list_bulleted Front-End/Angualr
• · 2025. 3. 9.
• textsms