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

1. Ionic

2. 으로

3. 모바일앱

4. 만들기 #3.

5. Angularjs,

6. Javascript

7. Component ABCD,

8. 스노우키위

9. 한성일

10. 1. Angularjs 2. Angularjs 실습 3. 스마트폰 테스트 4. 아이오닉 자바스크립트 컴포넌트 #1 코스

11. 1.

12. Angularjs

13. Angularjs 제이쿼리보다 쉬워요.

14. Angularjs

15. 익숙치

16. 않은

17. 콘솔 !DOCTYPE

18. html

19. html

20. head

21. lang=en

26. meta

27. charset=UTF-8

32. title/title

37. script

38. src=

39. http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/ angular.min.js/script

40. /head

41. body

42. /body

43. /html script

44. src=

45. http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/ angular.min.js/script head 와 /head 사이에 나은 줄이 꼭 필요합니다. 제이쿼리와 비슷하죠.

46. 작업디렉토리로 cd c:ionic-space cd ~/Document/ionic-space

47. 작업디렉토리로 md angularjs mkdir angularjs

48. 2.

49. Angularjs

50. 실습

51. first !DOCTYPE

52. html

53. html

54. head

55. lang=ko

60. meta

61. charset=UTF-8

66. title/title

71. script

72. src=

73. http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/ angular.min.js/script

74. /head

75. body

78. div

79. ng-app=

84. pName

86. input

87. type=text

88. ng-model=name/p

93. h1Hello

94. {{name}}/h1

104. pUserid

105. :

106. input

107. type=text

108. ng-model=id/p

113. h2Hello

114. {{id}}/h2

117. /div

118. /body

119. /html

120. Expressions div

121. ng-app=

124. pMy

125. first

126. expression:

127. {{

128. 5

129. +

130. 5

131. }}/p

132. /div

134. ng-app=

135. ng-init=quantity=1;cost=5

138. pTotal

139. in

140. dollar:

141. {{

142. quantity

143. *

144. cost

145. }}/p

146. /div

148. ng-app=

149. ng-init=quantity=1;cost=5

152. pTotal

153. in

154. dollar:

155. span

156. ng-bind=quantity

157. *

158. cost/span/p

159. /div

161. ng-app=

162. ng-init=firstName='John';lastName='Doe'

163. pThe

164. full

165. name

166. is:

167. {{

168. firstName

169. +

172. +

173. lastName

174. }}/p

176. ng-app=

177. ng-init=firstName='John';lastName='Doe'

180. pThe

181. name

182. is

183. span

184. ng-bind=firstName

185. +

186. '

187. '

188. +

189. lastName/span/p

190. /div

192. ng-app=

193. ng-init=person={firstName:'John',lastName:'Doe'}

196. pThe

197. name

198. is

199. {{

200. person.lastName

201. }}/p

202. /div

204. ng-app=

205. ng-init=person={firstName:'John',lastName:'Doe'}

208. pThe

209. name

210. is

211. span

212. ng-bind=person.lastName/span/p

213. /div

215. ng-app=

216. ng-init=points=[1,15,19,2,40]

219. pThe

220. third

221. result

222. is

223. {{

224. points[2]

225. }}/p

226. /div

227. Directives div

228. ng-app=

229. ng-init=points=[1,15,19,2,40]

232. pThe

233. third

234. result

235. is

236. span

237. ng-bind=points[2]/span/p

238. /div

239. Directives div

240. data-ng-app=

241. data-ng-init=quantity=1;price=5

244. h2Cost

245. Calculator/h2

248. Quantity:

249. input

250. type=number

251. ng-model=quantity

254. Price:

255. input

256. type=number

257. ng-model=price

260. pbTotal

261. in

262. dollar:/b

263. {{quantity

264. *

265. price}}/p

266. /div

267. Directives div

268. data-ng-app=

269. data-ng-init=names=['Jani','Hege','Kai']

272. pLooping

273. with

274. ng-repeat:/p

277. ul

282. li

283. data-ng-repeat=x

284. in

285. names

292. {{

293. x

294. }}

299. /li

302. /ul

303. /div

304. Directives div

305. ng-app=

306. ng-init=names=[

309. {name:'Jani',country:'Norway'},

312. {name:'Hege',country:'Sweden'},

315. {name:'Kai',country:'Denmark'}]

318. ul

323. li

324. ng-repeat=x

325. in

326. names

333. {{

334. x.name

335. +

336. ',

337. '

338. +

339. x.country

340. }}

345. /li

348. /ul

349. /div

