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

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

85. :

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

133. Expressions
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

147. Expressions
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

160. Expressions
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

175. Expressions
div

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

191. Expressions
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

203. Expressions
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

214. Expressions
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

416. Controllers
div

417. ng-app=myApp

418. ng-controller=personCtrl

421. First

422. Name:

423. input

424. type=text

425. ng-model=firstNamebr

428. Last

429. Name:

430. input

431. type=text

432. ng-model=lastNamebr

435. br

438. Full

439. Name:

440. {{fullName()}}

441.
/div

442.
script

443.
var

444. app

445. =

446. angular.module('myApp',

447. []);

448.
app.controller('personCtrl',

449. function($scope)

450. {

455. $scope.firstName

456. =

457. John;

462. $scope.lastName

463. =

464. Doe;

469. $scope.fullName

470. =

471. function()

472. {

481. return

482. $scope.firstName

483. +

486. +

487. $scope.lastName;

492. }

493.
});

494.
/script

495. Controllers
div

496. ng-app=myApp

497. ng-controller=personCtrl

500. First

501. Name:

502. input

503. type=text

504. ng-model=firstNamebr

507. Last

508. Name:

509. input

510. type=text

511. ng-model=lastNamebr

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

530.
function($scope)

531. {

536. $scope.firstName

537. =

538. John,

543. $scope.lastName

544. =

545. Doe,

550. $scope.fullName

551. =

552. function()

553. {

562. return

563. $scope.firstName

564. +

567. +

568. $scope.lastName;

573. }

574.
});

575. Controllers
div

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

617.
function($scope)

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

649. ng-controller=personCtrl

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

700. ng-controller=namesCtrl

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

731. src=namesController.js/script

732. Filter
div

733. ng-app=myApp

734. ng-controller=namesCtrl

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

785. src=namesController.js/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. =

818. angular.module('myApp',

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

838. ng-controller=customersCtrl

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. =

870. angular.module('myApp',

871. []);

872.
app.controller('customersCtrl',

873. function($scope,

874. $http)

875. {

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

885. .success(function

886. (response)

887. {$scope.names

888. =

889. response.records;});

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

932. ng-controller=customersCtrl

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. =

964. angular.module('myApp',

965. []);

966.
app.controller('customersCtrl',

967. function($scope,

968. $http)

969. {

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

979. .success(function

980. (response)

981. {$scope.names

982. =

983. response.records;});

984.
});

985.
/script

986. Table
div

987. ng-app=myApp

988. ng-controller=customersCtrl

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. =

1022. angular.module('myApp',

1023. []);

1024.
app.controller('customersCtrl',

1025. function($scope,

1026. $http)

1027. {

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

1037. .success(function

1038. (response)

1039. {$scope.names

1040. =

1041. response.records;});

1042.
});

1043.
/script

1044. Table
div

1045. ng-app=myApp

1046. ng-controller=customersCtrl

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. =

1089. angular.module('myApp',

1090. []);

1093. app.controller('customersCtrl',

1094. function($scope,

1095. $http)

1096. {

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

1110. .success(function

1111. (response)

1112. {$scope.names

1113. =

1114. response.records;});

1117. });

1118.
/script

1119. Table
div

1120. ng-app=myApp

1121. ng-controller=customersCtrl

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. =

1193. angular.module('myApp',

1194. []);

1195.
app.controller('customersCtrl',

1196. function($scope,

1197. $http)

1198. {

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

1208. .success(function

1209. (response)

1210. {$scope.names

1211. =

1212. response.records;});

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. =

1326. angular.module('myApp',

1327. []);

1330. app.controller('myCtrl',