본문 바로가기

728x90

앵귤러4

[Angular] 회원가입 입력화면 만들어보기 (Register Validation Form) 안녕하세요 Foma 💻 입니다. 오늘은 회원가입을 할 때 정해진 규칙에 맞는지 여부를 검사하는 화면 폼을 만들어 보겠습니다. 바로 시작할게요~ Set up angular material 앵귤러에서는 머터리얼 디자인된 UI 컴포넌트들을 제공합니다. 아래 사이트를 이동하시면 여러 컴포넌트들을 사용하는 방법과 API를 확인할 수 있습니다. Angular Material UI component infrastructure and Material Design components for Angular web applications. material.angular.io 터미널에 angular material을 설치해 줍니다. ng add @angular/material 설치가 완료된 뒤에 몇가지 추가적으로 설치할 건지.. 2022. 3. 24.

[Angular] Router에 대해 알아보기 (feat. 화면이동) 안녕하세요 Foma 💻 입니다! 오늘은 Angular에서 화면을 이동하는 방법인 Router에 대해 다뤄보려고 합니다. 바로 시작할게요~ 프로젝트 설정 프로젝트 생성 시에 "Would you like to Angular routing?(너 앵귤러 라우팅 사용할거야?)" 라고 묻는데, 여기서 y를 해줍니다. login(로그인) 화면을 만들어 줍니다. ng g c pages/login register(회원가입) 화면을 만들어 줍니다. ng g c pages/register app-routing.modules.ts Routes에 원하는 endPoint와 component(화면)들을 세팅해줍니다. const routes: Routes = [ { path: 'login', component: LoginCompon.. 2022. 3. 24.

[Angular] NgForm이란? (feat. ngModel,ngSubmit,required) ngForm이란? 원하는 양식을 만들어 데이터를 전달할 수 있게 도와주는 지시어 중 하나이다. 사용하는 방법을 아래와 같이 html 파일에 작성한다. 여기서 ngSubmit은 양식에 정보를 기입하고 해당 정보(데이터)를 제출할 때 사용된다. 해당 폼 안에 원하는 정보를 기입할 elements들을 넣고 데이터가 필요한 elements엔 ngModel 지시어를 사용한다. ngModel은 FormControl의 일종으로 데이터를 바인딩할 때 사용하는 지시어다. app.module.ts ngForm은 FormsModule에 포함되어 있는 지시어이므로 FormsModule을 추가해줘야 한다. @NgModule({ declarations: [AppComponent], imports: [BrowserModule, F.. 2022. 3. 15.

[Angular] 버튼 이벤트 적용해보기 (Button Event) app.component.html 1. on-click뒤에 실행시키고 싶은 함수 이름을 적으면 된다. 2. (click) 뒤에 실행시키고 싶은 함수 이름을 적으면 된다. ShowHi() 메서드 적용 시켜보기 app.component.ts 간단하게 알러트 창에 인사를 출력하는 함수를 만들어 준다. export class AppComponent { public showHi(): void { alert('안녕하세요'); } } app.component.html 하이 버튼을 누르면 아래와 같이 알럴트 창이 뜨게 된다. 2022. 3. 15.

이전 1 다음

728x90

티스토리툴바