bibaram
1) Setting
1. Nodejs install
https://nodejs.org
[check]
$ node
> console.log('hello node');
hello node
undefined
> process.exit(10:
2. 작업폴더 설정 하기(아무대나 폴더 생성)
ex) ionic-work
3. Cordova install
(npm[nodejs package manager] use)
node.js shell run
$ sudo npm install -g cordova (Mac or Linux)
> npm install -g cordova (Windows)
3. Ionic install
node.js shell run
$ sudo npm install -g ionic (Mac or Linux)
> npm install -g ionic (Windows)
2) Create JOB
1. Project Create
1-2 폴더에 진입해서
$ ionic start testApp
notification 위한 ionic join (Y/n)
2. Emulater Create
$ cd testApp //만들어진 프로젝트 폴더로 이동
$ cordova platform list (현재 설치가능한 플랫폼 리스트 확인)
$ ionic platform add ios // iPhone
$ sudo npm install -g ios-sim (Mac or Linux)
> npm install -g ios-sim (Windows)
$ ionic platform add android //Android
3. Emulater Run
(기본 프로젝트 실행하려면 android는 SDK 필요, iPhone은 XCODE 필요)
$ ionic build ios
$ ionic build android
(platform Name : ios, android, amazon-fireos, blackberry10, firefoxos .....)
$ ionic emulate [platform Name] // 프로젝트를 Emulate로 확인
$ ionic run [platform Name] // 프로젝트를 Device로 확인
$ ionic serve // 프로젝트를 cordova에 내장된 서버동작 웹 프라우저로 확인
3) Basic Templat
1. Blank
1-2 작업 폴더
$ cd ionic-work
$ ionic start blankApp blank // blankApp 프로젝트를 blank Templat 으로 생성
$ cd blankApp
$ ionic serve //웹 브라우저로 확인(2-3)
2. Sidemenu
1-2 작업 폴더
$ cd ionic-work
$ ionic start sidemenuApp sidemenu // sidemenuApp 프로젝트를 sidemenu Templat 으로 생성
$ cd sidemenuApp
$ ionic serve //웹 브라우저로 확인(2-3)
3. Tabs
1-2 작업 폴더
$ cd ionic-work
$ ionic start tabsApp tabs // tabsApp 프로젝트를 tabs Templat 으로 생성
$ cd tabsApp
$ ionic serve //웹 브라우저로 확인(2-3)
4) Hello IOnic
1. Project Create
2-1 에서 만든 testApp 사용
$ cd testApp
$ ionic serve
2. testApp/www/js/app.js 에 추가
.state('tab.hello', {
url: '/hello',
views: {
'tab-hello': {
templateUrl: 'templates/tab-hello.html',
controller: 'HelloCtrl'
}
}
})
3. testApp/www/js/controllers.js 에 추가
.controller('HelloCtrl', function($scope){})
4. testApp/templates/tab-hello.html 파일 생성 후 추가
<ion-view view-title="Hello">
<ion-content>
hello ionic!
</ion-content>
</ion-view>
5. testApp/templates/tabs.html 파일 생성
< ion-tab title="Hello" icon-off="ion-ios-gear-outline" icon- href="#/tab/hello">
<ion-nav-view name="tab-hello"></ion-nav-view>
</ion-tab>
별첨
============== Editer Brackets ==============
http://brackets.io/
1. Brackets File Icons : 왼쪽에 보이는 아이콘을 더욱 더 구분이 쉽게 아이콘으로 보여주는 플러그인
2. Brackets Outline List : 한 파일에 함수들을 한번에 볼 수 있는 플러그인
3. Code folding : 함수를 폴딩 시킬 수 있는 플러그인 (or Custom Region Code Folding)
4. Number Tabs : 열어놓은 파일을 Ctrl + 숫자로 이동할 수 있는 플러그인
5. Documents Toolbar : 탭으로 여러 코딩창을 제공해줌
6. Beautify : 코드 자동 정렬 - 단축키 ctrl + shift + L
7. Emmet : 코딩을 빠르게 할 수 있게함. 젠코딩과 비슷하다.
eqFTP - FTP/SFTP client for Brackets code editor
