개발이 좋아서/Angular가 좋아서

[Front] - 로그인 및 회원가입(app.module, guard)

1) app.module.ts import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MaterialModule } from './modules/material/material.module'; import { FlexLayoutModule } from '@angular/flex-layout'; // 반응형 ..

[Front] - 로그인 및 회원가입(app-route, app.component)

1) app-routing.module.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AuthGuard } from './auth.guard'; import { HomeComponent } from './component/home/home.component'; import { InfoComponent } from './component/info/info.component'; import { LogoutComponent } from './component/logout/logout.component'; import { SigninComponent } from ..

[Front] - 로그인 및 회원가입(service/rest-api)

1) service/rest-api sign.service.ts import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Router } from '@angular/router'; import { ApiReponseSingle } from 'src/app/model/common/ApiReponseSingle'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class SignService { pr..

[Front] - 로그인 및 회원가입(modules/material, model/common)

1) modules/ material material.modules.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {MatSidenavModule} from '@angular/material/sidenav'; import {MatToolbarModule} from '@angular/material/toolbar'; import {MatIconModule} from '@angular/material/icon'; import {MatListModule} from '@angular/material/list'; import {MatCardModule} from '@angular/m..

[Front] - 로그인 및 회원가입(signin, signup)

1) signin signin.component.html 로그인 Login SignUp signin.component.ts import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms'; import { SignService } from 'src/app/service/rest-api/sign.service'; @Component({ selector: 'app-signin', templateUrl: './signin.component.html', styleUrls: ['./signin.component.css'] }) export class SigninCom..

[Front] - 로그인 및 회원가입(home, info, logout)

1) home home.component.ts 2) info info.component.html 회원정보 조회 조회결과 id: {{member.id}} email: {{member.email}} name: {{member.name}} nickname: {{member.nickname}} phoneNum: {{member.phoneNum}} regDate: {{member.regDate}} sex: {{member.sex ? '여성':'남성' }} 조회 로그인 로그 조회 형식에 맞게 입력해주세요!!! ex) 2022-10-07 18:30:00 조회결과 {{log}} 조회 info.component.ts import { Component, OnInit } from '@angular/core'; import ..

Angular - 로그인 UI 구현(service, guard)

1) login.component.html 로그인 login, board, join 컴포넌트 라우터 지정하기 app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; import { MatButtonModule } from '@angular/material/button'; import { AppComponent } from './app.c..

Angular - 회원가입 UI 구현

1) 설치하기 ng add @angular/material 경로 설정 클릭 이벤트로 회원가입 버튼 클릭 시 회원가입 페이지로 이동 2) 모듈 추가하기 join.component.ts import { Component, OnInit } from '@angular/core'; import { FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-join', templateUrl: './join.component.html', styleUrls: ['./join.component.css'] }) export class JoinComponent implements OnInit { constructor(private fb:FormB..

Angular - 튜토리얼13_가드(인터셉터)

1) ng g guard 이름 ng g guard auth 2) board.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-board', templateUrl: './board.component.html', styleUrls: ['./board.component.css'] }) export class BoardComponent implements OnInit { constructor() { } ngOnInit(): void { } } login.component.html login.component.ts import { Component, OnInit } from '@angular/core..

Angular - 튜토리얼12_라우팅

1) ng new FrontEnd3 ng g component login ng g component board app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { LoginComponent } from './login/login.component'; import { BoardComponent } from './board/board.component'; import { RouterModule,Routes } from '@angular/router'; co..