- ÇöÀç À§Ä¡
- home > ÄÄÇ»ÅÍ¡¤ICT¡¤¾îÇÐ > ÄÄÇ»ÅÍ¡¤IT µµ¼ > À¥ÇÁ·Î±×·¡¹Ö > AngularJS ÀÎ ¾×¼Ç[Á¦ÀÌÆà]
´Ü°èº°·Î ¹è¿ì´Â ´ëÈÇü À¥ ¾ÖÇø®ÄÉÀ̼Ç!
AngularJS´Â ÀÚ¹Ù½ºÅ©¸³Æ® ±â¹ÝÀÇ ÇÁ·¹ÀÓ¿öÅ©·Î¼ µ¿ÀûÀÎ ´ëÈÇü À¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» Ç¥ÁØ Á¤Àû ÆäÀÌÁö¿Í °°Àº ¹æ½ÄÀ¸·Î °³¹ßÇÒ ¼ö ÀÖ´Ù. AngularJS´Â ±âº»ÀûÀÎ ¾ÖÇø®ÄÉÀ̼ÇÀ» ±¸ÇöÇÏ´Â µ¥ ÇÊ¿äÇÑ ±â´É ´ëºÎºÐÀ» ³»ÀåÇÏ°í ÀÖÁö¸¸, »ç¿ëÀÚ°¡ ÀÌ·± ±â´ÉµéÀ» ´õ¿í È®ÀåÇÒ ¼öµµ ÀÖ´Ù. Á÷°üÀûÀÌ¸é¼ º¯°æ°ú Å×½ºÆ®µµ ½¬¿î AngularJS¸¦ ÀÌ¿ëÇϸé ÇÑÃþ Ç°Áú ³ôÀº ¾ÖÇø®ÄÉÀ̼ÇÀ» °³¹ßÇÒ ¼ö ÀÖÀ» °ÍÀÌ´Ù.
¡¶AngularJS ÀÎ ¾×¼Ç¡·Àº AngularJS¸¦ óÀ½ ¹è¿ì´Â »ç¶÷¿¡°Ô ÀûÇÕÇÑ Ã¥ÀÌ´Ù. ´ëÈÇü ´ÜÀÏ ÆäÀÌÁö À¥ ÀÎÅÍÆäÀ̽º¸¦ °³¹ßÇÏ´Â ¹æ¹ý, MVVM°ú °°Àº ÃֽŠÆÐÅÏÀ» Àû¿ëÇÏ°í ¹é¿£µå ¼¹ö¿ÍÀÇ »óÈ£ÀÛ¿ë°ú °°Àº ´Ù¾çÇÑ ÀÛ¾÷ ¹æ¹ýÀ» ¹è¿ï ¼ö ÀÖ´Ù. ¶ÇÇÑ, ¸ðµç ¿¹Á¦¿¡ °üÇØ ÃæºÐÇÑ Çؼ³°ú ±×¸²À» Á¦°øÇÏ°í ÀÖÀ¸¸ç, ¿¹Á¦ Äڵ忡µµ »ó¼¼ÇÑ Çؼ³ÀÌ °çµé¿©Á® ÀÖ´Ù. ?Ã¥ÀÇ ÀϺΠ³»¿ëÀ» ¹Ì¸® Àо½Ç ¼ö ÀÖ½À´Ï´Ù. ¹Ì¸®º¸±â
AngularJS´Â ÀÚ¹Ù½ºÅ©¸³Æ® ±â¹ÝÀÇ ÇÁ·¹ÀÓ¿öÅ©·Î¼ µ¿ÀûÀÎ ´ëÈÇü À¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» Ç¥ÁØ Á¤Àû ÆäÀÌÁö¿Í °°Àº ¹æ½ÄÀ¸·Î °³¹ßÇÒ ¼ö ÀÖ´Ù. AngularJS´Â ±âº»ÀûÀÎ ¾ÖÇø®ÄÉÀ̼ÇÀ» ±¸ÇöÇÏ´Â µ¥ ÇÊ¿äÇÑ ±â´É ´ëºÎºÐÀ» ³»ÀåÇÏ°í ÀÖÁö¸¸, »ç¿ëÀÚ°¡ ÀÌ·± ±â´ÉµéÀ» ´õ¿í È®ÀåÇÒ ¼öµµ ÀÖ´Ù. Á÷°üÀûÀÌ¸é¼ º¯°æ°ú Å×½ºÆ®µµ ½¬¿î AngularJS¸¦ ÀÌ¿ëÇϸé ÇÑÃþ Ç°Áú ³ôÀº ¾ÖÇø®ÄÉÀ̼ÇÀ» °³¹ßÇÒ ¼ö ÀÖÀ» °ÍÀÌ´Ù.
¡¶AngularJS ÀÎ ¾×¼Ç¡·Àº AngularJS¸¦ óÀ½ ¹è¿ì´Â »ç¶÷¿¡°Ô ÀûÇÕÇÑ Ã¥ÀÌ´Ù. ´ëÈÇü ´ÜÀÏ ÆäÀÌÁö À¥ ÀÎÅÍÆäÀ̽º¸¦ °³¹ßÇÏ´Â ¹æ¹ý, MVVM°ú °°Àº ÃֽŠÆÐÅÏÀ» Àû¿ëÇÏ°í ¹é¿£µå ¼¹ö¿ÍÀÇ »óÈ£ÀÛ¿ë°ú °°Àº ´Ù¾çÇÑ ÀÛ¾÷ ¹æ¹ýÀ» ¹è¿ï ¼ö ÀÖ´Ù. ¶ÇÇÑ, ¸ðµç ¿¹Á¦¿¡ °üÇØ ÃæºÐÇÑ Çؼ³°ú ±×¸²À» Á¦°øÇÏ°í ÀÖÀ¸¸ç, ¿¹Á¦ Äڵ忡µµ »ó¼¼ÇÑ Çؼ³ÀÌ °çµé¿©Á® ÀÖ´Ù. ?Ã¥ÀÇ ÀϺΠ³»¿ëÀ» ¹Ì¸® Àо½Ç ¼ö ÀÖ½À´Ï´Ù. ¹Ì¸®º¸±â
ÀúÀÚ: ·çÄ«½º ·çº§Å°,ºê¶óÀ̾ð Æ÷µå °øÀú / ÀåÇöÈñ ¿ª
PART I AngularJS¿Í Ä£ÇØÁö±â 1
CHAPTER 1 ¾È³çÇϼ¼¿ä, AngularJS 3
1.1 AngularJSÀÇ ÀåÁ¡ 4
1.2 AngularJSÀÇ Å« ±×¸² »ìÆ캸±â 7
1.3 ù ¹ø° AngularJS ¾ÖÇø®ÄÉÀÌ¼Ç 8
1.3.1 ¸ðµâ 12
1.3.2 ºä¿Í ÄÁÆ®·Ñ·¯ 13
1.3.3 ¼ºñ½º 18
1.3.4 µð·ºÆ¼ºê 21
1.4 ¿ä¾à 23
CHAPTER 2 AngularJS ¾ÖÇø®ÄÉÀÌ¼Ç ±¸¼ºÇϱâ 25
2.1 ¾ÈÁ©·Î »ìÆ캸±â 25
2.2 AngularJS ¾ÖÇø®ÄÉÀÌ¼Ç ±¸Á¶ 29
2.3 ¾ÈÁ©·ÎÀÇ ±â¹Ý »ìÆ캸±â 31
2.4 ¶ó¿ìÆ®ÀÇ ±¸¼º ¹× Ž»ö 33
2.5 ¸î °¡Áö ¸ð¹ü »ç·Ê 37
2.6 ¿ä¾à 39
PART II AngularJS Á¦´ë·Î È°¿ëÇϱâ 41
CHAPTER 3 ºä¿Í ÄÁÆ®·Ñ·¯ 43
3.1 Å« ±×¸² 44
3.2 AngularJS¿¡¼ÀÇ ºäÀÇ Á¤ÀÇ 46
3.3 AngularJS¿¡¼ÀÇ ÄÁÆ®·Ñ·¯ÀÇ Á¤ÀÇ 48
3.3.1 ´ÙÀÌÁ¦½ºÆ® ÁÖ±â 48
3.3.2 controller-as ¹®¹ý 50
3.3.3 AngularJSÀÇ À̺¥Æ® 51
3.4 ¼Ó¼º°ú Ç¥Çö½Ä 52
3.4.1 ngRepeat¸¦ ÀÌ¿ëÇؼ ½ºÅ丮 Ç¥½ÃÇϱâ 52
3.4.2 ÇÊÅÍ 56
3.4.3 Ç¥Çö½Ä 58
3.5 ¸ð¹ü »ç·Ê ¹× Å×½ºÆ® 65
3.6 ¿ä¾à 68
CHAPTER 4 ¸ðµ¨°ú ¼ºñ½º 69
4.1 ¸ðµ¨ ¹× ¼ºñ½ºÀÇ °³³ä 70
4.1.1 ¼ºñ½º ÀÌÇØÇϱâ 71
4.1.2 ¼ºñ½ºÀÇ »ý¸íÁÖ±â 72
4.1.3 ¼ºñ½ºÀÇ Á¾·ù 73
4.2 \$http¸¦ ÀÌ¿ëÇÑ ¸ðµ¨ 76
4.2.1 \$http ¼ºñ½º¶õ? 77
4.2.2 ù ¸ðµ¨ ±¸ÇöÇϱâ 77
4.2.3 \$http ¼ºñ½ºÀÇ ÆíÀÇ ¸Þ¼µåµé 79
4.3 ÇÁ¶ó¹Ì½º 82
4.3.1 ÇÁ·Î¹Ì½º¶õ ¹«¾ùÀϱî? 82
4.3.2 ÇÁ·Î¹Ì½º È°¿ëÇϱâ 82
4.3.3 \$http.success¿Í \$http.error ¸Þ¼µå 85
4.3.4 ÇÁ·Î¹Ì½º¸¦ ÀÌ¿ëÇØ Äڵ带 ¼øÂ÷ÀûÀ¸·Î ½ÇÇàÇϱâ 86
4.4 \$http ÀÎÅͼÁÅÍ 87
4.4.1 ÀÎÅͼÁÅÍ°¡ ÇÊ¿äÇÑ ÀÌÀ¯ 87
4.4.2 ÀÎÅͼÁÅÍÀÇ È°¿ë 87
4.5 ¼ºñ½º µ¥ÄÚ·¹ÀÌÅÍ 89
4.5.1 ¿Ö µ¥ÄÚ·¹ÀÌÅÍ°¡ ÇÊ¿äÇÒ±î? 89
4.5.2 ·Î±× °³¼±Çϱâ 89
4.6 Å×½ºÆ®¿¡ ´ëÇÑ °í·Á 91
4.6.1 ¼ºñ½º Å×½ºÆ®Çϱâ 91
4.6.2 \$httpBackend ¼ºñ½º¸¦ ÀÌ¿ëÇؼ ¿ø°Ý ¼¹ö¸¦ ¸ðÀÇ È£ÃâÇϱâ 93
4.6.3 ¸ð¹ü »ç·Ê 95
4.7 ¿ä¾à 96
CHAPTER 5 µð·ºÆ¼ºê 97
5.1 µð·ºÆ¼ºê ¼Ò°³ 97
5.1.1 µð·ºÆ¼ºê¶õ ¹«¾ùÀΰ¡? 97
5.1.2 µð·ºÆ¼ºê°¡ ÇÊ¿äÇÑ ÀÌÀ¯ 98
5.1.3 ¿Ö ¿ì¸®´Â µð·ºÆ¼ºê¸¦ ¿øÇϴ°¡? 98
5.2 µð·ºÆ¼ºê ±âÃÊ ´ÙÁö±â 99
5.2.1 »ç¿ëÀÚ ½ºÅ丮 µð·ºÆ¼ºê 99
5.3 °í±Þ ±â´Éµé 107
5.3.1 µå·¡±× ¾Ø µå·Ó ±â´É 107
5.3.2 drag-container µð·ºÆ¼ºê Àû¿ëÇϱâ 110
5.3.3 ÄÁÆ®·Ñ·¯ ±¸ÇöÇϱâ 110
5.3.4 drop-container µð·ºÆ¼ºê ±¸ÇöÇϱâ 112
5.3.5 drop-container µð·ºÆ¼ºê È°¿ëÇϱâ 115
5.3.6 ÄÁÆ®·Ñ·¯ ±¸ÇöÇϱâ 115
5.3.7 drop-target µð·ºÆ¼ºê ±¸ÇöÇϱâ 123
5.3.8 drop-target µð·ºÆ¼ºêÀÇ È°¿ë 125
5.3.9 ÄÁÆ®·Ñ·¯ ±¸ÇöÇϱâ 126
5.3.10 \$dragging ¼ºñ½º ±¸ÇöÇϱâ 127
5.3.11 StoryboardCtrl ÄÁÆ®·Ñ·¯ ¼öÁ¤Çϱâ 128
5.4 ¼µåÆÄƼ ¶óÀ̺귯¸® ´Ù½Ã È°¿ëÇϱâ 130
5.4.1 Flot ¼³Ä¡Çϱâ 131
5.4.2 µð·ºÆ¼ºê ±¸ÇöÇϱâ 132
5.4.3 µð·ºÆ¼ºê È°¿ëÇϱâ 132
5.4.4 µ¥ÀÌÅÍ Ã³¸®Çϱâ 133
5.4.5 ÀÌÁ¦´Â ¡®°Ý¸®µÈ ½ºÄÚÇÁ¡¯¿¡ ´ëÇØ »ìÆ캼 ½Ã°£ 134
5.4.6 ÃÖÁ¾ ¸¶¹«¸®: Flot ÅëÇÕÇϱâ 137
5.5 µð·ºÆ¼ºê Å×½ºÆ®Çϱâ 138
5.6 ¸ð¹ü »ç·Ê 141
5.7 ¿ä¾à 141
CHAPTER 6 ¾Ö´Ï¸ÞÀÌ¼Ç 143
6.1 ¾Ö´Ï¸ÞÀÌ¼Ç ¼Ò°³ 143
6.1.1 AngularJS°¡ ¾Ö´Ï¸ÞÀ̼ÇÀ» ó¸®ÇÏ´Â ¹æ½Ä 144
6.1.2 ¾Ö´Ï¸ÞÀ̼ÇÀÇ À̸§ ±ÔÄ¢ 145
6.1.3 ¾Ö´Ï¸ÞÀÌ¼Ç È°¼ºÈÇϱâ 145
6.2 CSS Æ®·£Áö¼Ç 146
6.2.1 ±âº» Æ®·£Áö¼Ç ±¸ÇöÇϱâ 147
6.2.2 ng-enter Æ®·£Áö¼Ç Á¤ÀÇÇϱâ 147
6.2.3 ng-leave Æ®·£Áö¼Ç Á¤ÀÇÇϱâ 147
6.2.4 À̵¿ ¾Ö´Ï¸ÞÀÌ¼Ç ±¸ÇöÇϱâ 148
6.3 CSS ¾Ö´Ï¸ÞÀÌ¼Ç 150
6.3.1 ±âº» ¾Ö´Ï¸ÞÀÌ¼Ç Å¬·¡½º Á¤ÀÇÇϱâ 150
6.3.2 ¾Ö´Ï¸ÞÀÌ¼Ç Å°ÇÁ·¹ÀÓ Á¤ÀÇÇϱâ 151
6.3.3 ¿ä¼Ò¿¡ À̵¿ ¾Ö´Ï¸ÞÀÌ¼Ç Àû¿ëÇϱâ 154
6.4 ÀÚ¹Ù½ºÅ©¸³Æ® ¾Ö´Ï¸ÞÀÌ¼Ç 155
6.4.1 ÀÚ¹Ù½ºÅ©¸³Æ® ¾Ö´Ï¸ÞÀÌ¼Ç Á¤ÀÇÇϱâ 156
6.4.2 ÀÚ¹Ù½ºÅ©¸³Æ® ¾Ö´Ï¸ÞÀÌ¼Ç À̺¥Æ® 156
6.4.3 ÀÚ¹Ù½ºÅ©¸³Æ® ¾Ö´Ï¸ÞÀÌ¼Ç Å¬·¡½º 157
6.4.4 TweenMax ¶óÀ̺귯¸® 158
6.4.5 ¾Ö´Ï¸ÞÀ̼ÇÀ» ½ÇÁ¦·Î Àû¿ëÇϱâ 159
6.5 Å×½ºÆ® 160
6.6 ¸ð¹ü »ç·Ê 160
6.7 ¿ä¾à 161
CHAPTER 7 ¶ó¿ìÆ®·Î À¥»çÀÌÆ® ±¸¼ºÇϱâ 163
7.1 AngularJS ¶ó¿ìÆà ±¸¼º ¿ä¼Ò 164
7.2 AngularJS¿¡¼ ¶ó¿ìÆ® »ý¼ºÇϱâ 165
7.2.1 ngRoute¿Í ngView¸¦ ÀÌ¿ëÇؼ ù ¹ø° ¶ó¿ìÆ® Á¤ÀÇÇϱâ 165
7.2.2 ngView Ãß°¡Çϱâ 165
7.2.3 \$routeProvider¸¦ ÀÌ¿ëÇؼ ¶ó¿ìÆ® ¼³Á¤Çϱâ 166
7.2.4 ¶ó¿ìÆ® Ž»ö ¼³Á¤Çϱâ 167
7.2.5 ¸®ºä 168
7.3 ¶ó¿ìÆ®¿¡ ¸Å°³º¯¼ö »ç¿ëÇϱâ 168
7.3.1 ¸®ºä 171
7.4 ¶ó¿ìÆ®¿¡¼ ÀÇÁ¸¼º Çؼ®Çϱâ 171
7.4.1 ¸®ºä 173
7.5 ¶ó¿ìÆ® À̺¥Æ® 173
7.5.1 ¸®ºä 174
7.6 Å×½ºÆ® 174
7.7 ¸ð¹ü »ç·Ê 176
7.8 ¿ä¾à 176
CHAPTER 8 Æû°ú À¯È¿¼º °Ë»ç 179
8.1 AngularJSÀÇ Æû À¯È¿¼º °Ë»ç 180
8.1.1 HTML Æû ¿ä¼Ò È®ÀåÇϱâ 180
8.1.2 À¯È¿¼º °Ë»ç Ãß°¡Çϱâ 182
8.1.3 À¯È¿¼º °Ë»ç¿Í CSS 187
8.1.4 Æû À¯È¿¼º °Ë»ç, \$setPrisitine, ±×¸®°í \$setUntouched 188
8.2 Å×½ºÆ® 188
8.3 ¸ð¹ü »ç·Ê 192
8.4 ¿ä¾à 192
APPENDIX A Ä«¸£¸¶ ¼³Ä¡Çϱâ 193
APPENDIX B Node.js ¼¹ö ¼³Á¤Çϱâ 212
APPENDIX C Firebase ¼¹ö ¼³Á¤Çϱâ 219
APPENDIX D ¾ÈÁ©·Î ¾Û ½ÇÇàÇϱâ 222
CHAPTER 1 ¾È³çÇϼ¼¿ä, AngularJS 3
1.1 AngularJSÀÇ ÀåÁ¡ 4
1.2 AngularJSÀÇ Å« ±×¸² »ìÆ캸±â 7
1.3 ù ¹ø° AngularJS ¾ÖÇø®ÄÉÀÌ¼Ç 8
1.3.1 ¸ðµâ 12
1.3.2 ºä¿Í ÄÁÆ®·Ñ·¯ 13
1.3.3 ¼ºñ½º 18
1.3.4 µð·ºÆ¼ºê 21
1.4 ¿ä¾à 23
CHAPTER 2 AngularJS ¾ÖÇø®ÄÉÀÌ¼Ç ±¸¼ºÇϱâ 25
2.1 ¾ÈÁ©·Î »ìÆ캸±â 25
2.2 AngularJS ¾ÖÇø®ÄÉÀÌ¼Ç ±¸Á¶ 29
2.3 ¾ÈÁ©·ÎÀÇ ±â¹Ý »ìÆ캸±â 31
2.4 ¶ó¿ìÆ®ÀÇ ±¸¼º ¹× Ž»ö 33
2.5 ¸î °¡Áö ¸ð¹ü »ç·Ê 37
2.6 ¿ä¾à 39
PART II AngularJS Á¦´ë·Î È°¿ëÇϱâ 41
CHAPTER 3 ºä¿Í ÄÁÆ®·Ñ·¯ 43
3.1 Å« ±×¸² 44
3.2 AngularJS¿¡¼ÀÇ ºäÀÇ Á¤ÀÇ 46
3.3 AngularJS¿¡¼ÀÇ ÄÁÆ®·Ñ·¯ÀÇ Á¤ÀÇ 48
3.3.1 ´ÙÀÌÁ¦½ºÆ® ÁÖ±â 48
3.3.2 controller-as ¹®¹ý 50
3.3.3 AngularJSÀÇ À̺¥Æ® 51
3.4 ¼Ó¼º°ú Ç¥Çö½Ä 52
3.4.1 ngRepeat¸¦ ÀÌ¿ëÇؼ ½ºÅ丮 Ç¥½ÃÇϱâ 52
3.4.2 ÇÊÅÍ 56
3.4.3 Ç¥Çö½Ä 58
3.5 ¸ð¹ü »ç·Ê ¹× Å×½ºÆ® 65
3.6 ¿ä¾à 68
CHAPTER 4 ¸ðµ¨°ú ¼ºñ½º 69
4.1 ¸ðµ¨ ¹× ¼ºñ½ºÀÇ °³³ä 70
4.1.1 ¼ºñ½º ÀÌÇØÇϱâ 71
4.1.2 ¼ºñ½ºÀÇ »ý¸íÁÖ±â 72
4.1.3 ¼ºñ½ºÀÇ Á¾·ù 73
4.2 \$http¸¦ ÀÌ¿ëÇÑ ¸ðµ¨ 76
4.2.1 \$http ¼ºñ½º¶õ? 77
4.2.2 ù ¸ðµ¨ ±¸ÇöÇϱâ 77
4.2.3 \$http ¼ºñ½ºÀÇ ÆíÀÇ ¸Þ¼µåµé 79
4.3 ÇÁ¶ó¹Ì½º 82
4.3.1 ÇÁ·Î¹Ì½º¶õ ¹«¾ùÀϱî? 82
4.3.2 ÇÁ·Î¹Ì½º È°¿ëÇϱâ 82
4.3.3 \$http.success¿Í \$http.error ¸Þ¼µå 85
4.3.4 ÇÁ·Î¹Ì½º¸¦ ÀÌ¿ëÇØ Äڵ带 ¼øÂ÷ÀûÀ¸·Î ½ÇÇàÇϱâ 86
4.4 \$http ÀÎÅͼÁÅÍ 87
4.4.1 ÀÎÅͼÁÅÍ°¡ ÇÊ¿äÇÑ ÀÌÀ¯ 87
4.4.2 ÀÎÅͼÁÅÍÀÇ È°¿ë 87
4.5 ¼ºñ½º µ¥ÄÚ·¹ÀÌÅÍ 89
4.5.1 ¿Ö µ¥ÄÚ·¹ÀÌÅÍ°¡ ÇÊ¿äÇÒ±î? 89
4.5.2 ·Î±× °³¼±Çϱâ 89
4.6 Å×½ºÆ®¿¡ ´ëÇÑ °í·Á 91
4.6.1 ¼ºñ½º Å×½ºÆ®Çϱâ 91
4.6.2 \$httpBackend ¼ºñ½º¸¦ ÀÌ¿ëÇؼ ¿ø°Ý ¼¹ö¸¦ ¸ðÀÇ È£ÃâÇϱâ 93
4.6.3 ¸ð¹ü »ç·Ê 95
4.7 ¿ä¾à 96
CHAPTER 5 µð·ºÆ¼ºê 97
5.1 µð·ºÆ¼ºê ¼Ò°³ 97
5.1.1 µð·ºÆ¼ºê¶õ ¹«¾ùÀΰ¡? 97
5.1.2 µð·ºÆ¼ºê°¡ ÇÊ¿äÇÑ ÀÌÀ¯ 98
5.1.3 ¿Ö ¿ì¸®´Â µð·ºÆ¼ºê¸¦ ¿øÇϴ°¡? 98
5.2 µð·ºÆ¼ºê ±âÃÊ ´ÙÁö±â 99
5.2.1 »ç¿ëÀÚ ½ºÅ丮 µð·ºÆ¼ºê 99
5.3 °í±Þ ±â´Éµé 107
5.3.1 µå·¡±× ¾Ø µå·Ó ±â´É 107
5.3.2 drag-container µð·ºÆ¼ºê Àû¿ëÇϱâ 110
5.3.3 ÄÁÆ®·Ñ·¯ ±¸ÇöÇϱâ 110
5.3.4 drop-container µð·ºÆ¼ºê ±¸ÇöÇϱâ 112
5.3.5 drop-container µð·ºÆ¼ºê È°¿ëÇϱâ 115
5.3.6 ÄÁÆ®·Ñ·¯ ±¸ÇöÇϱâ 115
5.3.7 drop-target µð·ºÆ¼ºê ±¸ÇöÇϱâ 123
5.3.8 drop-target µð·ºÆ¼ºêÀÇ È°¿ë 125
5.3.9 ÄÁÆ®·Ñ·¯ ±¸ÇöÇϱâ 126
5.3.10 \$dragging ¼ºñ½º ±¸ÇöÇϱâ 127
5.3.11 StoryboardCtrl ÄÁÆ®·Ñ·¯ ¼öÁ¤Çϱâ 128
5.4 ¼µåÆÄƼ ¶óÀ̺귯¸® ´Ù½Ã È°¿ëÇϱâ 130
5.4.1 Flot ¼³Ä¡Çϱâ 131
5.4.2 µð·ºÆ¼ºê ±¸ÇöÇϱâ 132
5.4.3 µð·ºÆ¼ºê È°¿ëÇϱâ 132
5.4.4 µ¥ÀÌÅÍ Ã³¸®Çϱâ 133
5.4.5 ÀÌÁ¦´Â ¡®°Ý¸®µÈ ½ºÄÚÇÁ¡¯¿¡ ´ëÇØ »ìÆ캼 ½Ã°£ 134
5.4.6 ÃÖÁ¾ ¸¶¹«¸®: Flot ÅëÇÕÇϱâ 137
5.5 µð·ºÆ¼ºê Å×½ºÆ®Çϱâ 138
5.6 ¸ð¹ü »ç·Ê 141
5.7 ¿ä¾à 141
CHAPTER 6 ¾Ö´Ï¸ÞÀÌ¼Ç 143
6.1 ¾Ö´Ï¸ÞÀÌ¼Ç ¼Ò°³ 143
6.1.1 AngularJS°¡ ¾Ö´Ï¸ÞÀ̼ÇÀ» ó¸®ÇÏ´Â ¹æ½Ä 144
6.1.2 ¾Ö´Ï¸ÞÀ̼ÇÀÇ À̸§ ±ÔÄ¢ 145
6.1.3 ¾Ö´Ï¸ÞÀÌ¼Ç È°¼ºÈÇϱâ 145
6.2 CSS Æ®·£Áö¼Ç 146
6.2.1 ±âº» Æ®·£Áö¼Ç ±¸ÇöÇϱâ 147
6.2.2 ng-enter Æ®·£Áö¼Ç Á¤ÀÇÇϱâ 147
6.2.3 ng-leave Æ®·£Áö¼Ç Á¤ÀÇÇϱâ 147
6.2.4 À̵¿ ¾Ö´Ï¸ÞÀÌ¼Ç ±¸ÇöÇϱâ 148
6.3 CSS ¾Ö´Ï¸ÞÀÌ¼Ç 150
6.3.1 ±âº» ¾Ö´Ï¸ÞÀÌ¼Ç Å¬·¡½º Á¤ÀÇÇϱâ 150
6.3.2 ¾Ö´Ï¸ÞÀÌ¼Ç Å°ÇÁ·¹ÀÓ Á¤ÀÇÇϱâ 151
6.3.3 ¿ä¼Ò¿¡ À̵¿ ¾Ö´Ï¸ÞÀÌ¼Ç Àû¿ëÇϱâ 154
6.4 ÀÚ¹Ù½ºÅ©¸³Æ® ¾Ö´Ï¸ÞÀÌ¼Ç 155
6.4.1 ÀÚ¹Ù½ºÅ©¸³Æ® ¾Ö´Ï¸ÞÀÌ¼Ç Á¤ÀÇÇϱâ 156
6.4.2 ÀÚ¹Ù½ºÅ©¸³Æ® ¾Ö´Ï¸ÞÀÌ¼Ç À̺¥Æ® 156
6.4.3 ÀÚ¹Ù½ºÅ©¸³Æ® ¾Ö´Ï¸ÞÀÌ¼Ç Å¬·¡½º 157
6.4.4 TweenMax ¶óÀ̺귯¸® 158
6.4.5 ¾Ö´Ï¸ÞÀ̼ÇÀ» ½ÇÁ¦·Î Àû¿ëÇϱâ 159
6.5 Å×½ºÆ® 160
6.6 ¸ð¹ü »ç·Ê 160
6.7 ¿ä¾à 161
CHAPTER 7 ¶ó¿ìÆ®·Î À¥»çÀÌÆ® ±¸¼ºÇϱâ 163
7.1 AngularJS ¶ó¿ìÆà ±¸¼º ¿ä¼Ò 164
7.2 AngularJS¿¡¼ ¶ó¿ìÆ® »ý¼ºÇϱâ 165
7.2.1 ngRoute¿Í ngView¸¦ ÀÌ¿ëÇؼ ù ¹ø° ¶ó¿ìÆ® Á¤ÀÇÇϱâ 165
7.2.2 ngView Ãß°¡Çϱâ 165
7.2.3 \$routeProvider¸¦ ÀÌ¿ëÇؼ ¶ó¿ìÆ® ¼³Á¤Çϱâ 166
7.2.4 ¶ó¿ìÆ® Ž»ö ¼³Á¤Çϱâ 167
7.2.5 ¸®ºä 168
7.3 ¶ó¿ìÆ®¿¡ ¸Å°³º¯¼ö »ç¿ëÇϱâ 168
7.3.1 ¸®ºä 171
7.4 ¶ó¿ìÆ®¿¡¼ ÀÇÁ¸¼º Çؼ®Çϱâ 171
7.4.1 ¸®ºä 173
7.5 ¶ó¿ìÆ® À̺¥Æ® 173
7.5.1 ¸®ºä 174
7.6 Å×½ºÆ® 174
7.7 ¸ð¹ü »ç·Ê 176
7.8 ¿ä¾à 176
CHAPTER 8 Æû°ú À¯È¿¼º °Ë»ç 179
8.1 AngularJSÀÇ Æû À¯È¿¼º °Ë»ç 180
8.1.1 HTML Æû ¿ä¼Ò È®ÀåÇϱâ 180
8.1.2 À¯È¿¼º °Ë»ç Ãß°¡Çϱâ 182
8.1.3 À¯È¿¼º °Ë»ç¿Í CSS 187
8.1.4 Æû À¯È¿¼º °Ë»ç, \$setPrisitine, ±×¸®°í \$setUntouched 188
8.2 Å×½ºÆ® 188
8.3 ¸ð¹ü »ç·Ê 192
8.4 ¿ä¾à 192
APPENDIX A Ä«¸£¸¶ ¼³Ä¡Çϱâ 193
APPENDIX B Node.js ¼¹ö ¼³Á¤Çϱâ 212
APPENDIX C Firebase ¼¹ö ¼³Á¤Çϱâ 219
APPENDIX D ¾ÈÁ©·Î ¾Û ½ÇÇàÇϱâ 222
Ã¥ ¼Ò°³
´Ü°èº°·Î ¹è¿ì´Â ´ëÈÇü À¥ ¾ÖÇø®ÄÉÀ̼Ç!
¡¶AngularJS ÀÎ ¾×¼Ç¡·Àº AngularJS¸¦ óÀ½ ¹è¿ì´Â »ç¶÷¿¡°Ô ÀûÇÕÇÑ Ã¥ÀÌ´Ù. ´ëÈÇü ´ÜÀÏ ÆäÀÌÁö À¥ ÀÎÅÍÆäÀ̽º¸¦ °³¹ßÇÏ´Â ¹æ¹ý, MVVM°ú °°Àº ÃֽŠÆÐÅÏÀ» Àû¿ëÇÏ°í ¹é¿£µå ¼¹ö¿ÍÀÇ »óÈ£ÀÛ¿ë°ú °°Àº ´Ù¾çÇÑ ÀÛ¾÷ ¹æ¹ýÀ» ¹è¿ï ¼ö ÀÖ´Ù. ¶ÇÇÑ, ¸ðµç ¿¹Á¦¿¡ °üÇØ ÃæºÐÇÑ Çؼ³°ú ±×¸²À» Á¦°øÇÏ°í ÀÖÀ¸¸ç, ¿¹Á¦ Äڵ忡µµ »ó¼¼ÇÑ Çؼ³ÀÌ °çµé¿©Á® ÀÖ´Ù.
ÃâÆÇ»ç ¼Æò
´Ü°èº°·Î ¹è¿ì´Â ´ëÈÇü À¥ ¾ÖÇø®ÄÉÀ̼Ç!
AngularJS´Â ÀÚ¹Ù½ºÅ©¸³Æ® ±â¹ÝÀÇ ÇÁ·¹ÀÓ¿öÅ©·Î¼ µ¿ÀûÀÎ ´ëÈÇü À¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» Ç¥ÁØ Á¤Àû ÆäÀÌÁö¿Í °°Àº ¹æ½ÄÀ¸·Î °³¹ßÇÒ ¼ö ÀÖ´Ù. AngularJS´Â ±âº»ÀûÀÎ ¾ÖÇø®ÄÉÀ̼ÇÀ» ±¸ÇöÇÏ´Â µ¥ ÇÊ¿äÇÑ ±â´É ´ëºÎºÐÀ» ³»ÀåÇÏ°í ÀÖÁö¸¸, »ç¿ëÀÚ°¡ ÀÌ·± ±â´ÉµéÀ» ´õ¿í È®ÀåÇÒ ¼öµµ ÀÖ´Ù. Á÷°üÀûÀÌ¸é¼ º¯°æ°ú Å×½ºÆ®µµ ½¬¿î AngularJS¸¦ ÀÌ¿ëÇϸé ÇÑÃþ Ç°Áú ³ôÀº ¾ÖÇø®ÄÉÀ̼ÇÀ» °³¹ßÇÒ ¼ö ÀÖÀ» °ÍÀÌ´Ù.
¡¶AngularJS ÀÎ ¾×¼Ç¡·Àº AngularJS¸¦ óÀ½ ¹è¿ì´Â »ç¶÷¿¡°Ô ÀûÇÕÇÑ Ã¥ÀÌ´Ù. ´ëÈÇü ´ÜÀÏ ÆäÀÌÁö À¥ ÀÎÅÍÆäÀ̽º¸¦ °³¹ßÇÏ´Â ¹æ¹ý, MVVM°ú °°Àº ÃֽŠÆÐÅÏÀ» Àû¿ëÇÏ°í ¹é¿£µå ¼¹ö¿ÍÀÇ »óÈ£ÀÛ¿ë°ú °°Àº ´Ù¾çÇÑ ÀÛ¾÷ ¹æ¹ýÀ» ¹è¿ï ¼ö ÀÖ´Ù. ¶ÇÇÑ, ¸ðµç ¿¹Á¦¿¡ °üÇØ ÃæºÐÇÑ Çؼ³°ú ±×¸²À» Á¦°øÇÏ°í ÀÖÀ¸¸ç, ¿¹Á¦ Äڵ忡µµ »ó¼¼ÇÑ Çؼ³ÀÌ °çµé¿©Á® ÀÖ´Ù.
ÀÌ Ã¥ÀÇ ÁÖ¿ä ³»¿ë°ú Ư¡Àº ´ÙÀ½°ú °°´Ù.
¡á AngularJS·Î ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ßÀ» ½ÃÀÛÇÏ´Â ¹æ¹ý
¡á ÀڽŸ¸ÀÇ ÄÄÆ÷³ÍÆ®¸¦ ÀÛ¼ºÇÏ´Â ¹æ¹ý
¡á ¾ÖÇø®ÄÉÀÌ¼Ç ¾ÆÅ°ÅØó¿¡ ´ëÇÑ ¸ð¹ü »ç·Ê
¡á ¿¹Á¦ ¾ÖÇø®ÄÉÀ̼ÇÀ» ´Ü°èº°·Î ¿Ï¼ºÇÏ´Â °úÁ¤¿¡ °üÇÑ ÀÚ¼¼ÇÑ Çؼ³
¡á ÃֽŠ¹öÀüÀÇ AngularJS·Î ¿¹Á¦ ¾ÖÇø®ÄÉÀ̼ÇÀÇ Áö¼ÓÀûÀÎ ¾÷µ¥ÀÌÆ® ¿¹Á¤