Download - Ionic2로 Type script+Angular2.0 따라하기 1
Typescript+Angular2.0 따라하기 ( 필요한 만큼만 )
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