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

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',

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

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=

1396. button

1397. class=buttonRight

1398. Button/button

1407. /div

1412. /ion-footer-bar

1413. /ion-view

1414. Keyboard http://ionicframework.com/docs/api/page/keyboard/

1415. Lists http://ionicframework.com/docs/nightly/api/directive/ionList/

1420. class=button

1421. button-full

1422. button-light

1426. ui-sref=list

1431. List

1432. /button

1433. app.js .state('list',

1434. {

1438. url:

1439. /list,

1443. templateUrl:

1444. templates/list.html

1445. })

1447. controllers.js .controller('listCtrl',

1448. function($scope)

1449. {

1454. $scope.shouldShowDelete

1455. =

1456. false;

1461. $scope.shouldShowReorder

1462. =

1463. false;

1468. $scope.listCanSwipe

1469. =

1470. true;

1475. $scope.items

1476. =

1477. [

1486. {img:

1487. 'http://ionicframework.com/img/finger.png',

1488. title:

1489. 'title1',

1490. desc:

1491. 'desc'}

1500. ,

1501. {img:

1503. title:

1504. 'title2',

1505. desc:

1506. 'desc'}

1515. ,

1516. {img:

1518. title:

1519. 'title3',

1520. desc:

1521. 'desc'}

1526. ];

1527. })

1528. list.html ion-view

1529. title=List

1534. ion-content

1543. ion-list

1544. ng-controller=listCtrl

1563. show-delete=shouldShowDelete

1582. show-reorder=shouldShowReorder

1601. can-swipe=listCanSwipe

1614. ion-item

1615. ng-repeat=item

1616. in

1617. items

1618. class=item-thumbnail-left

1634. img

1635. ng-src={{item.img}}

1652. h2{{item.title}}/h2

1669. p{{item.desc}}/p

1686. ion-option-button

1687. class=button-positive

1688. ng-click=share(item)

1709. Share

1726. /ion-option-button

1743. ion-option-button

1744. class=button-info

1745. ng-click=edit(item)

1766. Edit

1783. /ion-option-button

1800. ion-delete-button

1801. class=ion-minus-circled

1837. ng-click=items.splice($index,

1838. 1)

1855. /ion-delete-button

1872. ion-reorder-button

1873. class=ion-navicon

1910. on-reorder=reorderItem(item,

1911. $fromIndex,

1912. $toIndex)

1929. /ion-reorder-button

1942. /ion-item

1951. /ion-list

1956. /ion-content

1957. /ion-view

1958. Loading ch2 참조 http://ionicframework.com/docs/nightly/api/service/$ionicLoading/

1959. Modal http://ionicframework.com/docs/api/directive/ionNavView/

1964. class=button

1965. button-full

1966. button-light

1970. ui-sref=modal

1975. Modal

1976. /button

1977. app.js .state('modal',

1978. {

1982. url:

1983. /modal,

1987. templateUrl:

1988. templates/modal.html

1989. })

1991. controllers.js .controller('ModalCtrl',

1993. $ionicModal)

1994. {

1999. $ionicModal.fromTemplateUrl('my-modal.html',

2000. {

2009. scope:

2010. $scope,

2019. animation:

2020. 'slide-in-up'

2025. }).then(function(modal)

2026. {

2035. $scope.modal

2036. =

2037. modal;

2042. });

2047. $scope.openModal

2048. =

2049. function()

2050. {

2059. $scope.modal.show();

2064. };

2069. $scope.closeModal

2070. =

2071. function()

2072. {

2081. $scope.modal.hide();

2086. };

2087. })

2088. modal.html ion-view

2089. view-title=Modal

2090. ng-controller=ModalCtrl

2095. ion-content

2104. button

2105. class=button

2120. ng-click=openModal()Open

2121. Modal/button

2130. hr

2135. /ion-content

2140. script

2141. id=my-modal.html

2142. type=text/ng-template

2151. ion-modal-view

2181. h1

2182. class=titleMy

2183. Modal

2184. title/h1

2210. ion-content

2227. Hello!

2240. /ion-content

2249. /ion-modal-view

2254. /script

2255. /ion-view

2256. Navigation http://ionicframework.com/docs/api/directive/ionNavView/

2257. Platform http://ionicframework.com/docs/api/service/$ionicPlatform/

2258. Popover http://ionicframework.com/docs/api/service/$ionicPopover/

2259. .state('popover',

2260. {

2264. url:

2265. /popover,

2269. templateUrl:

2270. templates/popover.html

2271. })

