Typescript+Angular2.0 따라하기 ( 필요한 만큼만 )

kalen.lee@takit.biz

0505-170-3636www.takit.biz

Why Ionic2?• 장점

• 코딩 생산성 (OOP)

• 단순히 library 가 아니다 .

• 깔끔한 빌드 시스템

참조 http://www.discoversdk.com/blog/ionic-2-vs-reactnative-vs-nativescript

단점• 고성능이 필요한 H/W dependent 한 앱에서 performance 문제가 발생할수 있다• 고유한 UI 구현이 어려울수 있다 .

=> 일반적인 기능의 성능은 문제가 없다 .

=> native 가 정답이다 .=> 대부분의 앱은 빠른 개발속도와 앱이 사용자에게 제공하는 고유 기능이 더욱 중요하다 .향후 하이브리드 앱개발의 대세가 될것이다 .

Her story• 대기업 연구소 (1 년 8 개월 )

->CDMA 프로토콜개발• 미국내 한국계 스타트업 ( 통신장비업체 ,3년 )

-> C++ 기반 리눅스 프로그래밍 , MFC프로그래밍• 대기업연구소 (10 년 )

-> linux 기반 오픈소스 프레임워크 , android 플랫폼• IT 서비스 스타트업 (1 년 )

->web app 개발 (javascript)

• ionic2 최적의 조건 ㅜㅜ• OOP 에 익숙함• 영어에 익숙함• 스마트폰 플랫폼에 익숙함• javascript 기본적인 지식

Typescript• A typed superset of JavaScript that compiles to plain

JavaScript.

• pure object oriented with classes, interfaces and statically typed like C# or Java.

• The popular JavaScript framework Angular 2.0 is written in TypeScript.

• Prerequisites

• OOP concepts and basic JavaScript

https://www.tutorialspoint.com/typescript/

변수 선언

var arr:number[];var arr=[];

var arr_name:number[][];var mytuple = [10,"Hello"];

Class 선언

One Page App• ionic start onePage --v2

• cd onePage

• ionic g page login

• app.component.ts 수정• login 페이지로 시작하도록 코드 변경

시작 코드typescript 의 import 구문

전체 앱에서 사용할 html 구조app.html 의 rootPage 를 정의함

angular 문법 html 내의 속성을 [] 으로 정의하고

typescript 내 변수값을 가져옴

페이지 추가• 추가된 페이지는 반드시

declarations 와 entryComponents에 선언해주세요 .

html 구성하기login.html 을 수정하셔서 사용자 로그인 정보 ( 이름 ,비밀번호 ) 를 입력받아 주세요 .

Hint> https://ionicframework.com/docs/v2/components/#inputs

https://ionicframework.com/docs/v2/components/#buttons

ts 작성하기1.username, password 선언 hint> 멤버 변수를 public 으로 선언해주세요 .

2. 입력과 연결 hint> 아래 angular2 문법 (two-way data binding) 을 사용해주세요 .

3. button 을 클릭하였을때 console.log 로 출력해주세요 .

=> hint> 멤버함수 , https://ionicframework.com/docs/v2/api/components/button/Button/ 참조

정답 예제

• username, password 초기화를 수행하지 않으면 undefined 가 출력됩니다 .

• username, password 에 placeholder 를 설정해주세요 .

html element 생성하기• 입력된 사용자 정보를 보여주세요 .

• angular directive : *ngIf 조건문을 만족할때 element 생성https://angular.io/docs/ts/latest/guide/structural-

directives.html

• 변수 값을 직접 html content 로 출력시 {{ 변수명 }} 사용https://angular.io/docs/ts/latest/guide/template-syntax.html#!

#interpolation

angular 참조 https://angular.io/docs/ts/latest/guide/template-syntax.html