[Cordova] Ionic2 + angular2 + Visual studio code - quickstart

Ionic2 + angular2 + Visual studio code - quickstart

참조 URL

1. http://ionicframework.com/docs/v2/getting-started/
   
2. http://www.gajotres.net/ionic-2-how-to-use-cordova-plugins/
3. http://www.joshmorony.com/using-cordova-plugins-in-ionic-2-with-ionic-native/
4. https://forum.ionicframework.com/t/ionic-2-with-ng-cordova/36103
   

 

아래와 같은 순서로 진행한다.

( node, npm 이 동작할 수 있도록 구성은 되어 있어야 한다.)

> npm install ionic@beta -g

> npm install cordova -g

> ionic start example tutorial --v2

> cd example

> ionic serve or ionic serve -l -a

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

> npm install ionic@beta -g

전역으로 ionic@beta 모듈을 설치 한다.

> npm install cordova -g

전역으로 cordova를 설치 한다.

> ionic start example tutorial --v2

전역으로 받은 모듈을 통해 ionic 프로젝트를 만든다. 

example 폴더를 만들고  ionic2 버전으로 tutorial 템플릿을 가지고 만든다.

> cd example

example 폴더로 이동

> ionic serve or ionic serve -l -a

ionic 프로젝트 로컬에서 확인할 수 있도록 자체 웹 서버를 구동하여 미리보기 할 수 있도록 한다.

이렇게 실행하면 브라우저가 뜨면서 화면을 확인 할 수 있다.

[그림1] ionic serve 실행 화면

[그림2] 미리보기 화면

위와 같이 마무리가 되었다면 Visual studio code에서 폴더로 불러오면 아래와 같이 된다.

[그림3] Visual studio code에서 불러오기

 이제 부터 app > pages > hello-ionic > hello-ionic.html 파일을 열고 코드를 수정하면 바로 "그림2"에서 본 화면에서 새로 고침이 되어 즉각 확인 할 수 있다. 이제부터 Ionic2 + Angular2로 개발할 준비가 완료가 되었다.