2272. app.js

2273. popover.html ion-view

2274. title=Popover

2275. ng-controller=PopoverCtrl

2279. ion-content

2288. button

2289. ng-click=openPopover($event)Open

2290. Popover/button

2295. /ion-content

2300. script

2301. id=my-popover.html

2302. type=text/ng-template

2311. ion-popover-view

2341. h1

2342. class=titleMy

2343. Popover

2344. Title/h1

2370. ion-content

2387. Hello!

2400. /ion-content

2409. /ion-popover-view

2414. /script

2415. /ion-view

2416. controllers.js .controller('PopoverCtrl',

2418. $ionicPopover)

2419. {

2423. var

2424. template

2425. =

2426. 'ion-popover-viewion-header-bar

2427. h1

2428. class=titleMy

2429. Popover

2430. Title/h1

2432. ion-content

2433. Hello!

2434. /ion-content/ion-popover-view';

2439. $scope.popover

2440. =

2441. $ionicPopover.fromTemplate(template,

2442. {

2451. scope:

2452. $scope

2457. });

2462. //

2463. .fromTemplateUrl()

2464. method

2469. $ionicPopover.fromTemplateUrl('my-popover.html',

2470. {

2479. scope:

2480. $scope

2485. }).then(function(popover)

2486. {

2495. $scope.popover

2496. =

2497. popover;

2502. });

2507. $scope.openPopover

2508. =

2509. function($event)

2510. {

2519. $scope.popover.show($event);

2524. };

2529. $scope.closePopover

2530. =

2531. function()

2532. {

2541. $scope.popover.hide();

2546. };

2547. })

2548. Popup http://ionicframework.com/docs/api/service/$ionicPopover/

2549. app.js .state('popup',

2550. {

2554. url:

2555. /popup,

2559. templateUrl:

2560. templates/popup.html

2561. })

2563. popup.html ion-view

2564. title=Popup

2565. ng-controller=PopupCtrl

2570. ion-content

2579. button

2580. class=button

2581. button-dark

2593. ng-click=showPopup()

2606. show

2615. /button

2620. /ion-content

2621. /ion-view

2622. controllers.js .controller('PopupCtrl',function($scope,

2623. $ionicPopup,

2624. $timeout)

2625. {

2630. $scope.showPopup

2631. =

2632. function()

2633. {

2642. $scope.data

2643. =

2644. {}

2653. var

2654. myPopup

2655. =

2656. $ionicPopup.show({

2669. template:

2670. 'input

2671. type=password

2672. ng-model=data.wifi',

2685. title:

2686. 'Enter

2687. Wi-Fi

2688. Password',

2701. subTitle:

2702. 'Please

2703. use

2704. normal

2705. things',

2718. scope:

2719. $scope,

2732. buttons:

2733. [

2750. {

2751. text:

2752. 'Cancel'

2753. },

2770. {

2791. text:

2792. 'bSave/b',

2813. type:

2814. 'button-positive',

2835. onTap:

2836. function(e)

2837. {

2862. if

2863. (!$scope.data.wifi)

2864. {

2893. //don't

2894. allow

2895. the

2896. user

2897. to

2898. close

2899. unless

2900. he

2901. enters

2902. wifi

2903. password

2932. e.preventDefault();

2957. }

2958. else

2959. {

2988. return

2989. $scope.data.wifi;

3014. }

3035. }

3052. }

3065. ]

3074. });

3083. myPopup.then(function(res)

3084. {

3097. console.log('Tapped!',

3098. res);

3107. });

3116. $timeout(function()

3117. {

3130. myPopup.close();

3131. //close

3132. the

3133. popup

3134. after

3135. 3

3136. seconds

3137. for

3138. some

3139. reason

3148. },

3149. 3000);

3154. };

3155. });

3156. Scroll http://ionicframework.com/docs/api/directive/ionScroll/

3157. app.js .state('scroll',

3158. {

3162. url:

3163. /scroll,

3167. templateUrl:

3168. templates/scroll.html

3169. })

3171. scroll.html ion-view

3172. title=Scroll

3176. ion-content

3185. ion-scroll

3186. zooming=true

3187. direction=xy

3188. style=width:

3189. 500px;

3190. height:

3191. 500px

3204. div

3205. style=width:

3206. 5000px;

3207. height:

3208. 5000px;

3209. background:

3210. url('https:// upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg')

3211. repeat/div

