Ionic으로 모바일앱 만들기 #4

1. Ionic

2. 으로

3. 모바일앱

4. 만들기
#4.

5. API,

6. Javascript

7. Component,

8. Publishing
ABCD,

9. 스노우키위

10. 한성일

11. 1. API 찾기
2. Ionic Javascript Component #2
3. Publishing
4. 토론
코스

12. 1.

13. API

14. 찾기

15. API(Application

16. Programming

17. Interface)
프로그램의 내장 기능들을 사용 할 수 있도록 미리 정의
easy..
프로그램
개발자
프로그램에게 요청을 하기 위한 통로, 규약
API
이렇게 이렇게 주면
이렇게 이렇게 줄께.
하드웨어
DB
…

18. API

19. 문서
http://ionicframework.com/docs/nightly/api/service/$ionicGesture/
함수
Param
Type
Detail

20. 구글검색이

21. 더

22. 빠를지도.

23. 2.

24. Ionic

25. Javascript

26.
Component

27. #2
http://ionicframework.com/docs/nightly/api/

28. Contents

29. ion-content

30.
ion-content

35. [delegate-handle=]

40. [direction=]

45. [locking=]

50. [padding=]

55. [scroll=]

60. [overflow-scroll=]

65. [scrollbar-x=]

70. [scrollbar-y=]

75. [start-x=]

80. [start-y=]

85. [on-scroll=]

90. [on-scroll-complete=]

95. [has-bouncing=]

100. [scroll-event-interval=]

103. ...

104.
/ion-content
http://ionicframework.com/docs/api/directive/ionContent/

105. Refresh

106.
http://ionicframework.com/docs/api/directive/ionRefresher/

107. /www/templates/home.html
ion-view

108. view-title=Menu

111. ion-content

116. div

117. class=content

118.
…⋯

127. button

128. class=button

129. button-full

130. button-light

131. ui-sref=refresh

144. Refresh

153. /button

154.
…⋯

159. /div

162. /ion-content

163.
/ion-view

164.
메뉴

165. /www/js/app.js
.config(function($stateProvider,

166. $urlRouterProvider)

167. {

168.
…⋯

173. .state('refresh',

174. {

184. url:

185. /refresh,

195. templateUrl:

196. templates/refresh.html

203. })

204.
…⋯

205.
})

