FrontEnd

controller( "", function( $ionicScrollDelegate ){

console.log( $ionicScrollDelegate.getScrollPosition().top );

});

다음 우편번호 API를 웹 전용 API이다.

http:// 를 기준으로 동작을 한다.

아이오닉으로 앱을 제작하면

file:// 로 기준이 잡혀버려서

다음 우편번호 API가 오작동하는걸 발견하여,

다음 우편번호 API를 담고있는 html를 만들고

iframe를 이용해서 화면에 출력 한 뒤,

postMessage를 이용하여 부모에게 결과값을 전달하는 방식으로 만들었다.

 1. 다음 우편번호 Api를 담을 html 파일을 만든다.

- post.html

2. postMessage 로 부모에게 결과값 던지기 ( post.html )

3. iframe 삽입 ( index.html )

4. 결과값 받기( controller.js )

angular.module( "starter.services", [] )

.factory( "Service", function( $ionicLoading ){

$ionicLoading.show();

setTimeout( function(){

$ionicLoading.hide();

}, 3000 );

});

angular.module( "starter.controllers", [ $ionicPopup ])

.controller( "Main", function(){

$ionicPopup.alert({

title : "alert 창입니다."

});

});

ng-cordova.min.js download

https://github.com/ionic-team/ng-cordova/releases

- index.html

<script src="js/ng-cordova.min.js">

- app.js

angular.module( "myApp", [ "ionic", "ngCordova" ])

- controllers.js

angular.module( "myApp.controllers", [ "ngCordova" ])

.controller( "myApp-controller", function( $cordovaBarcodeScanner ){

$scope.showClick = function(){

$cordovaBarcodeScanner.scan().then( function( imageData ){

alert( imageData );

}, function( error ){

alert( error );

});

}

});

var data = { teamcode : "T01" };

$http({

method : "POST",

url : url,

params : data,

headers : {

"Content-Type" : "application/json; charset=utf-8"

}

}).success( function( $data ){

console.log( $data );

}).error( function( err ){

console.log( err );

});

- ionic.config.json

"proxies" : [

{

"path" : "/api",

"proxyUrl" : "url"

}

]

- app.js

.constant( "ApiEndpoint", {

url : "/api"

})

- services.js

.factory( "Service", function( ApiEndpoint ){

var url = ApiEndpoint.url;

$http({

method : "GET",

url : url

}).success( function( $data ){

console.log( $data );

}).error( function( err ){

console.log( err );

});

})

핸드폰과 내 컴퓨터의 와이파이가 같다면

개발 어플을 쉽게 실행시켜주는 어플이 출시되었다.

http://blog.ionic.io/announcing-ionic-devapp/

이곳에서 각각 OS에 맞는 어플을 받은 후,

1. ionic serve 실행

2. 와이파이 설정

3. 다운로드 받은 앱 실행.

4. 어플 실행 화면( 조금만 기다리면 알아서 어플을 연결한다. )

5. 어플 연결 화면

6. 실행 화면