350. Controllers div

351. ng-app=myApp

352. ng-controller=myCtrl

355. First

356. Name:

357. input

358. type=text

359. ng-model=firstNamebr

362. Last

363. Name:

364. input

365. type=text

366. ng-model=lastNamebr

369. br

372. Full

373. Name:

374. {{firstName

375. +

378. +

379. lastName}}

380. /div

381. script

384. var

385. app

386. =

387. angular.module('myApp',

388. []);

391. app.controller('myCtrl',

392. function($scope)

393. {

400. $scope.firstName

401. =

402. John;

409. $scope.lastName

410. =

411. Doe;

414. });

415. /script

417. ng-app=myApp

418. ng-controller=personCtrl

421. First

422. Name:

423. input

424. type=text

428. Last

429. Name:

430. input

431. type=text

435. br

438. Full

439. Name:

440. {{fullName()}}

441. /div

442. script

443. var

444. app

445. =

447. []);

448. app.controller('personCtrl',

450. {

456. =

457. John;

463. =

464. Doe;

469. $scope.fullName

470. =

471. function()

472. {

481. return

483. +

486. +

487. $scope.lastName;

492. }

493. });

494. /script

496. ng-app=myApp

500. First

501. Name:

502. input

503. type=text

507. Last

508. Name:

509. input

510. type=text

514. br

517. Full

518. Name:

519. {{firstName

520. +

523. +

524. lastName}}

525. /div

526. script

527. src=personController.js/script

528. personController.js angular.module('myApp',

529. []).controller('personCtrl',

531. {

537. =

538. John,

544. =

545. Doe,

550. $scope.fullName

551. =

552. function()

553. {

562. return

564. +

567. +

568. $scope.lastName;

573. }

574. });

576. ng-app=myApp

577. ng-controller=namesCtrl

581. ul

586. li

587. ng-repeat=x

588. in

589. names

596. {{

597. x.name

598. +

599. ',

600. '

601. +

602. x.country

603. }}

608. /li

611. /ul

612. /div

613. script

614. src=namesController.js/script

615. namesController.js angular.module('myApp',

616. []).controller('namesCtrl',

618. {

623. names=[

628. {name:'Jani',country:'Norway'},

633. {name:'Hege',country:'Sweden'},

638. {name:'Kai',country:'Denmark'}];

643. $scope.names

644. =

645. names;

646. });

647. Filter div

648. ng-app=myApp

652. pThe

653. name

654. is

655. {{

656. lastName

657. |

658. uppercase

659. }}/p

662. pThe

663. name

664. is

665. {{

666. lastName

667. |

668. lowercase

669. }}/p

670. /div

671. script

672. src=personController.js/script

673. Filter div

674. ng-app=

678. input

679. type=number

680. ng-model=quantity

683. input

684. type=number

685. ng-model=price

688. pTotal

689. =

690. {{

691. (quantity

692. *

693. price)

694. |

695. currency

696. }}/p

697. /div

698. Filter div

699. ng-app=myApp

701. pLooping

702. with

703. objects:/p

704. ul

707. li

708. ng-repeat=x

709. in

710. names

711. |

712. orderBy:'country'

717. {{

718. x.name

719. +

720. ',

721. '

722. +

723. x.country

724. }}

727. /li

728. /ul

729. /div

730. script

732. Filter div

733. ng-app=myApp

737. pFiltering

738. input:/p

741. pinput

742. type=text

743. ng-model=test/p

746. ul

751. li

752. ng-repeat=x

753. in

754. names

755. |

756. filter:test

757. |

758. orderBy:'country'

765. {{

766. (x.name

767. |

768. uppercase)

769. +

770. ',

771. '

772. +

773. x.country

774. }}

779. /li

782. /ul

783. /div

784. script

786. Http div

787. ng-app=myApp

788. ng-controller=customersCtrl

790. ul

793. li

794. ng-repeat=x

795. in

796. names

801. {{

802. x.Name

803. +

804. ',

805. '

806. +

807. x.Country

808. }}

811. /li

812. /ul

813. /div

814. script

815. var

816. app

817. =

819. []);

820. app.controller('customersCtrl',

821. function($scope,

822. $http)

823. {

826. $http.get(http://www.w3schools.com/angular/customers.php)

829. .success(function

830. (response)

831. {$scope.names

832. =

833. response.records;});

834. });

835. /script

836. Table div

837. ng-app=myApp

840. table

843. tr

844. ng-repeat=x

845. in

846. names

851. td{{

852. x.Name

853. }}/td

858. td{{

859. x.Country

860. }}/td

863. /tr

864. /table

865. /div

866. script

867. var

868. app

869. =

871. []);

