Ionic은 Webbase 앱을 만들기위한 프레임 워크입니다. HTML, CSS, Javascipt로 iOS, Android 앱을 만들 수 있습니다. 퍼포먼스적으로는 네이티브 코드로 쓴 앱보다 뒤떨어진다고 하는 단점이 있습니다만, 크로스플러폼성, Web View의 유용가능하다고 하는 점도 생각하면 사용 도코로는 일단 있을 것입니다. 이 Ionic은 앱에 필요한 부품을 프레임워크 측이 제공해주고 있어 나누고 간단하게 View를 작성할 수 있습니다.

이하, 초기 설정의 메모. Ionic의 표준이라고 sass, coffee가 포함되어 있지 않은 것 같았기 때문에 수동으로 설정했습니다.

ionic 설치

$ npm install -g cordova ionic

scaffold

$ ionic start myApp sidemenu
$ cd myApp 
$ npm install
$ bower install
$ gulp install
$ ionic setup sass
$ ionic platform add ios

js -> coffee 변환

coffee 도입

$ npm install --save-dev coffee-script
$ npm install --save-dev gulp-coffee
$ npm install -g js2coffee
$ mkdir coffee

gulpfile.js 다시 쓰기

require('coffee-script/register');
require('./gulpfile.coffee');

Compile

$ gulp coffee

watch task에 coffee 추가

gulpfile.coffee

paths = sass: [ './scss/**/*.scss' ], coffee: ['./coffee/**/*.coffee']

gulp.task 'watch', ->
  gulp.watch paths.sass, [ 'sass' ]
  gulp.watch paths.coffee, ['coffee']
  return

gitignore에 추가

www/js/*.js
www/css/*.css
www/lib/

emulator

ripple

$ npm install -g ripple-emulator
$ ripple emulate --path www/

표준

$ ionic emulate ios

screenshot:

참고

Ionic Framework+coffeescript

Getting Started with Ionic