MEAN Stack Front to Back (MEANAuthApp) 5. Angular Components & Routes

목차 1. 환경 구축 2. Express Setup & Routes 3. User Model and Register 4. API authentication and Token 5. Angular Components & Routes 6. Register Component, Validation & Flash messages 7. Auth Service & User Registration 8. Login & Logout 9. Protected Requests & Auth Guard 10. App Deployment to Heroku

이 장에서 할 일 Frontend 웹페이지 작성 Angular 프레임워크 이용 방법 https://angular.io/ https://cli.angular.io/

Frontend 프레임워크 Battle

Angular Angular 란? 구글이 제공하는 Frontend framework 홈페이지 https://angular.io/ 현재 버전 Angular 8

Angular CLI https://cli.angular.io/ The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices! 웹서비스를 쉽게 제작할 수 있는 Command Line Interface 도구

Angular CLI 사용 방법 Angular/cli 글로벌 설치 새로운 App 생성 생성된 App 폴더로 이동 잘 만들어진 기본 웹페이지 포맷을 제공  이후 필요에 따라 컴포넌트를 추가, 수정

Angular 환경 설정 Angular cli 설치 > npm install -g @angular/cli > npm install --save-dev @angular/cli@latest 에러 발생시 최신버전으로 로컬 설치 > ng version 설치된 Angular의 버전 확인

Angular 환경 설정 Angular cli 설치 npm install -g @angular/cli ng version

Angular 환경 설정 새로운 App 생성 현재 프로젝트 폴더로 이동: > cd meanauthapp > ng new angular-src (새로운 앱 생성 명령) ? Angular routing? Yes (라우팅 기능 사용 여부) ? Stylesheet format? SCSS (스타일시트 사용 방식 지정) angular-src라는 이름으로 새로운 앱 생성

Angular-src App 생성 새로운 폴더 angular-src 생성 각종 패키지/파일들이 자동 설치됨 angular-src/node_modules 폴더에 패키지 설치 src/app 폴더에 주요 소스파일 존재함

App 실행 App 폴더로 이동 App 실행 브라우저로 확인 > cd angular-src > ng serve -o http://localhost:4200/ 4200은 Angular의 기본 포트번호

app.module.ts 설명 meanauthapp/angular-src/src/app/app.module.ts 메인 앱 모듈 메인 앱 컴포넌트를 포함, 선언, 시작, 출력 @NgModule은 모듈을 나타내는 decorator

app.module.ts 설명 app.module.ts는 각종 모듈, 컴포넌트, 서비스들을 결합 하는 장소 declarations: 컴포넌트를 추가하는 장소 imports: 모듈을 추가하는 장소 providers: 서비스를 추가하는 장소 bootstrap: 시작 컴포넌트를 지정

app.component.ts 설명 meanauthapp/angular-src/src/app/app.component.ts 메인 앱 컴포넌트 DOM 생성 지시자 Html 파일 Scss 파일 스타일 지정 title 변수 선언 @Component는 컴포넌트를 나타내는 decorator

app.component.html 설명 meanauthapp/angular-src/src/app/app.component.html 브라우저의 메인 화면 모습을 지정하는 템플릿 파일 title = angular-src 변수가 반영됨 기본 템플릿 파일이 매우 복잡…

app.component.html 수정 App.component.html <h1>Welcome to {{title}}!</h1> <router-outlet></router-outlet> <router-outlet></router-outlet> 부분만 남기고 나머지는 삭제 H1 태그로 타이틀 작성 title변수의 적용 확인

Typescript Typescript란? https://www.typescriptlang.org/ 마이크로소프트가 개발하고 관리하는 오픈소스 프로그래밍 언어 확장자는 *.ts 자바스크립트의 확장버전으로 컴파일하여 자바스크립트 출력

컴포넌트 생성하기 홈페이지 제작에 필요한 세부 컴포넌트들 컴포넌트 생성하기 Navbar : 메뉴 내비게이션 Login : 로그인 페이지 Register : 등록 페이지 Profile : 프로필 페이지 Dashboard : 사용자 대쉬보드 페이지 Home: 메인 홈페이지 컴포넌트 생성하기 angular-cli 이용하여 컴포넌트 생성 app 폴더 안에 components 폴더 생성 Components 폴더로 이동 > ng g component 컴포넌트명 컴포넌트란? 페이지 등과 같이 UI를 가지는 구성요소

Navbar 컴포넌트 Navbar 컴포넌트 생성 > ng g component navbar

Navbar 컴포넌트 navbar.component.html navbar.component.ts

Navbar 컴포넌트 ng g 명령으로 생성된 navbar 컴포넌트는 app.module.ts에 자동 등록됨

Navbar 컴포넌트 Navbar.component.html을 화면에 출력하려면 DOM 지시자 app-navbar를 이용하여 App.component.html에 <app-navbar></app-navbar>를 포함시킴

나머지 컴포넌트들을 생성 >ng g component login >ng g component register >ng g component home >ng g component dashboard >ng g component profile

나머지 컴포넌트들을 생성 Components 폴더에 생성 생성된 컴포넌트들이 app.module.ts 파일에 자동 등록

Bootstrap 스타일 적용 Index.html 파일 수정 Meanauthapp/angular-src/src/index.html Bootstrap 스타일시트, 자바스크립트 적용 Bootstrap.min.css 제목 수정 등

Bootstrap 스타일 적용 App.component.html 파일 수정 Meanauthapp/angular-src/src/app/app.component.html Bootstrap의 container 클래스 적용 가운데 정렬 레이아웃 적용 Title 태그의 제목 수정됨

라우터 생성 App-routing.module.ts 파일 수정 RouterModule 읽어오기 필요한 컴포넌트 객체 생성 routes 변수 생성 각 루트에 컴포넌트 등록 RouterModule 등록

각각의 지정된 path가 잘 동작함을 확인 (login, register, dashboard, profile) 라우터 생성 App.component.html 파일에 router-outlet 추가 상단에 navbar 하단에 router-outlet 각각의 지정된 path가 잘 동작함을 확인 (login, register, dashboard, profile)

메뉴 만들기 Bootstrap의 Navbar 컴포넌트 이용하여 Bootstrap 스타 일 메뉴 작성 https://getbootstrap.com/docs/4.3/components/navbar/ Navbar 소스 복사하여 Navbar.component.html 파일에 붙여넣기 파일을 다음과 같이 수정

메뉴 만들기 Navbar/navbar.component.html 파란색 메뉴바 로고에 / 링크 왼쪽 정렬 메뉴 <nav class="navbar navbar-expand-lg navbar-dark bg-primary">   <a class="navbar-brand" href="/">MeanAuthApp</a>   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"     aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">     <span class="navbar-toggler-icon"></span>   </button>   <div class="collapse navbar-collapse" id="navbarSupportedContent">     <ul class="navbar-nav mr-auto">       <li class="nav-item"><a class="nav-link" routerLink='/'>Home</a></li>     </ul>       <li class="nav-item"><a class="nav-link" routerLink='/login'>Login</a></li>       <li class="nav-item"><a class="nav-link" routerLink='/register'>Register</a></li>   </div> </nav> 로고에 / 링크 왼쪽 정렬 메뉴 오른쪽 정렬 메뉴 필요한 메뉴들을 추가

완성! 메뉴 만들기 App.component.html <app-navbar></app-navbar> <div class="container">   <router-outlet></router-outlet> </div> 상단에 navbar 표시 하단에 router-outlet 표시 완성! 메뉴 동작 테스트 잘 동작함!