http 통신을 한 후, 받은 데이터를 


어떻게!  셋팅할까를 많이 고민 했었다.



<div> {{ 변수명 }} </div>


.ts 파일에 있는 멤버변수를 참조하여 값을 셋팅할 수 있다.


만약, 저 변수가 없는 것이라면(undefined) 에러가 발생한다.




.ts 파일


private someDay: any;


constructor() {

this.someDay = "하하";

}



.html 파일


<div> {{ someDay }} </div>




위와 같이 되있다면, 하하라는 값이 div 태그 안에 들어갈 것이다.


그런데 통신을 한 후, 데이터를 셋팅하려고 하니 에러가 발생했다. 해당 값을 참조하지 못한다는 게 이유였다.


몇일의 삽질 끝에 알아냈다.


html이 먼저 렌더링 된 상태에서 값이 셋팅 되지 않아서 문제가 발생한 것이다.


<div *ngIf="isDataAvailable">


     {{ someDay }} 


</div>



통신 완료 된 직 후, isDataAvailable 불린형 변수에 true 를 셋팅 후,


했더니, 값을 인식 했다.



* isDataAvailable 은 만든 변수 입니다 ^^





'하이브리드 > 아이오닉 (Ionic)' 카테고리의 다른 글

루트의 네비게이션 참조하기  (0) 2017.02.02
angular2 api  (0) 2017.01.23
새로운 페이지 추가  (0) 2017.01.21
새 프로젝트 생성  (0) 2017.01.17
아이오닉 실행  (0) 2017.01.17
Posted by 자바리즘
,



미티어 프로젝트를 만들 경로로 간 후,


위와 같이 터미널 창에서


meteor create myapp 


을 입력해주면 됩니다.


myapp 은 프로젝트폴더 이름이고, 네이밍 자유롭게 해주시면 됩니다.





프로젝트 폴더로 이동 후, 콘솔창에서


meteor 라고 입력 한 후, 실행하면 됩니다.







혹시 오류가 날 경우, 아래 명령어를 입력해주세요.



meteor npm install --save babel-runtime


'하이브리드 > 미티어 (Meteor)' 카테고리의 다른 글

미티어 설치가이드  (0) 2017.01.25
Posted by 자바리즘
,

아래 URL 접속



https://www.meteor.com/





INSTALL NOW 클릭!






그럼 바로 설치되는 것이 아니라 맥이나 리눅스는 아래 명령어를 터미널에서 입력하고

윈도우라면 인스톨 프로그램을 설치한다.









인터넷 환경이 빠르다면 금세 설치가 될 것이다.


이게 끝이다. 끝끝끝!!!


미티어, 머 이렇게 간단하냐...

'하이브리드 > 미티어 (Meteor)' 카테고리의 다른 글

미티어 스타트  (0) 2017.01.25
Posted by 자바리즘
,

http://learnangular2.com/


https://angular.io/docs/ts/latest/guide/server-communication.html#!#rxjs

'하이브리드 > 아이오닉 (Ionic)' 카테고리의 다른 글

루트의 네비게이션 참조하기  (0) 2017.02.02
데이타 바인딩 하기  (0) 2017.02.02
새로운 페이지 추가  (0) 2017.01.21
새 프로젝트 생성  (0) 2017.01.17
아이오닉 실행  (0) 2017.01.17
Posted by 자바리즘
,

/src/app/app.component.ts


새로만든 페이지 import 

-import { DetailPage } from '../pages/detail/detail';



/src/app/app.module.ts 

-import 설정

import { DetailPage } from '../pages/detail/detail';


-declarations 설정

class 이름 기입


-entrycomponents 설정

class 이름 기입



html 페이지에서는 ionic 컴포넌트를 설정

.ts 에서 다른 ts 의 클래스나 함수를 사용할 경우 import 해줘야 한다.





angularjs2 을 사용하는 ionic v2 는...v1 과 완전 다르다.


나 v1  책 샀는데...내  돈...ㅠㅠ



'하이브리드 > 아이오닉 (Ionic)' 카테고리의 다른 글

루트의 네비게이션 참조하기  (0) 2017.02.02
데이타 바인딩 하기  (0) 2017.02.02
angular2 api  (0) 2017.01.23
새 프로젝트 생성  (0) 2017.01.17
아이오닉 실행  (0) 2017.01.17
Posted by 자바리즘
,



ionic start MySampleTest tutorial --v2


ionic start 프로젝트이름 ,  샘플이름 ,  v2 (2.0 project)





tabs : 3 tab layout


sidemenu : swiple menu


blank : blank page


tutorial : guide project

'하이브리드 > 아이오닉 (Ionic)' 카테고리의 다른 글

루트의 네비게이션 참조하기  (0) 2017.02.02
데이타 바인딩 하기  (0) 2017.02.02
angular2 api  (0) 2017.01.23
새로운 페이지 추가  (0) 2017.01.21
아이오닉 실행  (0) 2017.01.17
Posted by 자바리즘
,


ionic 만든 폴더로 이동


터미널에서,



플랫폼설정 및 빌드


ionic platform add android | ios

ionic build android | ios




에뮬레이터로 실행


ionic emulate android | ios




디바이스 실행


ionic run android | ios  --device




서버와 같이 실행


ionic serve


ionic serve --lab . (모바일 화면과 같아지는 옵션)



---------------------------------------------------------------------------------------------------



| ios 는 옵션을 의미 (안드로이드, 아이폰 선택)




'하이브리드 > 아이오닉 (Ionic)' 카테고리의 다른 글

루트의 네비게이션 참조하기  (0) 2017.02.02
데이타 바인딩 하기  (0) 2017.02.02
angular2 api  (0) 2017.01.23
새로운 페이지 추가  (0) 2017.01.21
새 프로젝트 생성  (0) 2017.01.17
Posted by 자바리즘
,