3220. /ion-scroll

3225. /ion-content

3226. /ion-view

3228. class=button

3229. button-full

3230. button-light

3231. ui-sref=scroll

3236. scroll

3237. /button

3238. InfiniteScroll http://ionicframework.com/docs/api/directive/ionInfiniteScroll/ 무한 스크롤.. 실제 되는 소스는 아님

3239. infinite.html ion-content

3240. ng-controller=InfiniteCrtl

3243. ion-list

3246. ....

3249. ....

3252. /ion-list

3255. ion-infinite-scroll

3260. on-infinite=loadMore()

3265. distance=1%

3268. /ion-infinite-scroll

3269. /ion-content

3270. controllers.js .controller('InfiniteCtrl',

3272. $http)

3273. {

3276. $scope.items

3277. =

3278. [];

3281. $scope.loadMore

3282. =

3283. function()

3284. {

3289. $http.get('/more-items').success(function(items)

3290. {

3297. useItems(items);

3304. $scope.$broadcast('scroll.infiniteScrollComplete');

3309. });

3312. };

3315. $scope.$on('$stateChangeSuccess',

3316. function()

3317. {

3322. $scope.loadMore();

3325. });

3326. })

3327. SideMenus http://ionicframework.com/docs/api/directive/ionSideMenus/

3328. Slide

3329. Box http://ionicframework.com/docs/api/directive/ionSideMenus/

3334. class=button

3335. button-full

3336. button-light

3340. ui-sref=slidebox

3345. slidebox

3346. /button

3347. app.js .state('slidebox',

3348. {

3352. url:

3353. /slidebox,

3357. templateUrl:

3358. templates/slidebox.html

3359. })

3361. slidebox.html ion-view

3362. title=Pull

3363. To

3364. Refresh

3369. ion-content

3378. ion-slide-box

3379. on-slide-changed=slideHasChanged($index)

3392. ion-slide

3409. div

3410. class=box

3411. blueh1BLUE/h1/div

3424. /ion-slide

3437. ion-slide

3454. div

3455. class=box

3456. yellowh1YELLOW/h1/div

3469. /ion-slide

3482. ion-slide

3499. div

3500. class=box

3501. pinkh1PINK/h1/div

3514. /ion-slide

3523. /ion-slide-box

3528. /ion-content

3529. /ion-view

3530. spinner http://ionicframework.com/docs/nightly/api/directive/ionSpinner/

3531. app.js .state('spinner',

3532. {

3535. url:

3536. /spinner,

3539. templateUrl:

3540. templates/spinner.html

3541. })

3546. class=button

3547. button-full

3548. button-light

3552. ui-sref=spinner

3557. spinner

3558. /button

3559. spinner.html ion-view

3560. title=Spinner

3564. ion-content

3573. ion-spinner

3574. icon=spiral/ion-spinner

3583. ion-spinner

3584. icon=android/ion-spinner

3593. ion-spinner

3594. icon=ios/ion-spinner

3599. /ion-content

3600. /ion-view

3601. tabs http://ionicframework.com/docs/nightly/api/directive/ionTabs/

3602. Utility http://ionicframework.com/docs/nightly/api/

3603. 3.

3604. Publishing

3605. 참고

3606. 자료 http://ionicframework.com/docs/guide/publishing.html http://forum.ionicframework.com/t/ionic-toturial-for-building-a-release-apk/15758

3607. Release ionic platform add android cd platforms/android keytool -genkey -v -keystore YourApp.keystore -alias YourApp -keyalg RSA - keysize 2048 -validity 10000 platforms/android ant.properties 생성 key.store=YourApp.keystore key.alias=YourApp 1 2 3 4 platforms/android secure.properties 생성 5 6 property file=secure.properties / custom_rules.xml cd .. cd .. ionic build android --release 7

3608. 4.

3609. 토론

3610. 궁금한점? 어떻게 만드는게 좋을지? 어떻게 만들지? 어떻게 배우고 싶은지? 빠진게 없는지?

3611. 정말

3612. 정말

3614. 수고하셨습니다.

3615. :) ABCD

3617. http://abcds.kr

3620. https://www.facebook.com/groups/562787713823026/

3621. 한성일

3623. https://www.facebook.com/jamie.han.16

3625. iheart79@gmail.com

Ionic으로 모바일앱 만들기 #4

More Related Content

More from 성일 한 (19)

Recently uploaded (20)

Ionic으로 모바일앱 만들기 #4