Download presentation
Presentation is loading. Please wait.
1
MEAN Stack Front to Back (MEANAuthApp)
5. Angular 4 Components & Routes
2
목차 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
3
이 장에서 할 일 Frontend 웹페이지 작성 Angular 6 프레임워크 이용 https://angular.io/
4
Angular Angular 란? 구글이 제공하는 Frontend framework
현재 버전 Angular 6
5
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 도구
6
Angular CLI 사용 방법 Angular/cli 설치 새로운 App 생성 App 폴더로 이동 App 시작
잘 만들어진 기본 웹페이지 포맷을 제공
7
Angular 환경 설정 Angular cli 설치 새로운 App 생성
> npm install 컴퓨터 내 어디에서든 사용할 수 있도록 -g 옵션으로 설치 > npm install --save-dev 에러 발생시 최신버전으로 로컬 설치 새로운 App 생성 현재 프로젝트 폴더로 이동 > ng new angular-src angular-src라는 이름으로 새로운 앱 생성
8
Angular-src App 생성 새로운 폴더 angular-src 생성 각종 패키지/파일들 자동 설치
9
Angular-src App 생성 Angular의 출력 디렉토리를 public으로 변경
.angular-cli.json 파일 수정
10
App 실행 App 폴더로 이동 App 실행 브라우저로 확인 > cd angular-src > ng serve
4200은 Angular의 기본 포트번호
11
app.module.ts meanauthapp/angular-src/src/app/app.module.ts 메인 앱 모듈
각종 모듈, 컴포넌트, 서비스들을 결합하는 장소 메인 앱 컴포넌트를 포함, 선언, 시작
12
app.component.ts meanauthapp/angular-src/src/app/app.component.ts
메인 앱 컴포넌트 지시자 Html 파일 Css 파일 title 변수 선언
13
app.component.html meanauthapp/angular-src/src/app/app.component.html
브라우저의 메인 화면 모습 title = app 변수 반영됨
14
Typescript Typescript란? https://www.typescriptlang.org/
마이크로소프트가 개발하고 관리하는 오픈소스 프로그래밍 언어 확장자는 *.ts 자바스크립트의 확장버전으로 컴파일하여 자바스크립트 출력
15
컴포넌트 생성하기 홈페이지 제작에 필요한 세부 컴포넌트들 컴포넌트 생성하기 Navbar : 메뉴 내비게이션
Login : 로그인 페이지 Register : 등록 페이지 Profile : 프로필 페이지 Dashboard : 사용자 대쉬보드 Home: 홈페이지 컴포넌트 생성하기 angular-cli 이용하여 컴포넌트 생성 app 폴더 안에 components 폴더 생성 Components 폴더로 이동 > ng g component 컴포넌트명
16
Navbar 컴포넌트 navbar.component.html Navbar 컴포넌트 생성
> ng g component navbar Navbar 폴더 내에 4개의 파일이 생성됨 navbar.component.ts
17
Navbar 컴포넌트 ng g 명령으로 생성된 navbar 컴포넌트는 app.module.ts에 자동 등록됨
18
Navbar 컴포넌트 Navbar.component.html을 화면에 출력하려면
App.component.html에 <app-navbar></app-navbar> 포함시킴
19
나머지 컴포넌트들 생성 >ng g component login >ng g component register
>ng g component home >ng g component dashboard >ng g component profile
20
라우터 생성 Index.html 파일 수정 Meanauthapp/angular-src/src/index.html
Bootstrap 스타일시트 적용 Bootstrap.min.css 제목 수정 등
21
라우터 생성 App.module.ts 파일 수정 RouterModule 읽어오기 appRoutes 변수 생성
각 루트에 컴포넌트 등록 imports에 RouterModule 등록
22
라우터 생성 App.component.html 파일에 router-outlet 추가
23
메뉴 만들기 Navbar 이용 Bootstrap 스타일 메뉴 작성
소스보기 - Nav 부분 복사
24
메뉴 만들기 Navbar/navbar.component.html 파일 작성 복사한 내용 붙여넣기 필요에 따라 수정
25
메뉴 만들기 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>
26
메뉴 만들기 App.component.html 수정 완성!
Similar presentations