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 6 프레임워크 이용 https://angular.io/ https://cli.angular.io/
Angular Angular 란? 구글이 제공하는 Frontend framework https://angular.io/ 현재 버전 Angular 6
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/ https://bootswatch.com/4/sandstone/bootstrap.css
라우터 생성 App.module.ts 파일 수정 RouterModule 읽어오기 appRoutes 변수 생성 각 루트에 컴포넌트 등록 imports에 RouterModule 등록
라우터 생성 App.component.html 파일에 router-outlet 추가
메뉴 만들기 Navbar 이용 Bootstrap 스타일 메뉴 작성 https://getbootstrap.com/docs/3.3/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 수정 완성!