ionic2 튜토리얼
ionic2 시작하기

비고

설치 또는 설정

이오닉 2가 날마다 나아지고 있기 때문에 항상 공식 문서 를 확인하여 최신 변경 사항 및 개선 사항을 추적하십시오.

선행 조건 : 이온 2 프로젝트를 만들기 위해서는 NodeJS가 필요합니다. 여기에서 노드를 다운로드하여 설치하고 npm 및 여기에서 사용되는 Ionic 2 패키지에 대해 자세히 배울 수 있습니다 .

1. 이온 2 장착

Ionic 1과 마찬가지로 Ionic CLI 또는 GUI를 사용하여 브라우저에서 바로 응용 프로그램을 빌드하고 테스트 할 수 있습니다. 심지어 Ionic 1 앱으로 작업 할 수있는 모든 기능을 갖추고있어 변경하지 않아도됩니다!

이온 2를 사용하려면 단순히 npm에서 이온을 설치하십시오.

$ npm install -g ionic

EACCES 오류가 발생하면 여기 에 나와있는 지침에 따라 노드에 필요한 권한을 부여하십시오.

2. 첫 번째 앱 만들기

CLI가 설치되면 다음 명령을 실행하여 첫 번째 앱을 시작하십시오.

$ ionic start MyIonic2Project

탭 템플릿 은 기본적으로 사용되지만 플래그를 전달하여 다른 템플릿을 선택할 수도 있습니다. 예 :

$ ionic start MyIonic2Project tutorial
$ cd MyIonic2Project
$ npm install

이 튜토리얼 템플릿을 사용합니다.

앱을 실행하려면 프로젝트 디렉토리로 이동하고 ionic serve -lc 실행합니다.

$ ionic serve -lc

-l은 페이지의 실제 다시로드를 활성화하고 -c는 콘솔 로그를 표시합니다. 앱을 빌드하는 데 문제가있는 경우 package.json이 ionic2-app-base 의 패키지와 일치하는지 확인하십시오.

브라우저에서 바로 새 앱을 사용할 수 있습니다!

3. 장치에 구축하기

물리적 장치 나 장치 에뮬레이터에서 새 앱을 만들 수도 있습니다. 계속 진행하려면 코르도바 가 필요합니다.

Cordova를 설치하려면 다음을 실행하십시오.

$ npm install -g cordova

iOS 응용 프로그램을 빌드하기위한 iOS 시뮬레이터 문서 (참고 : OSX 이외의 운영 체제에서는 iOS 장치 또는 에뮬레이터로 빌드 할 수 없음) 또는 Android 애플리케이션을 빌드하는 Genymotion 문서를 확인하십시오.

iOS 기기에서 실행 중 :

iOS 용 앱을 제작하려면 OSX 컴퓨터에서 작업해야합니다. iOS 용으로 빌드 할 수 있도록 코코아 프레임 워크가 필요하기 때문입니다. 먼저 코드를 실행하여 코드 코바에 플랫폼을 추가해야합니다. 다음 명령 :

$ ionic cordova platform add ios

iOS 장치로 컴파일하려면 Xcode 가 필요합니다.

마지막으로 다음 명령으로 앱을 실행합니다.

$ ionic cordova run ios

Android 기기에서 실행 중 :

Android의 단계는 거의 동일합니다. 먼저 플랫폼을 추가하십시오.

$ ionic cordova platform add android

그런 다음 Android 장치로 컴파일 할 수있는 Android SDK 를 설치하십시오. Android SDK는 에뮬레이터와 함께 제공되지만 실제로 느립니다. Genymotion 은 훨씬 빠릅니다. 설치가 끝나면 다음 명령을 실행하십시오.

$ ionic cordova run android

그리고 그게 다야! 첫 번째 이오니아 2 앱을 만드는 것을 축하합니다!

이온이 다시로드됩니다. 따라서 앱을 개발하고 에뮬레이터 / 기기에서 변경 사항을 실시간으로 보려는 경우 다음 명령을 실행하여 변경할 수 있습니다.

iOS의 경우 :

$ ionic cordova emulate ios -lcs

iOS 9.2.2에서는 라이브로드가 작동하지 않으므로주의하십시오. livereload로 작업하려면 다음을 추가하여 config.xml 파일을 편집합니다.

<allow-navigation href="*"/>

그런 다음 <platform name="ios"> :

<config-file parent="NSAppTransportSecurity" platform="ios" target="*-Info.plist">
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
</config-file>

Android의 경우 :

$ ionic cordova run android -lcs

l 라이브 다시로드, 약자 c 콘솔 로그 및 s 서버 로그. 이렇게하면 실행 중에 오류 / 경고가 있는지 확인할 수 있습니다.

Windows 용 건물

Windows 용 프로젝트를 빌드하려면 Windows 컴퓨터에서 작업해야합니다. 시작하려면 다음 명령을 실행하여 ionic2 프로젝트에 Windows 플랫폼을 설치하십시오.

$ionic cordova platform add windows

그런 다음 다음 명령을 실행하십시오.

$ionic cordova run windows

브라우저에서 실행하려면

$ionic serve

크롬 브라우저 검사 장치 용. (크롬 브라우저의 주소 표시 줄에 입력)

chrome://inspect/#devices