874. $http)

875. {

886. (response)

887. {$scope.names

888. =

890. });

891. /script

892. Table style

893. table,

894. th

895. ,

896. td

898. {

901. border:

902. 1px

903. solid

904. grey;

907. border-collapse:

908. collapse;

911. padding:

912. 5px;

913. }

914. table

915. tr:nth-child(odd)

916. {

919. background-color:

920. #f1f1f1;

921. }

922. table

923. tr:nth-child(even)

924. {

927. background-color:

928. #ffffff;

929. }

930. /style div

931. ng-app=myApp

934. table

937. tr

938. ng-repeat=x

939. in

940. names

945. td{{

946. x.Name

947. }}/td

952. td{{

953. x.Country

954. }}/td

957. /tr

958. /table

959. /div

960. script

961. var

962. app

963. =

965. []);

968. $http)

969. {

980. (response)

981. {$scope.names

982. =

984. });

985. /script

986. Table div

987. ng-app=myApp

990. table

993. tr

994. ng-repeat=x

995. in

996. names

1001. td{{

1002. x.Name

1003. }}/td

1008. td{{

1009. x.Country

1010. |

1011. uppercase

1012. }}/td

1015. /tr

1016. /table

1017. /div

1018. script

1019. var

1020. app

1021. =

1023. []);

1026. $http)

1027. {

1038. (response)

1039. {$scope.names

1040. =

1042. });

1043. /script

1044. Table div

1045. ng-app=myApp

1048. table

1051. tr

1052. ng-repeat=x

1053. in

1054. names

1059. td{{

1060. $index

1061. +

1062. 1

1063. }}/td

1068. td{{

1069. x.Name

1070. }}/td

1075. td{{

1076. x.Country

1077. }}/td

1080. /tr

1081. /table

1082. /div

1083. script

1086. var

1087. app

1088. =

1090. []);

1095. $http)

1096. {

1111. (response)

1112. {$scope.names

1113. =

1117. });

1118. /script

1119. Table div

1120. ng-app=myApp

1123. table

1126. tr

1127. ng-repeat=x

1128. in

1129. names

1134. td

1135. ng-if=$odd

1136. style=background-color:#f1f1f1

1141. {{

1142. x.Name

1143. }}/td

1148. td

1149. ng-if=$even

1154. {{

1155. x.Name

1156. }}/td

1161. td

1162. ng-if=$odd

1163. style=background-color:#f1f1f1

1168. {{

1169. x.Country

1170. }}/td

1175. td

1176. ng-if=$even

1181. {{

1182. x.Country

1183. }}/td

1186. /tr

1187. /table

1188. /div

1189. script

1190. var

1191. app

1192. =

1194. []);

1197. $http)

1198. {

1209. (response)

1210. {$scope.names

1211. =

1213. });

1214. /script

1215. DOM div

1216. ng-app=

1217. ng-init=mySwitch=true

1220. p

1225. button

1226. ng-disabled=mySwitchClick

1227. Me!/button

1230. /p

1233. p

1238. input

1239. type=checkbox

1240. ng-model=mySwitch/Button

1243. /p

1246. p

1251. {{

1252. mySwitch

1253. }}

1256. /p

1257. /div

1259. DOM div

1260. ng-app=

1263. p

1264. ng-show=trueI

1265. am

1266. visible./p

1269. p

1270. ng-show=falseI

1271. am

1272. not

1273. visible./p

1274. /div

1276. DOM div

1277. ng-app=

1278. ng-init=hour=13

1281. p

1282. ng-show=hour

1284. 12I

1285. am

1286. visible./p

1287. /div

1289. DOM div

1290. ng-app=

1293. p

1294. ng-hide=trueI

1295. am

1296. not

1297. visible./p

1300. p

1301. ng-hide=falseI

1302. am

1303. visible./p

1304. /div

1306. Event div

1307. ng-app=myApp

1308. ng-controller=myCtrl

1309. button

1310. ng-click=count

1311. =

1312. count

1313. +

1314. 1Click

1315. Me!/button

1316. p{{

1317. count

1318. }}/p

1319. /div

1320. script

1323. var

1324. app

1325. =

1327. []);

1330. app.controller('myCtrl',

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

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

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

Similar to Ionic으로 모바일앱 만들기 #3 (20)

More from 성일 한

More from 성일 한 (20)

Recently uploaded

Recently uploaded (20)

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