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

목차 1. 환경 구축 2. Express Setup & Routes 3. User Model and Register 4. API authentication and Token 5. Angular 4 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 4 프레임워크 이용 https://angular.io/ https://cli.angular.io/

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

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 폴더로 이동 App 시작 잘 만들어진 기본 웹페이지 포맷을 제공

Angular 환경 설정 Angular cli 설치 새로운 App 생성 > npm install -g @angular/cli 컴퓨터 내 어디에서든 사용할 수 있도록 -g 옵션으로 설치 > npm install --save-dev @angular/cli@latest 에러 발생시 최신버전으로 로컬 설치 새로운 App 생성 > ng new angular-src angular-src라는 이름으로 앱 생성

Angular-src App 생성 새로운 폴더 angular-src 생성 각종 패키지/파일들 자동 설치

Angular-src App 생성 Angular의 출력 디렉토리를 public으로 변경 .angular-cli.json 파일 수정

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

app.module.ts meanauthapp/angular-src/src/app/app.module.ts 메인 앱 모듈 각종 모듈, 컴포넌트, 서비스들을 결합하는 장소 메인 앱 컴포넌트를 포함, 선언, 시작

app.component.ts meanauthapp/angular-src/src/app/app.component.ts 메인 앱 컴포넌트 지시자 Html 파일 Css 파일 title 변수 선언

app.component.html meanauthapp/angular-src/src/app/app.component.html 브라우저의 메인 화면 모습 title = app 변수 반영됨

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

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

Navbar 컴포넌트 navbar.component.html Navbar 컴포넌트 생성 > ng g component navbar Navbar 폴더 내에 4개의 파일이 생성됨 navbar.component.ts

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

Navbar 컴포넌트 Navbar.component.html을 화면에 출력하려면 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

라우터 생성 Index.html 파일 수정 Meanauthapp/angular-src/src/index.html Bootstrap 스타일시트 적용 Bootstrap.min.css 제목 수정 등 https://bootswatch.com/

라우터 생성 App.component.ts 파일 수정 RouterModule 읽어오기 appRoutes 변수 생성 각 루트에 컴포넌트 등록 imports에 RouterModule 등록

라우터 생성 App.component.html 파일에 router-outlet 추가

메뉴 만들기 Navbar 이용 Bootstrap 스타일 메뉴 작성 http://getbootstrap.com/examples/starter-template/ 소스보기 - Nav 부분 복사

메뉴 만들기 Navbar/navbar.component.html 파일 작성 복사한 내용 붙여넣기 필요에 따라 수정

메뉴 만들기 Navbar/navbar.component.html <nav class="navbar navbar-default">   <div class="container">     <div class="navbar-header">       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">         <span class="sr-only">Toggle navigation</span>         <span class="icon-bar"></span>       </button>       <a class="navbar-brand" href="#">MEAN Auth App</a>     </div>     <div id="navbar" class="collapse navbar-collapse">       <ul class="nav navbar-nav navbar-left">         <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a [routerLink]="['/']">Home</a></li>       </ul>       <ul class="nav navbar-nav navbar-right">         <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a [routerLinkActive]="['active']" [routerLink]="['/login']">Login</a></li>         <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a [routerLinkActive]="['active']" [routerLink]="['/register']">Register</a></li>     </div><!--/.nav-collapse -->   </div> </nav>

메뉴 만들기 App.component.html 수정 완성!