206. /www/js/controllers.js
.controller('RefreshCtrl',

207. function($scope,

208. $timeout)

209. {

214. $scope.items

215. =

216. ['Item

217. 1',

218. 'Item

219. 2',

220. 'Item

221. 3'];

226. $scope.doRefresh

227. =

228. function()

229. {

238. $timeout(

239. function()

240. {

253. $scope.items.push('New

254. Item

255. '

256. +

257. Math.floor(Math.random()

258. *

259. 1000)

260. +

261. 4);

274. $scope.$broadcast('scroll.refreshComplete');

283. },

284. 1000);

289. };

290.
});

291. /www/templates/refresh.html

292.
ion-view

293. title=Pull

294. To

295. Refresh

296. ng-controller=RefreshCtrl

300. ion-content

309. ion-refresher

310. on-refresh=doRefresh()

319. /ion-refresher

328. ion-list

341. ion-item

342. ng-repeat=item

343. in

344. items{{item}}/ion-item

353. /ion-list

358. /ion-content

359.
/ion-view
파일 추가

360. /www/css/style.css
body

361. {

366. cursor:

367. url('http://ionicframework.com/img/finger.png'),

368. auto;

369.
}

370. Inputs

371. home.html
button

375. class=button

376. button-full

377. button-light

381. ui-sref=inputs

386. inputs

387.
/button

388. app.js
.state('inputs',

389. {

393. url:

394. /inputs,

398. templateUrl:

399. templates/inputs.html

400.
})

402. inputs.html
ion-view

403. title=Inputs

405. ion-content

410. pCheckbox/p

415. ion-checkbox

416. ng-model=isCheckedCheckbox

417. Label/ion-checkbox

427. pRadio/p

432. ion-radio

433. ng-model=choice

434. ng-value='A'Choose

435. A/ion-radio

440. ion-radio

441. ng-model=choice

442. ng-value='B'Choose

443. B/ion-radio

448. pToggle/p

453. ion-toggle

454. ng-model=airplaneMode

455. toggle-class=“toggle-calm

462. Airplane

463. Mode

468. /ion-toggle

473. /ion-content

474.
/ion-view

475. Events

476. home.html
button

480. class=button

481. button-full

482. button-light

486. ui-sref=events

491. Events

492.
/button

493. app.js
.state('events', {
url: /events,
templateUrl: templates/events.html
})

494. controllers.js

495. #1
.controller('EventCtrl',

496. function($scope,

497. $timeout)

498. {

507. $scope.onHold

508. =

509. function()

510. {

523. alert('onHold');

532. };

541. $scope.onTap

542. =

543. function()

544. {

557. alert('onTap');

566. };

575. $scope.onDoubleTap

576. =

577. function()

578. {

591. alert('onDoubleTap');

600. };

609. $scope.onTouch

610. =

611. function()

612. {

625. alert('onTouch');

634. };

643. $scope.onRelease

644. =

645. function()

646. {

659. alert('onRelease');

668. };

677. $scope.onDrag

678. =

679. function()

680. {

693. alert('onDrag');

702. };

711. $scope.onDragUp

712. =

713. function()

714. {

727. alert('onDragUp');

736. };

745. $scope.onDragRight

746. =

747. function()

748. {

761. alert('onDragRight');

770. };

771. controllers.js

772. #2

780. $scope.onDragDown

781. =

782. function()

783. {

796. alert('onDragDown');

805. };

814. $scope.onDragLeft

815. =

816. function()

817. {

830. alert('onDragLeft');

839. };

848. $scope.onSwipe

849. =

850. function()

851. {

864. alert('onSwipe');

873. };

882. $scope.onSwipeUp

883. =

884. function()

885. {

898. alert('onSwipeUp');

907. };

916. $scope.onSwipeRight

917. =

918. function()

919. {

932. alert('onSwipeRight');

941. };

950. $scope.onSwipeDown

951. =

952. function()

953. {

966. alert('onSwipeDown');

975. };

984. $scope.onSwipeLeft

985. =

986. function()

987. {

1000. alert('onSwipeLeft');

1009. };

1010.
})

1011. events.html
ion-view

1012. title=Events

1013. ng-controller=EventCtrl

1017. ion-content

1026. button

1027. on-hold=onHold()

1028. class=buttononHold/button

1037. button

1038. on-tap=onTap()

1039. class=buttononTap/button

1048. button

1049. on-double-tap=onDoubleTap()

1050. class=buttononDoubleTap/button

1059. button

1060. on-touch=onTouch()

1061. class=buttononTouch/button

1070. button

1071. on-release=onRelease()

1072. class=buttononRelease/button

1081. button

1082. on-drag=onDrag()

1083. class=buttononDrag/button

1092. button

1093. on-drag-up=onDragUp()

1094. class=buttononDragUp/button

1103. button

1104. on-drag-right=onDragRight()

1105. class=buttononDragRight/button

1114. button

1115. on-drag-down=onDragDown()

1116. class=buttononDragDown/button

1125. button

1126. on-drag-left=onDragLeft()

1127. class=buttononDragLeft/button

1136. button

1137. on-swipe=onSwipe()

1138. class=buttononSwipe/button

1147. button

1148. on-swipe-up=onSwipeUp()

1149. class=buttononSwipeUp/button

1158. button

1159. on-swipe-right=onSwipeRight()

1160. class=buttononSwipeRight/button

1169. button

1170. on-swipe-down=onSwipeDown()

1171. class=buttononSwipeDown/button

1180. button

1181. on-swipe-left=onSwipeLeft()

1182. class=buttononSwipeLeft/button

1187. /ion-content

1188.
/ion-view

1189. Header/Footer

1190. home.html
button

1194. class=button

1195. button-full

1196. button-light

1200. ui-sref=header-footer

1205. Header,

1206. Footer

1207.
/button

1208. app.js
.state('header-footer', {
url: /header-footer,
templateUrl: templates/header-footer.html
})

1209. header-footer.html
ion-view

1210. title=Header,

1211. Footer

1216. ion-header-bar

1217. align-title=left

1218. class=bar-positive

1227. div

1228. class=buttons

1241. button

1242. class=button

1243. ng-click=Left

1244. Button/button

1253. /div

1262. h1

1263. class=titleTitle!/h1

1272. div

1273. class=buttons

1286. button

1287. class=buttonRight

1288. Button/button

1297. /div

1302. /ion-header-bar

1307. ion-content

1316. 컨텐츠

1321. /ion-content

1326. ion-footer-bar

1327. align-title=left

1328. class=bar-assertive

1337. div

1338. class=buttons

1351. button

1352. class=buttonLeft

1353. Button/button

1362. /div

1371. h1

1372. class=titleTitle!/h1

1381. div

1382. class=buttons

1383. ng-click=