ionic (AngularJS 기반) 애플리케이션 개발 환경 구축

  • ionic은 AngularJS 기반 UI 라이브러리입니다.
  • ionic 공식 페이지: htp // 이오니 cf라메를 rk. 이 m
  • GitHub: htps : // 기주 b. 코 m / 드 fty 코 / 이오니 c /

  • 이번은, 공식 페이지에 있는 것 같은 Cordova(PhoneGap)등으로부터의 이용이 아니고, 단순하게 스마트 폰 WEB 사이트(비네이티브 어플리)에서 UI 라이브러리로서 이용하는 것을 상정하고 있습니다.

  • 데모


  • 공식적으로 제공되는 데모 애플리케이션은 아래에서 설명하는 히나타에 포함되어 있습니다. 괜찮으시다면 어떤 것을보십시오.
  • h tp : // h 쿠스. 기주 b. 이오 / 앙구 rJS_이오니 cjs_
  • GitHub Pages에 있습니다.
  • 파일이 minify가 아닙니다
  • ionic의 모바일 지원 브라우저는 "iOS 6+, Android 4+"라는 것이므로 Android 2 계 등에서는 움직이지 않을지도 모릅니다


  • 환경 구축 정책


  • Yeoman의 병아리 생성기를 사용합니다
  • 기본적으로 여기의 절차를 따르십시오.
  • htps : // 기주 b. 코 m / 에고 네트 / 게네라와 r 이오니 c

  • 그 외 Yeoman이나 Bower, Grunt, WebStorm 등 주변 환경에 대해서는 내 이전 게시물를 참조해 주세요.

  • 절차


  • ionic 병아리 생성기를 설치
  • $ npm install -g generator-ionicjs
    
  • 적절한 디렉토리를 만들고 아래로 이동하여
  • $ yo ionicjs [今回つくるアプリケーション名]
    

  • 예: $ yo ionicjs test
  • test 가 AnugularJS 상의 어플리케이션명이 된다 (나중에라도 재기록은 가능)

  • 이미 병아리 응용 프로그램이 들어 있기 때문에 작동 확인
  • $ grunt serve
  • 그러면 브라우저가 시작되고 다음과 같이 병아리 응용 프로그램이 열립니다.


  • 이쪽으로 업하고 있으므로, 좋으면 봐 주세요.
  • h tp : // h 쿠스. 기주 b. 이오 / 앙구 rJS_이오니 cjs_
  • 소스는 이쪽
  • htps : // 기주 b. 코 m / h 쿠스 / 앙구 rJS_ 이오니 cjs_



  • 동작 확인이 끝나면


  • 병아리의 로직이나 VIEW는 아래와 같이 저장되어 있으므로, 이것들을 자신용의 어플리케이션용으로 재작성해 가면 OK입니다!

  • 마크업을 하기 위한 참고 URL
  • htp // 이오니 cf 라메를 rk. 코 m / 두 cs / 코 m 포넨 ts /
  • htp // 이오니 cf 라메를 rk. 코 m/도 cs/안 t 로페 rs/
  • htp // 이오니 cf 라메를 rk. 코 m / html 5 - 프 t ty ぺ s /




  • 덤:ionic 공식의 방법(Cordova등과 제휴)로 하는 경우


  • 일단 메모. 단지 이번은 PhoneGap 등으로 네이티브 앱화하는 것은 아니기 때문에 참고 정도로.
  • 여분의 라이브러리라든지 들어가면 싫고..


  • 절차


  • 이와 같이
  • htp // 이오니 cf 라메를 rk. 코 m / 껄껄 g-s r d /

  • 만약 도중에 에러가 나오면 아래와 같이 추가로 인스톨 한다
  • npm install -g ios-sim
  • npm install -g ios-deploy

  • ionic start [アプリ名] 로 병아리가 만들어지는 모양
  • 안드로이드를위한 에뮬레이션은 ant가 필요합니까? (확인되지 ​​않음)

  • 그 외 참고


  • ionic으로 작성된 애플리케이션 샘플(on GitHub)

  • htps : // 기주 b. 코 m / 드 fty 코 / 이오니 c 앙구 r r r ゔ ぁ せ d
  • yo ionicjs 또는 ionic start 에서 생성된 녀석과 함께

  • htps : // 기주 b. 코 m / dy fty 코 / 이오니 c t 토리 l s 타츠 s 푸에
  • htps : // 기주 b. 코 m / dy fty 코 / 이오니 c ぇ 아테 r

  • 좋은 웹페이지 즐겨찾기