{"id":855,"date":"2015-05-20T09:00:05","date_gmt":"2015-05-20T18:00:05","guid":{"rendered":"http:\/\/blog.box.kr\/?p=855"},"modified":"2015-05-20T09:00:05","modified_gmt":"2015-05-20T18:00:05","slug":"scrapangularjs-angularjs-%ec%99%80-requirejs-%eb%a5%bc-%ed%99%9c%ec%9a%a9%ed%95%9c-%eb%8c%80%ea%b7%9c%eb%aa%a8-%ec%9b%b9-%ec%96%b4%ed%94%8c%eb%a6%ac%ec%bc%80%ec%9d%b4%ec%85%98-%ea%b0%9c%eb%b0%9c","status":"publish","type":"post","link":"https:\/\/blog.box.kr\/?p=855","title":{"rendered":"[scrap][AngularJS] AngularJS \uc640 RequireJS \ub97c \ud65c\uc6a9\ud55c \ub300\uaddc\ubaa8 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c"},"content":{"rendered":"<p><a href=\"http:\/\/programmingsummaries.tistory.com\/m\/post\/229\">http:\/\/programmingsummaries.tistory.com\/m\/post\/229<\/a><\/p>\n<p>&nbsp;<\/p>\n<div>\n<p><b>AngularJS \uae30\ubc18 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158, \uc5b4\ub514\uc11c\ubd80\ud130 \uc2dc\uc791\ud574\uc57c \ud560\uae4c?<\/b><\/p>\n<\/div>\n<div>\n<p>AngularJS\ub97c \uae30\ubc18\uc73c\ub85c \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \ub54c, AngularJS \uc0ac\uc774\ud2b8\uc5d0\uc11c \uc81c\uacf5\ud574\uc8fc\ub294 \ubb38\uc11c\ub4e4\uc740 \ud2b9\uc815 API \ud65c\uc6a9 \ubc29\ubc95\uc744 \uc774\ud574\ud558\uac70\ub098 \ub2e8\uc21c\ud55c \uc218\uc900\uc73c\ub85c \uc2dc\uc791\ud558\uae30\uc5d0\ub294 \uc801\ud569\ud558\uc9c0\ub9cc \uc5b4\ub5bb\uac8c \uc218\ubc31\uc5d0\uc11c \uc218\ucc9c\uc904\uc5d0 \uc774\ub974\ub294 \ucf54\ub4dc\ub85c \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\uc131\ud558\uace0 \ubc1c\uc804\uc2dc\ucf1c\uc57c\ud558\ub294\uc9c0\uc5d0 \ub300\ud574\uc11c\ub294 \uba85\ud655\ud55c \uac00\uc774\ub4dc\ub77c\uc778\uc744 \uc81c\uacf5\ud574\uc8fc\uace0 \uc788\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. AngularJS\ub97c \uae30\ubc18\uc73c\ub85c \uc218\ucc28\ub840\uc758 \ud06c\uace0 \uc791\uc740 \uac1c\ubc1c\uc744 \uc9c4\ud589\ud558\uba70 \uc5bb\uc740 \uacbd\ud5d8 \uc9c0\uc2dd\uacfc, \uc774\ub97c \uae30\ubc18\uc73c\ub85c \ub300\uaddc\ubaa8 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc774 \uac00\ub2a5\ud55c UI \ud504\ub808\uc784\uc6cc\ud06c\ub97c \ub9cc\ub4dc\ub294 \uacfc\uc815\uc5d0\uc11c \uace0\ubbfc\ud558\uace0 \uc5f0\uad6c\ud55c \uacb0\uacfc\ubb3c\uc744 \uc815\ub9ac\ud574 \ubcf4\uc558\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\uc774 \uae00\uc740 \ub300\uaddc\ubaa8 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0 \uc788\uc5b4 \uc815\ub2f5\uc744 \uc81c\uc2dc\ud558\ub294 \uae00\uc774 \uc544\ub2c8\uba70, \ub300\uaddc\ubaa8 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uace0\ub824\ud55c UI \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uac1c\ubc1c\ud558\ub294 \uacfc\uc815\uc5d0\uc11c \ub098\uc628 \uc0b0\ucd9c\ubb3c\ub4e4 \uc911 \uc77c\ubd80\ub97c \uc124\uba85\uacfc \uacc1\ub4e4\uc5ec \uacf5\uac1c\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \ub530\ub77c\uc11c \ub300\uaddc\ubaa8 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc744 \uc704\ud55c \uc778\uc0ac\uc774\ud2b8\ub97c \uc5bb\ub294 \ubc29\ud5a5\uc73c\ub85c \uc811\uadfc\ud558\uc2dc\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\uba3c\uc800\ub294 \ud30c\uc77c\uacfc \ub514\ub809\ud1a0\ub9ac \uad6c\uc870\ub97c \uc5b4\ub5bb\uac8c \uad6c\uc131\ud574\uc57c \ud558\ub294\uc9c0\uc5d0\uc11c\ubd80\ud130, \uc8fc\uc694 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud30c\uc77c\uc774 \uc5b4\ub5bb\uac8c \uad6c\ub3d9\ub418\ub294\uc9c0 \ud558\ub098\ud558\ub098 \uc0b4\ud3b4\ubcf4\uac8c \ub420 \uac83\uc785\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<p><b>\ud30c\uc77c \ubc0f \ub514\ub809\ud1a0\ub9ac \uad6c\uc131<\/b><\/p>\n<\/div>\n<div>\n<p>Brain Ford\ub294 \u201c<a title=\"[http:\/\/briantford.com\/blog\/huuuuuge-angular-apps.html]\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.\" href=\"http:\/\/briantford.com\/blog\/huuuuuge-angular-apps.html\" target=\"_blank\">Building Huuuuuge Apps with AngularJS<\/a>\u201d \ub77c\ub294 \ud3ec\uc2a4\ud305\uc5d0\uc11c \ub300\uaddc\ubaa8 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \ub54c \uc911\uc694\ud55c \uac83\uc740 \uc791\uace0 \uc9d1\uc911\ub418\uace0 \ubaa8\ub4c8\ud654\ub41c \ubd80\ubd84\uc73c\ub85c \uac1c\ubc1c\ud574\uc11c \uc810\uc9c4\uc801\uc73c\ub85c \ud655\uc7a5\uc2dc\ucf1c\ub098\uac00\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2e4\uace0 \uc870\uc5b8\ud588\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc774\ub807\uac8c \ub300\uaddc\ubaa8 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc5b4\ub5a0\ud55c \ubd84\ub958\ub85c \ub098\ub204\uace0 \ub610 \uc5b4\ub5a4 \uad6c\uc870\ub85c \uad6c\uc131\ud574\uc57c\ud558\ub294\uc9c0\uc5d0 \ub300\ud55c \uace0\ubbfc\uc774 \ub610\ub2e4\uc2dc \uc0dd\uae30\uac8c \ub429\ub2c8\ub2e4.\n<\/div>\n<div>\n<\/div>\n<div>\n<p>\ub098\ub204\uc5b4\uc9c4 \ubd80\ubd84\ub4e4\uc740 \ud544\uc5f0\uc801\uc73c\ub85c \ud30c\uc77c\uacfc \ub514\ub809\ud1a0\ub9ac\ub85c \ubd84\ub958\ub418\uac8c \ub418\ub294\ub370, angular seed project \ub4f1\uc5d0\uc11c\ub3c4 \uad8c\uc7a5\ud558\ub294 \ub514\ub809\ud1a0\ub9ac \uad6c\uc870\uac00 \uc788\uace0, \ub610 \uc6f9 \uc0c1\uc5d0\uc11c \uac80\uc0c9\ud574\ubcf4\uba74 \ub2e4\uc591\ud55c \uad6c\uc870\ub85c \ud30c\uc77c\uacfc \ub514\ub809\ud1a0\ub9ac\ub97c \ub098\ub204\ub294 \ubc29\ubc95\uc744 \ucc3e\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\uc5ec\uae30\uc5d0\uc11c\ub294 \ud604\uc7ac\uae4c\uc9c0 \uc5ec\ub7ec \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \ub204\uc801\ub41c \uacbd\ud5d8\uc744 \ubc14\ud0d5\uc73c\ub85c, \ubaa8\ub4c8\ud654\ub41c AngularJS \ud504\ub85c\uc81d\ud2b8\uc5d0 \uac00\uc7a5 \uc801\ud569\ud55c \ud30c\uc77c\uacfc \ub514\ub809\ud1a0\ub9ac \uad6c\uc870\ub97c \uc18c\uac1c\ud558\uace0\uc790 \ud569\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<p><span class=\"imageblock center\"><a href=\"http:\/\/programmingsummaries.tistory.com\/m\/post\/229\/slideshow?order=1\"><img decoding=\"async\" class=\"item_image able_slideshow\" src=\"http:\/\/i1.daumcdn.net\/thumb\/R750x0\/?fname=http%3A%2F%2Fcfile1.uf.tistory.com%2Fimage%2F020E374B51ACB63803210F\" alt=\"\uc774\ubbf8\uc9c0\" \/><\/a><\/span><\/p>\n<\/div>\n<div>\n<ul>\n<li>\uba3c\uc800 css\uc640 img\uc5d0\ub294 \uac01\uac01 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uacf5\ud1b5\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294 \uc2a4\ud0c0\uc77c\uc2dc\ud2b8\uc640 \uc774\ubbf8\uc9c0 \ub370\uc774\ud130\uac00 \ub4e4\uc5b4\uac00\uac8c \ub429\ub2c8\ub2e4.<\/li>\n<\/ul>\n<\/div>\n<div>\n<ul>\n<li>lib \ud3f4\ub354\uc5d0\ub294 angular, jquery \ub4f1 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub4e4\uc774 \uc704\uce58\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n<\/div>\n<div>\n<ul>\n<li>partials \ud3f4\ub354\uc5d0\ub294 ng-view\uc5d0 \ubfcc\ub824\uc904 html template \ud30c\uc77c\ub4e4\uc774 \uc704\uce58\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n<\/div>\n<div>\n<ul>\n<li>js \ud3f4\ub354\uc5d0\ub294 \ubaa8\ub4c8\ud654\ub41c \uc2a4\ud06c\ub9bd\ud2b8 \ud30c\uc77c\ub4e4\uc774 \uc704\uce58\ud558\uac8c \ub429\ub2c8\ub2e4.<\/li>\n<\/ul>\n<\/div>\n<div>\n<p>js \ud3f4\ub354\uc640 partials \ud3f4\ub354 \uc548\uc758 \uac01 \ud30c\uc77c\ub4e4\uc740 \ubc18\ub4dc\uc2dc \ud55c \uac00\uc9c0\uc758 \ub0b4\uc6a9\ub9cc \ub2f4\uace0 \uc788\ub294 \uac83\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud30c\uc77c \ud558\ub098\uc5d0\ub294 \uc624\uc9c1 \ud558\ub098\uc758 \ucee8\ud2b8\ub864\ub7ec \ud639\uc740 \uc624\uc9c1 \ud558\ub098\uc758 \ub2e4\uc774\ub809\ud2f0\ube0c\ub9cc \ub2f4\uaca8\uc788\uc5b4\uc57c \ud55c\ub2e4\ub294 \uac83\uc785\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8\uc758 \uaddc\ubaa8\uac00 \ucee4\uc838\uc11c \ud30c\uc77c\uc774 \ub9ce\uc544\uc9c8\uc218\ub85d, \ub354 \ub9ce\uc740 \uc11c\ube0c \ub514\ub809\ud1a0\ub9ac\ub97c \ub450\uc5b4\uc11c \uad6c\uc870\ub97c \ub354\uc6b1 \uccb4\uacc4\ud654\ud558\uc5ec \uad00\ub9ac\ud560 \ud544\uc694\uac00 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\uc774\ub7ec\ud55c \ud30c\uc77c\uacfc \ub514\ub809\ud1a0\ub9ac \uad6c\uc870\ub294 \uc55e\uc11c \uc774\uc57c\uae30\ud55c \uc791\uace0 \uc9d1\uc911\ub418\uace0 \ubaa8\ub4c8\ud654\ub41c \ubd80\ubd84\uc73c\ub85c \uac1c\ubc1c\ud558\ub824\ub294 \ubc29\ud5a5\uc131\uc744 \uace0\ubbfc\ud558\uc5ec \uc124\uacc4\ub41c \uac83\uc785\ub2c8\ub2e4. \uc774\ub807\uac8c \ubaa8\ub4c8\ud654\ub41c \uad6c\uc870\ub97c \ud1b5\ud574 \ud544\uc694\ud55c \ubd80\ubd84\ub9cc \uc120\ubcc4\uc801\uc73c\ub85c \ub85c\ub529\ud560 \uc218 \uc788\uac8c\ub418\uace0 \ucd08\uae30 \ub85c\ub529 \uc18d\ub3c4\uc5d0 \ud06c\uac8c \uc601\ud5a5\uc744 \ubc1b\ub294 UX \uac1c\uc120\uc5d0 \ub3c4\uc6c0\uc744 \uc5bb\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubaa8\ub4c8\ud654\uc640 \ub3d9\uc801 \ub85c\ub529\uc740 requireJS\ub97c \uae30\ubc18\uc73c\ub85c \uad6c\ud604\ub418\uc5c8\uc73c\uba70, \uc774\uc5d0 \uad00\ub828\ud574\uc11c\ub294 <a title=\"[http:\/\/programmingsummaries.tistory.com\/204]\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.\" href=\"http:\/\/programmingsummaries.tistory.com\/204\" target=\"_blank\">\uc774 \uae00<\/a>\uc5d0 \uc790\uc138\ud788 \uc124\uba85\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.\n<\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<p><b>\uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158 \uad6c\uc870<\/b>\n<\/div>\n<div>\n<\/div>\n<div>\n<p><span class=\"imageblock center\"><a href=\"http:\/\/programmingsummaries.tistory.com\/m\/post\/229\/slideshow?order=2\"><img decoding=\"async\" class=\"item_image able_slideshow\" src=\"http:\/\/i1.daumcdn.net\/thumb\/R750x0\/?fname=http%3A%2F%2Fcfile24.uf.tistory.com%2Fimage%2F257FD34B51ACB63E418E9E\" alt=\"\uc774\ubbf8\uc9c0\" \/><\/a><\/span>\n<\/div>\n<div>\n<p>\uc804\uccb4\uc801\uc778 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158 \uad6c\uc870\ub294 \uc704\uc640 \uac19\uc2b5\ub2c8\ub2e4. document \uc804\uccb4\uc5d0 \ub300\ud574 myApp \uc774\ub77c\ub294 \ubaa8\ub4c8\uc774 \ubd80\ud2b8\uc2a4\ud2b8\ub798\ud551\ub418\uace0, html \ud0dc\uadf8\uc5d0 CommonController \ub77c\ub294 \ucee8\ud2b8\ub864\ub7ec\uac00 \uc790\ub9ac\ud569\ub2c8\ub2e4. CommonController\uc5d0\ub294 \uc804\uccb4 \uba54\ub274\uc640 \uac19\uc774 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158 \uc804\ubc18\uc5d0\uc11c \uacf5\ud1b5\uc801\uc73c\ub85c \ubc18\ubcf5\ud574\uc11c \uc0ac\uc6a9\ub418\ub294 \ubd80\ubd84\uc5d0 \ub300\ud55c \ucee8\ud2b8\ub864\uc744 \ub2f4\ub2f9\ud558\uac8c \ub429\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>ng-view directive\uac00 \uc788\ub294 \ubd80\ubd84\uc774 \ub3d9\uc801\uc73c\ub85c \ub85c\ub529\ub418\ub294 \ubd80\ubd84\uc73c\ub85c, partials \ud3f4\ub354 \uc544\ub798\uc5d0 \uc788\ub294 partial view \ud15c\ud50c\ub9bf\ub4e4\uc744 \uac00\uc838\uc640\uc11c \ubfcc\ub824\uc8fc\uac8c \ub429\ub2c8\ub2e4. \uc774\ub807\uac8c \ub85c\ub529\ub418\ub294 view \ub9c8\ub2e4 \uac01 view\uc5d0 \ud574\ub2f9\ud558\ub294 \ucee8\ud2b8\ub864\ub7ec \uc5ed\uc2dc \ub3d9\uc801\uc73c\ub85c \ub85c\ub529\ub418\uc5b4 \ud560\ub2f9\ub429\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\uc774\ub7ec\ud55c \uad6c\uc870\uc5d0 \ub300\ud55c \uc774\ud574\ub97c \ubc14\ud0d5\uc73c\ub85c, \uc2e4\uc81c \uc5b4\ub5a4 \ud750\ub984\uc73c\ub85c \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \uad6c\ub3d9\ub418\uba70 \ubaa8\ub4c8\ub4e4\uc774 \uad00\ub9ac\ub418\ub294\uc9c0\ub97c \uc774\uc5b4\uc11c \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<p><b>\uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158 \ud750\ub984<\/b>\n<\/div>\n<div>\n<\/div>\n<div>\n<p><span class=\"imageblock center\"><a href=\"http:\/\/programmingsummaries.tistory.com\/m\/post\/229\/slideshow?order=3\"><img decoding=\"async\" class=\"item_image able_slideshow\" src=\"http:\/\/i1.daumcdn.net\/thumb\/R750x0\/?fname=http%3A%2F%2Fcfile21.uf.tistory.com%2Fimage%2F0223954B51ACB63A330988\" alt=\"\uc774\ubbf8\uc9c0\" \/><\/a><\/span>\n<\/div>\n<div>\n<p>\uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc804\uccb4\uc801\uc778 \ud070 \uadf8\ub9bc\uc740 \uc704\uc640 \uac19\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p><b>index.html \ud30c\uc77c<\/b>\uc744 \uc5f4\uba74 \uc5ec\uae30\uc5d0 require.js \ud30c\uc77c\uc744 script \ud0dc\uadf8\ub85c \uac00\uc838\uc624\uac8c \ub429\ub2c8\ub2e4. RequireJS \ub294 \ub85c\ub4dc\ub41c \ud6c4 data-main \uc18d\uc131\uc5d0 \ub530\ub77c \uac00\uc7a5 \uba3c\uc800 main.js \ud30c\uc77c\uc744 \ub3d9\uc801\uc73c\ub85c \ubd88\ub7ec\uc640\uc11c \uc2e4\ud589\ud558\uac8c \ub429\ub2c8\ub2e4.\n<\/div>\n<div>\n<\/div>\n<div>\n<p><b>main.js \ud30c\uc77c<\/b>\uc740 RequireJS \ubaa8\ub4c8 \ud615\ud0dc\ub85c \uc120\uc5b8\ub418\uc5b4 \uc788\ub294\ub370, \ub514\ud39c\ub358\uc2dc \uc120\uc5b8\ubd80 \ubc0f \ub514\ud39c\ub358\uc2dc \ub85c\ub4dc \ub4a4 \uc2e4\ud589\ubd80\ub85c \ub098\ub258\uc5b4\uc838 \uc788\uc2b5\ub2c8\ub2e4. \uc2e4\ud589\ubd80\uc5d0\ub294 myApp Angular \ubaa8\ub4c8\uc744 \ubd80\ud2b8\uc2a4\ud2b8\ub798\ud551\ud558\ub3c4\ub85d \ub418\uc5b4 \uc788\uc9c0\ub9cc, \uadf8 \uc804\uc5d0 \ub514\ud39c\ub358\uc2dc\ub4e4\uc774 \uba3c\uc800 \ub85c\ub4dc \ub418\uc5b4\uc57c \ud558\ubbc0\ub85c, angularJS, jQuery \ub4f1\uc758 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc640 app.js, route-config.js, routes.js \ud30c\uc77c\uc774 \ub85c\ub4dc\ub41c \ub4a4\uc5d0\uc57c \ubd80\ud2b8\uc2a4\ud2b8\ub798\ud551\uc774 \uc9c4\ud589\ub418\uac8c \ub429\ub2c8\ub2e4.\n<\/div>\n<div>\n<\/div>\n<div>\n<p><b>app.js \ud30c\uc77c<\/b> \uc5ed\uc2dc RequireJS \ubaa8\ub4c8 \ud615\ud0dc\ub85c \uc120\uc5b8\ub418\uc5b4 \uc788\ub294\ub370, \uc2e4\ud589\ubd80\uc5d0\ub294 myApp \ubaa8\ub4c8 \ubc0f CommonController\ub97c \uc120\uc5b8\ud558\ub294 \ub0b4\uc6a9\uc73c\ub85c \ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \ub0b4\uc6a9 \uc5ed\uc2dc \ubc14\ub85c \uc2e4\ud589\ub418\uc9c0 \uc54a\uace0 \uadf8 \uc804\uc5d0 \ub514\ud39c\ub358\uc2dc\uac00 \ub85c\ub4dc\ub41c \ub4a4 \uc2e4\ud589\ub418\uac8c \ub429\ub2c8\ub2e4. \ub530\ub77c\uc11c \ub514\ud39c\ub358\uc2dc\uc778 route-config.js \ud30c\uc77c\uc758 \ub85c\ub4dc\ub97c \uba3c\uc800 \ucc98\ub9ac\ud569\ub2c8\ub2e4.\n<\/div>\n<div>\n<\/div>\n<div>\n<p><b>route-config.js \ud30c\uc77c<\/b> \uc5ed\uc2dc RequireJS \ubaa8\ub4c8 \ud615\ud0dc\ub85c \ub3d9\uc801\uc73c\ub85c \uc11c\ube44\uc2a4, \ub2e4\uc774\ub809\ud2f0\ube0c, \ud544\ud130 \ub4f1\uc744 \ub85c\ub4dc\ud560 \ub54c \ud544\uc694\ud55c \uc2a4\ud06c\ub9bd\ud2b8\ub4e4\uc774 \ub514\ud39c\ub358\uc2dc\ub85c \ub4f1\ub85d\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \ub514\ud39c\ub358\uc2dc\ub4e4\uc774 \ub85c\ub4dc\ub418\uba74, AngularJS\uc5d0\uc11c \uacbd\ub85c(route) \uc124\uc815 \uc2dc \uc0ac\uc6a9\ud560 config \ud568\uc218\ub97c \uc120\uc5b8\ud569\ub2c8\ub2e4.\n<\/div>\n<div>\n<\/div>\n<div>\n<p>route-config.js \ud30c\uc77c\uc758 \ucc98\ub9ac\uac00 \ub05d\ub098\uba74 \ub2e4\uc2dc \uc5ed\uc73c\ub85c app.js \ud30c\uc77c\uc758 \uc2e4\ud589\ubd80\uac00 \ucc98\ub9ac\ub418\uace0, \uc774\uc5b4\uc11c route-config.js \ud30c\uc77c\uacfc app.js \ud30c\uc77c\uc744 \ub514\ud39c\ub358\uc2dc\ub85c \uac16\uace0 \uc788\ub358<b> route.js \ud30c\uc77c<\/b>\uc758 \uc2e4\ud589\ubd80\uac00 \ucc98\ub9ac\ub429\ub2c8\ub2e4. route.js \ud30c\uc77c\uc758 \uc2e4\ud589\ubd80\uc5d0\ub294 AngularJS\uc758 \uacbd\ub85c \uc124\uc815 \ub85c\uc9c1\uc774 \uc788\uc2b5\ub2c8\ub2e4.\n<\/div>\n<div>\n<\/div>\n<div>\n<p>\uc5ec\uae30\uae4c\uc9c0 \ubaa8\ub4e0 \ub514\ud39c\ub358\uc2dc\ub4e4\uc758 \ucc98\ub9ac\uac00 \ub05d\ub098\uace0 \ub098\uba74 \ub2e4\uc2dc main.js \ud30c\uc77c\uc758 \uc2e4\ud589\ubd80\uac00 \ucc98\ub9ac\ub418\uac8c \ub429\ub2c8\ub2e4. \uc774 \uc2dc\uc810\uc5d0\uc11c myApp \ubaa8\ub4c8\uc758 \ubd80\ud2b8\uc2a4\ud2b8\ub798\ud551\uc774 \uc791\ub3d9\ub418\uc5b4 Angular Application \uc774 \uc2e4\ud589\ub418\uac8c \ub429\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\uc774\ub54c, \uc785\ub825\ub41c route \uc5d0 \ub530\ub77c\uc11c \ud574\ub2f9 partial view template \ud30c\uc77c\uacfc controller \uac00 \ub3d9\uc801\uc73c\ub85c \ub85c\ub4dc\ub429\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<p>\ub2e4\uc2dc \uc815\ub9ac\ud558\uba74, <b>RequireJS \ub97c \ud1b5\ud574 \uc124\uc815\ub41c \ub514\ud39c\ub358\uc2dc\ub4e4\uc774 \ub85c\ub4dc\ub41c \ud6c4 \ube44\ub85c\uc18c Angular Application\uc774 \uc2dc\uc791\ub418\ub294 \ud615\ud0dc\ub85c, \ub610 \uac01 route \ub9c8\ub2e4 RequireJS\uac00 template \uacfc controller \ub4f1\uc744 \ub3d9\uc801\uc73c\ub85c \uac00\uc838\uc640\uc11c \ucd94\uac00\ud574\uc8fc\ub294 \ubc29\uc2dd\uc73c\ub85c \uad6c\ud604<\/b>\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.\n<\/div>\n<div>\n<\/div>\n<div>\n<p>\uadf8\ub7fc \uc774\uc81c, \uac01 \uc2a4\ud06c\ub9bd\ud2b8 \ud30c\uc77c \uc548\uc758 \ub85c\uc9c1\uc774 \uc2e4\uc81c\ub85c \uc5b4\ub5bb\uac8c \ub3d9\uc791\ud558\ub294\uc9c0 \uad6c\uccb4\uc801\uc73c\ub85c \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<p><b>\uc138\ubd80 \ud750\ub984 \ubd84\uc11d<\/b>\n<\/div>\n<div>\n<p>\ud750\ub984\uc758 \uc2dc\uc791\uc740 index.html \ud30c\uc77c\uc785\ub2c8\ub2e4. require.js \uc5d0 \ub300\ud55c \ud3ec\uc2a4\ud305\uc5d0\uc11c \uc774\ubbf8 \uc124\uba85\ud55c \uac83\uacfc \ud06c\uac8c \ub2e4\ub974\uc9c0 \uc54a\uc740 \uad6c\uc870\ub85c \uc124\uacc4\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<p><b>index.html<\/b><\/p>\n<pre class=\"brush:html\">&lt;!doctype html&gt;\n&lt;html lang=\"en\" ng-controller=\"CommonController\"&gt;\n&lt;head&gt;\n\t&lt;meta charset=\"utf-8\"&gt;\n\t&lt;title&gt;My AngularJS App&lt;\/title&gt;\n\t&lt;link href=\"css\/bootstrap.css\" type=\"text\/css\" rel=\"stylesheet\"\/&gt;\n\t&lt;link href=\"css\/app.css\" type=\"text\/css\" rel=\"stylesheet\"\/&gt;\n\n\t&lt;!-- HTML5 shim, for IE6-8 support of HTML5 elements --&gt;\n\t&lt;!--[if lt IE 9]&gt;\n\t\t  &lt;script src=\"http:\/\/html5shim.googlecode.com\/svn\/trunk\/html5.js\"&gt;&lt;\/script&gt;\n\t&lt;![endif]--&gt;\n\n&lt;!--\n\t\uaf2d \ud544\uc694\ud55c \ud544\uc218 CSS\ub294 \uc704\uc640 \uac19\uc774 \uace0\uc815\ud574\uc11c \ubd99\uc774\uace0,\n\t\uc77c\ubd80 \ud398\uc774\uc9c0\ub9c8\ub2e4 \ud544\uc694\ud55c CSS\uc740 \uc544\ub798\uc640 \uac19\uc774 \ucee8\ud2b8\ub864\ub7ec\uc5d0\uc11c \uc124\uc815\ud574\uc11c \ub85c\ub4dc\ud55c\ub2e4. (IE8 \uc5d0\uc11c\ub3c4 \uc815\uc0c1\ub3d9\uc791)\n\thttp:\/\/plnkr.co\/edit\/KzjIMN\n--&gt;\n\t&lt;link ng-repeat=\"stylesheet in stylesheets\" ng-href=\"{{stylesheet}}\" type=\"text\/css\" rel=\"stylesheet\" \/&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;div&gt;\n\t\t&lt;a href=\"#\/view1\" class=\"btn\"&gt;view1&lt;\/a&gt;\n\t\t&lt;a href=\"#\/view2\" class=\"btn\"&gt;view2&lt;\/a&gt;\n\t\t&lt;a href=\"#\/grid\" class=\"btn\"&gt;grid&lt;\/a&gt;\n\t\t&lt;a href=\"#\/admin\" class=\"btn\" ng-show=\"isAdmin\"&gt;admin&lt;\/a&gt;\n\t&lt;\/div&gt;\n\n\t&lt;hr&gt;\n\n\t&lt;div ng-view class=\"well well-small\"&gt;&lt;\/div&gt;\n\n\t&lt;button ng-hide=\"isAdmin\" ng-click=\"isAdmin=true;\"&gt;Become admin&lt;\/button&gt;\n\n\t&lt;!--\n\t\t\uc774 data-main \uc18d\uc131\uc5d0\uc11c requireJS\uac00 \ucc98\uc74c \ub85c\ub4dc\ud574\uc57c\ud560 JS\ub97c \uc124\uc815\ud55c\ub2e4.\n\t\t\uc544\ub798\uc640 \uac19\uc774 \uc4f0\uba74, js \ud3f4\ub354 \uc544\ub798\uc5d0 main.js \ud30c\uc77c\uc744 \uc5f4\uac8c \ub41c\ub2e4.\n\t --&gt;\n\t&lt;script data-main=\"js\/main\" src=\"lib\/require\/require.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<div>\n<p>\uae30\ubcf8\uc801\uc73c\ub85c \ubc18\ub4dc\uc2dc \ud544\uc694\ud55c \uc2a4\ud0c0\uc77c\uc2dc\ud2b8\ub294 link \ud0dc\uadf8\ub85c \uba3c\uc800 \uc785\ub825\ud558\uc9c0\ub9cc, \ud398\uc774\uc9c0\ub9c8\ub2e4 \ub3d9\uc801\uc73c\ub85c \ud544\uc694\ud55c \uc2a4\ud0c0\uc77c\uc2dc\ud2b8\ub294 \ud558\ub2e8\uc758 ng-repeat\uacfc ng-href \ub97c \ud65c\uc6a9\ud574\uc11c \ub3d9\uc801\uc73c\ub85c \ub85c\ub4dc\ub420 \uc218 \uc788\ub3c4\ub85d \uc124\uacc4\ub418\uc5c8\uc2b5\ub2c8\ub2e4. IE8\uc5d0\uc11c\ub3c4 \uc815\uc0c1 \ub3d9\uc791\ud558\ub294 \ubc29\uc2dd\uc785\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\ud558\ub2e8\uc758 require.js \ud30c\uc77c\uc744 \ub85c\ub4dc\ud574\uc8fc\ub294 \ubd80\ubd84\uc5d0 data-main \uc18d\uc131\uc744 \uc124\uc815\ud574\uc11c RequireJS\uac00 \ub85c\ub4dc\ub41c \ud6c4 \ubc14\ub85c \ub85c\ub4dc\ud574\uc11c \uc2e4\ud589\ud574\uc904 JavaScript \ud30c\uc77c\uc744 \uc9c0\uc815\ud574\uc904 \uc218 \uc788\ub294\ub370, \uc704\uc758 \uc608\uc5d0\uc11c\ub294 require.js \ud30c\uc77c\uc774 \ub85c\ub4dc\ub41c \ud6c4\uc5d0 \ubc14\ub85c js \ud3f4\ub354 \uc544\ub798\uc5d0 main.js \ud30c\uc77c\uc744 \ubd88\ub7ec\uc640\uc11c \uc2e4\ud589\ud558\ub3c4\ub85d \ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>index.html \ud30c\uc77c\uc5d0\uc11c\ub294 \uad6c\uccb4\uc801\uc73c\ub85c \uc5b4\ub5a4 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub4e4\uc774 \uc0ac\uc6a9\ub418\ub294\uc9c0 \uac10\ucd94\uc5b4\uc9d0\uc73c\ub85c\uc368 \uc804\uccb4\uc801\uc778 \ucf54\ub4dc\uc758 \uac00\ub3c5\uc131\ub3c4 \ub192\uc544\uc9c0\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<p><b>main.js<\/b><\/p>\n<pre class=\"brush:js\"> \/*\n\tuser strict \uba85\ub839\uc740 \uc5c4\uaca9\ud558\uac8c JavaScript \ub8f0\uc744 \uc801\uc6a9\ud558\ub77c\ub294 \uc758\ubbf8\uc774\ub2e4.\n\t\uc77c\ubd80 \ube0c\ub77c\uc6b0\uc800\uc758 \uacbd\uc6b0 use strict \uba85\ub839\uc744 \ud1b5\ud574 \ubcf4\ub2e4 \ube60\ub974\uac8c \ub3d9\uc791\ud558\ub294 \uacbd\uc6b0\ub3c4 \uc874\uc7ac\ud558\ub294 \uac83 \uac19\ub2e4.\n\t\uc798\ubabb\ub41c \ubd80\ubd84\uc5d0 \ub300\ud55c \uac80\uc99d\ub3c4 \ubcf4\ub2e4 \uc5c4\uaca9\ud558\uac8c \ub3d9\uc791\ud55c\ub2e4.\n\t\ud558\uc9c0\ub9cc, \uc77c\ubd80 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 \uacbd\uc6b0 use strict \uba85\ub839\uc744 \uc0ac\uc6a9\ud558\uba74 \ub3d9\uc791\ud558\uc9c0 \uc54a\ub294 \uacbd\uc6b0\ub3c4 \uc788\uc73c\ubbc0\ub85c \uc8fc\uc758\ud574\uc57c \ud55c\ub2e4.\n *\/\n'use strict';\n\n\/\/requireJS \uae30\ubcf8 \uc124\uc815 \ubd80\ubd84\nrequirejs.config({\n\/*\n\tbaseUrl:\n\tJavaScript \ud30c\uc77c\uc774 \uc788\ub294 \uae30\ubcf8 \uacbd\ub85c\ub97c \uc124\uc815\ud55c\ub2e4.\n\t\ub9cc\uc57d data-main \uc18d\uc131\uc774 \uc0ac\uc6a9\ub418\uc5c8\ub2e4\uba74, \uadf8 \uacbd\ub85c\uac00 baseUrl\uc774 \ub41c\ub2e4.\n\tdata-main \uc18d\uc131\uc740 require.js\ub97c \uc704\ud55c \ud2b9\ubcc4\ud55c \uc18d\uc131\uc73c\ub85c require.js\ub294 \uc2a4\ud06c\ub9bd\ud2b8 \ub85c\ub529\uc744 \uc2dc\uc791\ud558\uae30 \uc704\ud574 \uc774 \ubd80\ubd84\uc744 \uccb4\ud06c\ud55c\ub2e4.\n*\/\n\tbaseUrl:'js',\n\n\/*\n    paths:\n    path\ub294 baseUrl \uc544\ub798\uc5d0\uc11c \uc9c1\uc811\uc801\uc73c\ub85c \ucc3e\uc744 \uc218 \uc5c6\ub294 \ubaa8\ub4c8\uba85\ub4e4\uc744 \uc704\ud574 \uacbd\ub85c\ub97c \ub9e4\ud551\ud574\uc8fc\ub294 \uc18d\uc131\uc774\ub2e4.\n    \"\/\"\ub85c \uc2dc\uc791\ud558\uac70\ub098 \"http\" \ub4f1\uc73c\ub85c \uc2dc\uc791\ud558\uc9c0 \uc54a\uc73c\uba74, \uae30\ubcf8\uc801\uc73c\ub85c\ub294 baseUrl\uc5d0 \uc0c1\ub300\uc801\uc73c\ub85c \uc124\uc815\ud558\uac8c \ub41c\ub2e4.\n\n    paths: {\n        \"exam\": \"aaaa\/bbbb\"\n    }\n\n    \uc758 \ud615\ud0dc\ub85c \uc124\uc815\ud55c \ub4a4\uc5d0, define\uc5d0\uc11c \"exam\/module\" \ub85c \ubd88\ub7ec\uc624\uac8c \ub418\uba74, \uc2a4\ud06c\ub9bd\ud2b8 \ud0dc\uadf8\uc5d0\uc11c\ub294 \uc2e4\uc81c\ub85c\ub294 src=\"aaaa\/bbbb\/module.js\" \ub85c \uc7a1\uc744 \uac83\uc774\ub2e4.\n    path\ub294 \ub610\ud55c \uc544\ub798\uc640 \uac19\uc774 \ud2b9\uc815 \ub77c\uc774\ube0c\ub7ec\ub9ac \uacbd\ub85c \uc120\uc5b8\uc744 \uc704\ud574 \uc0ac\uc6a9\ub420 \uc218 \uc788\ub294\ub370, path \ub9e4\ud551 \ucf54\ub4dc\ub294 \uc790\ub3d9\uc801\uc73c\ub85c .js \ud655\uc7a5\uc790\ub97c \ubd99\uc5ec\uc11c \ubaa8\ub4c8\uba85\uc744 \ub9e4\ud551\ud55c\ub2e4.\n*\/\n\tpaths:{\n\n\t\t\/\/\ub4a4\uc5d0 js \ud655\uc7a5\uc790\ub294 \uc0dd\ub7b5\ud55c\ub2e4.\n\t\t'text': '..\/lib\/require\/text', \/\/HTML \ub370\uc774\ud130\ub97c \uac00\uc838\uc62c\ub54c text! \ud504\ub9ac\ud53d\uc2a4\ub97c \ubd99\uc5ec\uc900\ub2e4.\n\t\t'jquery': '..\/lib\/jquery\/jquery',\n\t\t'jquery-ui': '..\/lib\/jquery\/jquery-ui-1.10.2.min',\n\t\t'angular': '..\/lib\/angular\/angular',\n\t\t'library': '..\/lib'\n\t},\n\n\/*\n\tshim:\n\tAMD \ud615\uc2dd\uc744 \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 \uacbd\uc6b0 \uc544\ub798\uc640 \uac19\uc774 SHIM\uc744 \uc0ac\uc6a9\ud574\uc11c \ubaa8\ub4c8\ub85c \ubd88\ub7ec\uc62c \uc218 \uc788\ub2e4.\n\t\ucc38\uace0 : http:\/\/gregfranko.com\/blog\/require-dot-js-2-dot-0-shim-configuration\/\n*\/\n\tshim:{\n\t\t'angular':{\n\t\t\tdeps:['jquery'],\n\t\t\texports:'angular'\n\t\t},\n\t\t'jquery-ui': {\n\t\t\tdeps: ['jquery']\n\t\t},\n\t\t'app':{\n\t\t\tdeps:['angular']\n\t\t},\n\t\t'routes':{\n\t\t\tdeps:['angular']\n\t\t}\n\t}\n});\n\n\/\/requireJS\ub97c \ud65c\uc6a9\ud558\uc5ec \ubaa8\ub4c8 \ub85c\ub4dc\nrequirejs( [\n\t\t'text', \/\/\ubbf8\ub9ac \uc120\uc5b8\ud574\ub454 path, css\ub098 html\uc744 \ub85c\ub4dc\ud558\uae30 \uc704\ud55c requireJS \ud50c\ub7ec\uadf8\uc778\n\t\t'jquery', \/\/\ubbf8\ub9ac \uc120\uc5b8\ud574\ub454 path, jQuery\ub294 AMD\ub97c \uc9c0\uc6d0\ud558\uae30 \ub54c\ubb38\uc5d0 \uc774\ub807\uac8c \ub85c\ub4dc\ud574\ub3c4 jQuery \ub610\ub294 $\ub85c \ud638\ucd9c\ud560 \uc218 \uc788\ub2e4.\n\t\t'angular', \/\/\ubbf8\ub9ac \uc120\uc5b8\ud574\ub454 path\n\t\t'jquery-ui',\n\t\t'app', \/\/app.js\n\t\t'routes' \/\/routes.js\n\t],\n\n\t\/\/\ub514\ud39c\ub358\uc2dc \ub85c\ub4dc\ub4a4 \ucf5c\ubc31\ud568\uc218\n\tfunction (text, $, angular) {\n\t\t\/\/\uc774 \ud568\uc218\ub294 \uc704\uc5d0 \uba85\uc2dc\ub41c \ubaa8\ub4e0 \ub514\ud39c\ub358\uc2dc\ub4e4\uc774 \ub2e4 \ub85c\ub4dc\ub41c \ub4a4\uc5d0 \ud638\ucd9c\ub41c\ub2e4.\n\t\t\/\/\uc8fc\uc758\ud574\uc57c\ud560 \uac83\uc740, \ub514\ud39c\ub358\uc2dc \ub85c\ub4dc \uc644\ub8cc \uc2dc\uc810\uc774 \ud398\uc774\uc9c0\uac00 \uc644\uc804\ud788 \ub85c\ub4dc\ub418\uae30 \uc804 \uc77c \uc218\ub3c4 \uc788\ub2e4\ub294 \uc0ac\uc2e4\uc774\ub2e4.\n\n\t\t\/\/\ud398\uc774\uc9c0\uac00 \uc644\uc804\ud788 \ub85c\ub4dc\ub41c \ub4a4\uc5d0 \uc2e4\ud589\n\t\t$(document).ready(function () {\n\n\t\t\t\/\/\uc704\uc758 \ub514\ud39c\ub358\uc2dc \uc911 myApp\uc774 \ud3ec\ud568\ub41c app.js\uac00 \ub85c\ub4dc\ub41c \uc774\ud6c4\uc5d0 \uc544\ub798\uac00 \uc218\ud589\ub41c\ub2e4.\n\t\t\t\/\/\uc784\uc758\ub85c \uc575\uade4\ub7ec \ubd80\ud2b8\uc2a4\ud2b8\ub798\ud551\uc744 \uc218\ud589\ud55c\ub2e4.\n\n\t\t\tangular.bootstrap(document, ['myApp']);\n\n\t\t});\n\n\t}\n);<\/pre>\n<div>\n<p>require.js \ud30c\uc77c\uc774 \ub85c\ub4dc\ub41c \ub4a4 \uac00\uc7a5 \ucc98\uc74c \ubd88\ub7ec\uc624\ub294 \ud30c\uc77c\uc778 main.js \uc2a4\ud06c\ub9bd\ud2b8\ub294 \ud06c\uac8c \ub450 \ubd80\ubd84\uc73c\ub85c \ub098\ub204\uc5b4\uc838 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\uba3c\uc800\ub294 RequireJS \uc758 \ud658\uacbd\uc744 \uc124\uc815\ud558\ub294 \ubd80\ubd84\uc774\uace0, \uc124\uc815\uc774 \ub05d\ub09c \ub4a4\uc5d0\ub294 require \ud568\uc218\ub97c \uc0ac\uc6a9\ud574\uc11c \ub514\ud39c\ub358\uc2dc\ub97c \ubd88\ub7ec\uc628 \ub4a4 angular module\uc744 \ubd80\ud2b8\uc2a4\ud2b8\ub798\ud551 \ud558\uac8c \ub429\ub2c8\ub2e4. \ud658\uacbd \uc124\uc815\uc5d0 \ub300\ud55c \ubd80\ubd84\uc740 \uc9c0\ub09c require.js \uc5d0 \ub300\ud55c \uae00\uc5d0 \ucda9\ubd84\ud558\uac8c \uc124\uba85\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\uc55e\uc11c \ud750\ub984\uc5d0 \ub300\ud574 \uc0b4\ud3b4\ubcfc\ub54c \uc774\uc57c\uae30\ud588\ub358 \uac83\ucc98\ub7fc angular module\uc774 \ubd80\ud2b8\uc2a4\ud2b8\ub798\ud551 \ub418\ub294 \uac83\uc740 \ub098\uc5f4\ub41c \ub514\ud39c\ub358\uc2dc\ub4e4\uc774 \ubaa8\ub450 \ub85c\ub4dc\ub41c \uc2dc\uc810\uc774\ubbc0\ub85c \ubaa8\ub4e0 \ud750\ub984\uc758 \ub05d\uc5d0 \uc2e4\ud589\ub429\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\ub098\uc5f4\ub41c \ub514\ud39c\ub358\uc2dc \uc911 \u2018text\u2019 \ub77c\ub294 \uac83\uc740 require.js \uc758 text plug-in \uc73c\ub85c \uc2a4\ud06c\ub9bd\ud2b8 \ud30c\uc77c\uc774 \uc544\ub2cc \ud14d\uc2a4\ud2b8 \ud615\ud0dc\uc758 \ud30c\uc77c\uc744 \ub3d9\uc801\uc73c\ub85c \uac00\uc838\uc62c \uc218 \uc788\ub3c4\ub85d \ud574\uc8fc\ub294 \uae30\ub2a5\uc744 \ud569\ub2c8\ub2e4.\n<\/p><\/div>\n<p><b>app.js<\/b><\/p>\n<pre class=\"brush:js\">'use strict';\n\n\/\/requireJS \ubaa8\ub4c8 \uc120\uc5b8 - [myApp \uc575\uade4\ub7ec \ubaa8\ub4c8]\ndefine([\n\t\t'angular', \/\/\uc575\uade4\ub7ec \ubaa8\ub4c8\uc744 \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 \uc784\ud3ec\ud2b8\n\t\t'route-config' \/\/registers\uc5d0 \uac01 \ud504\ub85c\ubc14\uc774\ub354\ub97c \uc81c\uacf5\ud558\uae30 \uc704\ud574 \uc784\ud3ec\ud2b8\n\t],\n\n\/*\n\t\uc774 \ubd80\ubd84\ub3c4 \uc8fc\uc758\uae4a\uac8c \uc0b4\ud3b4\ubd10\uc57c\ud55c\ub2e4.\n\t\uc704\uc758 \ub514\ud39c\ub358\uc2dc\ub4e4\uc774 \ubaa8\ub450 \ub85c\ub4dc\ub41c \ub4a4\uc5d0 \uc544\ub798\uc758 \ucf5c\ubc31\uc774 \uc2e4\ud589\ub41c\ub2e4.\n\t\ub514\ud39c\ub358\uc2dc\ub4e4\uc774 \ub9ac\ud134\ud558\ub294 \uac1d\uccb4\ub4e4\uc744 \ucf5c\ubc31\ud568\uc218\uc758 \ud30c\ub77c\uba54\ud130\ub85c \ubc1b\uac8c \ub418\ub294\ub370,\n\t\uc790\uc138\ud788\ubcf4\uba74 route-config\uc640 \uac19\uc774 snake case\ub85c \ub41c \ud30c\uc77c\uba85\uc774,\n\t\ud30c\ub77c\uba54\ud130\ub85c \ubc1b\uc744 \ub54c\ub294 routeConfig\uc640 \uac19\uc774 camel case\ub85c \ubc14\ub00c\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\ub2e4.\n*\/\n\t\/\/\ub514\ud39c\ub358\uc2dc \ub85c\ub4dc\ub4a4 \ucf5c\ubc31\ud568\uc218\n\tfunction (angular, routeConfig) {\n\n\t\t\/\/\uc704\uc758 \ub514\ud39c\ub358\uc2dc\ub97c \uac00\uc838\uc640\uc11c \ucf5c\ubc31\uc744 \uc218\ud589\ud558\uac8c \ub418\ub294\ub370,\n\t\t\/\/\ub9ac\ud134\ud558\ub294 \ub0b4\uc6a9\uc774 \uc2e4\uc81c \uc0ac\uc6a9\ub418\ub294 \ubd80\ubd84\uc774\uaca0\uc9c0?\n\t\t\/\/\uc5ec\uae30\uc11c\ub294 myApp\uc774\ub77c\ub294 \uc575\uade4\ub7ec \ubaa8\ub4c8\uc744 \ub9ac\ud134\ud55c\ub2e4.\n\n\t\t\/\/\ubaa8\ub4c8 \uc120\uc5b8\n\t\tvar app = angular.module('myApp', [], function ($provide, $compileProvider, $controllerProvider, $filterProvider) {\n\n\t\t\t\/\/\ubd80\ud2b8\uc2a4\ud2b8\ub7a9 \uacfc\uc815\uc5d0\uc11c\ub9cc \uac00\uc838\uc62c \uc218 \uc788\ub294 \ud504\ub85c\ubc14\uc774\ub354\ub4e4\uc744 \uac01 registers\uc640 \uc5f0\uacc4\ub420 \uc218 \uc788\ub3c4\ub85d\n\t\t\trouteConfig.setProvide($provide); \/\/for services\n\t\t\trouteConfig.setCompileProvider($compileProvider);  \/\/for directives\n\t\t\trouteConfig.setControllerProvider($controllerProvider); \/\/for controllers\n\t\t\trouteConfig.setFilterProvider($filterProvider); \/\/for filters\n\t\t});\n\n\t\t\/\/\uacf5\ud1b5 \ucee8\ud2b8\ub864\ub7ec \uc124\uc815 - \ubaa8\ub4e0 \ucee8\ud2b8\ub864\ub7ec\uc5d0\uc11c \uacf5\ud1b5\uc801\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \ubd80\ubd84\ub4e4 \uc120\uc5b8\n\t\tapp.controller('CommonController', function($scope) {\n\n\t\t\t\/\/\uc2a4\ud0c0\uc77c\uc2dc\ud2b8 \uc5c5\ub370\uc774\ud2b8\n\t\t\t $scope.$on('updateCSS', function(event, args) {\n\n\t\t\t\t\/\/\ud30c\ub77c\uba54\ud130\ub85c \ubc1b\uc544\uc628 \uc2a4\ud0c0\uc77c \uc2dc\ud2b8 \ubc18\uc601\n\t\t\t\t$scope.stylesheets = args;\n\t\t\t});\n\t\t});\n\n\t\treturn app;\n \t}\n);<\/pre>\n<div>\n<p>AngularJS\ub098 jQuery \uc640 \uac19\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc678\uc5d0 main.js\uc758 \ub514\ud39c\ub358\uc2dc\ub85c \uac78\ub9b0 \ud30c\uc77c \uc911 \ud558\ub098\uac00 app.js \ud30c\uc77c\uc785\ub2c8\ub2e4. \uc774 \ub514\ud39c\ub358\uc2dc \uc124\uc815\uc73c\ub85c \uc778\ud574 app.js \ud30c\uc77c\uc774 \ub85c\ub4dc\ub418\uc5b4 \uc2e4\ud589 \ub41c \ud6c4\uc5d0\uc57c main.js \ud30c\uc77c\uc758 \uc2e4\ud589\ub41c\ub2e4\ub294 \uac83\uc740 \uc55e\uc11c \uc5b8\uae09\ud55c \ubd80\ubd84\uc785\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>app.js \ud30c\uc77c\uc5d0\ub3c4 \uc5ed\uc2dc \ub514\ud39c\ub358\uc2dc \uc124\uc815\uc774 \uac78\ub824 \uc788\ub294\ub370, AngularJS\uc758 route \uc124\uc815\uc744 \uc704\ud55c route-config.js \ud30c\uc77c\uc785\ub2c8\ub2e4. \u00a0route-config.js \ud30c\uc77c\uc774 \ub85c\ub4dc\ub41c \ub4a4\uc5d0 app.js \uc5d0\uc11c\ub294 myApp \ubaa8\ub4c8\uc744 \uc120\uc5b8\ud569\ub2c8\ub2e4. AngularJS\ub294 \ubaa8\ub4c8 \u00a0\uc120\uc5b8\uc2dc\uc5d0\ub9cc \uc811\uadfc\ud560 \uc218 \uc788\ub294 provider \ub4e4\uc774 \uc788\ub294\ub370 Lazy Loading\uc744 \u00a0\uc704\ud574\uc11c \u00a0\uc774 \u00a0provider \ub4e4\uc744 \ubcc4\ub3c4\ub85c \uc800\uc7a5\ud574\ub461\ub2c8\ub2e4. \uc774 provider \ub4e4\uc744 \u00a0\uc800\uc7a5\ud558\ub294 \ubd80\ubd84\uc774 route-config.js \uc5d0 \uad6c\ud604\ub418\uc5b4 \uc788\uae30 \ub54c\ubb38\uc5d0 route-config.js \ud30c\uc77c\uc774 \ub514\ud39c\ub358\uc2dc\ub85c \uc7a1\ud600\uc788\ub294 \uac83\uc785\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\ub610\ud55c app.js \ud30c\uc77c\uc5d0\ub294 \uc571 \uc804\uccb4\uc801\uc73c\ub85c \uacf5\ud1b5\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294 \u00a0CommonController\uac00 \u00a0\uc120\uc5b8\ub418\uc5b4 \u00a0\uc788\uc2b5\ub2c8\ub2e4. \uc0ac\uc2e4 \uac01 partial view\ub9c8\ub2e4 \ub610 \ucee8\ud2b8\ub864\ub7ec\uac00 \uc874\uc7ac\ud558\ub294\ub370, \uc774 \uacf5\ud1b5 \ucee8\ud2b8\ub864\ub7ec\uc5d0\uc11c\ub294 partial view \uc678\uc5d0 \ubd80\ubd84\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub294 \ub0b4\uc6a9\ub4e4\uc774 \uc704\uce58\ud558\uac8c \ub429\ub2c8\ub2e4. \uc608\ub97c\ub4e4\uc5b4, \uc704\uc758 \uc18c\uc2a4\uc5d0\uc11c\ub294 \ub3d9\uc801\uc73c\ub85c \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub97c \u00a0\uc5c5\ub370\uc774\ud2b8\ud558\ub294 \ub85c\uc9c1\uc774 \ub4e4\uc5b4 \uc788\ub294 \uac83\uc744 \u00a0\ubcfc \u00a0\uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uc678\uc5d0\ub3c4 \uc571 \uc804\uccb4 \uba54\ub274\ub97c \u00a0\uc124\uc815\ud558\ub294 \u00a0\ubd80\ubd84 \ub4f1\ub3c4 \uc774 \ucee8\ud2b8\ub864\ub7ec\uc5d0 \ud3ec\ud568\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\uc5ec\uae30\uc5d0\uc11c\ub294 \ucee8\ud2b8\ub864\ub7ec \ud558\ub098\ub9cc myApp \ubaa8\ub4c8\uc5d0 \ucd94\uac00\ud558\uace0 \u00a0\uc788\uc9c0\ub9cc, \uacf5\ud1b5\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294 directive\uac00 \u00a0\uc874\uc7ac\ud55c\ub2e4\uba74 \uc774 \u00a0app.js \ud30c\uc77c\uc5d0\uc11c \uc120\uc5b8\ud574\uc11c \ucd94\uac00\ud574 \uc8fc\ub294 \uac83\ub3c4 \uac00\ub2a5\ud569\ub2c8\ub2e4. \uadf8 \u00a0\uc678\uc5d0\ub3c4 \uacf5\ud1b5\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\uace0 \ub3d9\uc801\uc73c\ub85c \ucd94\uac00\ub420 \ud544\uc694\uac00 \uc5c6\ub294 value \uac12\uc774\ub098 service, filter \ub4f1\ub3c4 \uc5ec\uae30\uc5d0\uc11c \uc120\uc5b8\ud574\ub450 \u00a0\ucd94\uac00\ud574\uc8fc\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<p><b>route-config.js<\/b><\/p>\n<pre class=\"brush:js\">\/\/requireJS \ubaa8\ub4c8 \uc120\uc5b8\ndefine([\n\t\t\/\/\ub514\ud39c\ub358\uc2dc\uac00 \uac78\ub824\uc788\uc73c\ubbc0\ub85c, \uc544\ub798\uc758 \ub514\ud39c\ub358\uc2dc\uac00 \uba3c\uc800 \ub85c\ub4dc\ub41c \ub4a4\uc5d0 \uc544\ub798 \ucf5c\ubc31\uc774 \uc218\ud589\ub41c\ub2e4.\n\t\t'registers\/lazy-directives',\n\t\t'registers\/lazy-services',\n\t\t'registers\/lazy-filters'\n\t],\n\n\t\/\/\ub514\ud39c\ub358\uc2dc \ub85c\ub4dc\ub4a4 \ucf5c\ubc31\ud568\uc218\n\tfunction (lazyDirectives, lazyServices, lazyFilters) {\n\n\t\tvar $controllerProvider; \/\/\ucee8\ud2b8\ub864\ub7ec \ud504\ub85c\ubc14\uc774\ub354\ub97c \ubc1b\uc744 \ubcc0\uc218\n\n\t\t\/\/\ucee8\ud2b8\ub864\ub7ec \ud504\ub85c\ubc14\uc774\ub354 \uc124\uc815 \ud568\uc218\n\t\tfunction setControllerProvider(value) {\n\t\t\t$controllerProvider = value;\n\t\t}\n\n\t\t\/\/\ucef4\ud30c\uc77c \ud504\ub85c\ubc14\uc774\ub354 \uc124\uc815 \ud568\uc218\n\t\tfunction setCompileProvider(value) {\n\t\t\tlazyDirectives.setCompileProvider(value);\n\t\t}\n\n\t\t\/\/\ud504\ub85c\ubc14\uc774\ub4dc \uc124\uc815 \ud568\uc218\n\t\tfunction setProvide(value) {\n\t\t\tlazyServices.setProvide(value);\n\t\t}\n\n\t\t\/\/\ud544\ud130 \ud504\ub85c\ubc14\uc774\ub354 \uc124\uc815 \ud568\uc218\n\t\tfunction setFilterProvider(value) {\n\t\t\tlazyFilters.setFilterProvider(value);\n\t\t}\n\n\/*\n\t\t\ud604\uc7ac \uc2dc\uc810\uc5d0\uc11c services\ub294 \uc624\uc9c1 value \uac12\uc744 \uc815\ud560\ub54c\ub9cc \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.\n\t\tServices\ub294 \ubc18\ub4dc\uc2dc factory\ub97c \uc0ac\uc6a9\ud574\uc57c \ud55c\ub2e4.\n\n\t\t$provide.value('a', 123);\n\t\t$provide.factory('a', function() { return 123; });\n\t\t$compileProvider.directive('directiveName', ...);\n\t\t$filterProvider.register('filterName', ...);\n*\/\n\t\tfunction config(templatePath, controllerPath, lazyResources) {\n\n\t\t\t\/\/\ucee8\ud2b8\ub864\ub7ec \ud504\ub85c\ubc14\uc774\ub354\uac00 \uc874\uc7ac\ud558\uc9c0 \uc54a\uc73c\uba74 \uc624\ub958!\n\t\t\tif (!$controllerProvider) {\n\t\t\t\tthrow new Error(\"$controllerProvider is not set!\");\n\t\t\t}\n\n\t\t\t\/\/\ubcc0\uc218 \uc120\uc5b8\n\t\t\tvar defer,\n\t\t\t\thtml,\n\t\t\t\trouteDefinition = {};\n\n\t\t\t\/\/\uacbd\ub85c \ud15c\ud50c\ub9bf \uc124\uc815\n\t\t\trouteDefinition.template = function () {\n\t\t\t\treturn html;\n\t\t\t};\n\n\t\t\t\/\/\uacbd\ub85c \ucee8\ud2b8\ub864\ub7ec \uc124\uc815\n\t\t\trouteDefinition.controller = controllerPath.substring(controllerPath.lastIndexOf(\"\/\") + 1);\n\n\t\t\t\/\/\uacbd\ub85c\n\t\t\trouteDefinition.resolve = {\n\n\t\t\t\tdelay: function ($q, $rootScope) {\n\n\t\t\t\t\t\/\/defer \uac00\uc838\uc624\uae30\n\t\t\t\t\tdefer = $q.defer();\n\n\t\t\t\t\t\/\/html\uc5d0 \uc544\ubb34\ub7f0 \uac12\uc774 \uc5c6\ub294 \uacbd\uc6b0\n\t\t\t\t\tif (!html) {\n\n\t\t\t\t\t\t\/\/\ud15c\ud50c\ub9bf \ubc0f \ucee8\ud2b8\ub864\ub7ec \ub514\ud39c\ub358\uc2dc \uc124\uc815\n\t\t\t\t\t\tvar dependencies = [\"text!\" + templatePath, controllerPath];\n\n\t\t\t\t\t\t\/\/\ub9ac\uc18c\uc2a4\ub4e4 \ucd94\uac00\n\t\t\t\t\t\tif (lazyResources) {\n\t\t\t\t\t\t\tdependencies = dependencies.concat(lazyResources.directives);\n\t\t\t\t\t\t\tdependencies = dependencies.concat(lazyResources.services);\n\t\t\t\t\t\t\tdependencies = dependencies.concat(lazyResources.filters);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\/\/\ub514\ud39c\ub358\uc2dc\ub4e4 \uac00\uc838\uc624\uae30\n\t\t\t\t\t\trequire(dependencies, function () {\n\n\t\t\t\t\t\t\t\/\/\uc778\ub514\ucf00\uc774\ud130\n\t\t\t\t\t\t\tvar indicator = 0;\n\n\t\t\t\t\t\t\t\/\/\ud15c\ud50c\ub9bf\n\t\t\t\t\t\t\tvar template = arguments[indicator++];\n\n\t\t\t\t\t\t\t\/\/\ucee8\ud2b8\ub864\ub7ec\n\t\t\t\t\t\t\tif( angular.isDefined(controllerPath) ) {\n\t\t\t\t\t\t\t\t$controllerProvider.register(controllerPath.substring(controllerPath.lastIndexOf(\"\/\") + 1), arguments[indicator]);\n\t\t\t\t\t\t\t\tindicator++;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif( angular.isDefined(lazyResources) ) {\n\n\t\t\t\t\t\t\t\t\/\/\ub2e4\uc774\ub809\ud2f0\ube0c\n\t\t\t\t\t\t\t\tif( angular.isDefined(lazyResources.directives) ) {\n\t\t\t\t\t\t\t\t\tfor(var i=0; i&lt;lazyResources.directives.length; i++) {\n\t\t\t\t\t\t\t\t\t\tlazyDirectives.register(arguments[indicator]);\n\t\t\t\t\t\t\t\t\t\tindicator++;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\/\/\uc11c\ube44\uc2a4(value)\n\t\t\t\t\t\t\t\tif( angular.isDefined(lazyResources.services) ) {\n\t\t\t\t\t\t\t\t\tfor(var i=0; i&lt;lazyResources.services.length; i++) {\n\t\t\t\t\t\t\t\t\t\tlazyServices.register(arguments[indicator]);\n\t\t\t\t\t\t\t\t\t\tindicator++;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\/\/\ud544\ud130\n\t\t\t\t\t\t\t\tif( angular.isDefined(lazyResources.filters) ) {\n\t\t\t\t\t\t\t\t\tfor(var i=0; i&lt;lazyResources.filters.length; i++) {\n\t\t\t\t\t\t\t\t\t\tlazyFilters.register(arguments[indicator]);\n\t\t\t\t\t\t\t\t\t\tindicator++;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\/\/\ub51c\ub808\uc774 \uac78\uc5b4\ub193\uae30\n\t\t\t\t\t\t\thtml = template;\n\t\t\t\t\t\t\tdefer.resolve();\n\t\t\t\t\t\t\t$rootScope.$apply();\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\n\t\t\t\t\telse {\n\t\t\t\t\t\tdefer.resolve();\n\t\t\t\t\t}\n\n\t\t\t\t\treturn defer.promise;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn routeDefinition;\n\t\t}\n\n\t\treturn {\n\t\t\tsetControllerProvider: setControllerProvider,\n\t\t\tsetCompileProvider: setCompileProvider,\n\t\t\tsetProvide: setProvide,\n\t\t\tsetFilterProvider: setFilterProvider,\n\t\t\tconfig: config\n\t\t};\n\t}\n);<\/pre>\n<div>\n<p>\uc55e\uc11c app.js \ud30c\uc77c\uc5d0 \uc774 route-config.js \ud30c\uc77c\uc774 \ub514\ud39c\ub358\uc2dc\ub85c \uc7a1\ud600\uc788\uc5c8\uae30 \ub54c\ubb38\uc5d0 route-config.js \ud30c\uc77c\uc774 \uba3c\uc800 \uc2e4\ud589\ub418\uac8c \ub429\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\ub610 route-config.js \ud30c\uc77c\uc5d0\ub294 \uac01\uac01 directive, service, filter \ub97c \ub3d9\uc801\uc73c\ub85c \ub4f1\ub85d\uc2dc\ucf1c\uc904 \ub54c \uc0ac\uc6a9\ub418\ub294 lazy-directives, lazy-services, lazy-filters \uac00 \ub514\ud39c\ub358\uc2dc\ub85c \uc7a1\ud600\uc788\uae30 \ub54c\ubb38\uc5d0 \uc774 \ud30c\uc77c\ub4e4\uc774 \ub85c\ub4dc\ub41c \ub4a4\uc5d0 route-config.js \ud30c\uc77c\uc774 \uc2e4\ud589\ub429\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\ub514\ud39c\ub358\uc2dc\uac00 \ub85c\ub4dc\ub41c \ub4a4\uc5d0\ub294 route \uc124\uc815\uacfc \uad00\ub828\ub41c \ud568\uc218\ub4e4\uc774 \uc120\uc5b8\ub429\ub2c8\ub2e4. \uac01\uac01\uc758 provider\ub97c \uc800\uc7a5\ud558\ub294 \ud568\uc218\ub4e4\uacfc path\uc5d0 \ub530\ub77c lazy-loading \u00a0\uc744 \uad6c\ud604\ud558\ub294 \ubd80\ubd84\uc774 config \ud568\uc218\uc5d0 \uc120\uc5b8\ub429\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\uc18c\uc2a4\uc5d0 \uc8fc\uc11d\uc73c\ub85c \uc124\uba85\uc774 \ub418\uc5b4 \uc788\uc9c0\ub9cc \uac04\ub2e8\ud558\uac8c \uc804\uccb4 \ub85c\uc9c1\uc744 \uc0b4\ud3b4\ubcf4\uc790\uba74, \ud15c\ud50c\ub9bf\uacfc \uc2a4\ud06c\ub9bd\ud2b8 \ud30c\uc77c \ub4f1\uc744 \ud30c\ub77c\uba54\ud130\ub85c \ubc1b\uc544\uc11c \ucc28\ud6c4\uc5d0 \ud638\ucd9c\uc774 \ub4e4\uc5b4\uc62c \uacbd\uc6b0 requireJS\ub85c \uc774\ub4e4\uc744 \ub3d9\uc801\uc73c\ub85c \uac00\uc838\uc640 \ub4f1\ub85d\ud558\ub3c4\ub85d \uc608\uc57d\ud558\ub294 \ub85c\uc9c1\uc785\ub2c8\ub2e4.\n<\/p><\/div>\n<p><b>route.js<\/b><\/p>\n<pre class=\"brush:js\">'use strict';\n\ndefine([\n\t\t'app', \/\/\uc0dd\uc131\ud55c \uc575\uade4\ub7ec \ubaa8\ub4c8\uc5d0 \ub8e8\ud2b8\ub97c \ub4f1\ub85d\ud558\uae30 \uc704\ud574 \uc784\ud3ec\ud2b8\n\t\t'route-config' \/\/\ub8e8\ud2b8\ub97c \ub4f1\ub85d\ud558\ub294 routeConfig\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 \uc784\ud3ec\ud2b8\n\t],\n\n\tfunction (app, routeConfig) {\n\n\t\t\/\/app\uc740 \uc0dd\uc131\ud55c myApp \uc575\uade4\ub7ec \ubaa8\ub4c8\n\t\treturn app.config(function ($routeProvider) {\n\n\t\t\t\/\/view1 \uacbd\ub85c \uc124\uc815\n\t\t\t$routeProvider.when('\/view1', routeConfig.config('..\/partials\/view1.html', 'controllers\/first', {\n\t\t\t\tdirectives: ['directives\/version'],\n\t\t\t\tservices: [],\n\t\t\t\tfilters: ['filters\/reverse']\n\t\t\t}));\n\n\t\t\t\/\/view2 \uacbd\ub85c \uc124\uc815\n\t\t\t$routeProvider.when('\/view2', routeConfig.config('..\/partials\/view2.html', 'controllers\/second', {\n\t\t\t\tdirectives: ['directives\/version'],\n\t\t\t\tservices: ['services\/tester'],\n\t\t\t\tfilters: []\n\t\t\t}));\n\n\t\t\t\/\/grid \uacbd\ub85c \uc124\uc815\n\t\t\t$routeProvider.when('\/grid', routeConfig.config('..\/partials\/grid.html', 'controllers\/grid'));\n\n\t\t\t\/\/admin \uacbd\ub85c \uc124\uc815\n\t\t\t$routeProvider.when('\/admin', routeConfig.config('..\/partials\/admin.html', 'controllers\/third'));\n\n\t\t\t\/\/\uae30\ubcf8 \uacbd\ub85c \uc124\uc815\n\t\t\t$routeProvider.otherwise({redirectTo:'\/view1'});\n\t\t});\n});<\/pre>\n<div>\n<p>route-config.js \ud30c\uc77c\uacfc app.js \ud30c\uc77c\uc744 \ub514\ud39c\ub358\uc2dc\ub85c \uac16\uace0 \uc788\ub358 route.js \ud30c\uc77c\uc758 \uc2e4\ud589\ubd80\uac00 \ucc98\ub9ac\ub429\ub2c8\ub2e4. route.js \ud30c\uc77c\uc758 \uc2e4\ud589\ubd80\uc5d0\ub294 AngularJS\uc758 \uacbd\ub85c \uc124\uc815 \ub85c\uc9c1\uc774 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\ubaa8\ub4c8\uc758 config \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud574\uc11c \uac01\uac01\uc758 \uacbd\ub85c\ub97c \uc124\uc815\ud574\uc8fc\uac8c \ub418\ub294\ub370, \uc5ec\uae30\uc5d0\uc11c\ub294 4\uac1c\uc758 \uacbd\ub85c\ub9cc \uc124\uc815\ud574\uc8fc\uc5c8\uc2b5\ub2c8\ub2e4. \uc2e4\uc81c \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 $http \uc11c\ube44\uc2a4 \ub4f1\uc744 \uc0ac\uc6a9\ud574\uc11c \uba54\ub274 \u00a0\uad00\ub828 \ub370\uc774\ud130\ub97c JSON\uc73c\ub85c \ub3d9\uc801\uc73c\ub85c \ubc1b\uc544\uc640\uc11c \u00a0\ucc98\ub9ac\ud574\uc8fc\ub294 \u00a0\ubc29\ubc95\ub3c4 \uace0\ubbfc\ud574\ubcfc \u00a0\uc218 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\uc774\ub807\uac8c route.js \ud30c\uc77c\ub3c4 \ub85c\ub4dc \u00a0\ubc0f \uc2e4\ud589\uc774 \uc644\ub8cc\ub418\uace0 \ub098\uba74 \ub2e4\uc2dc main.js \ud30c\uc77c\uc758 \ucf5c\ubc31 \ud568\uc218 \ubd80\ubd84\uc73c\ub85c \ub3cc\uc544\uac00\uac8c \ub418\uace0 \u00a0\ube44\ub85c\uc18c myApp \ubaa8\ub4c8\uc774 \ubd80\ud2b8\uc2a4\ud2b8\ub798\ud551\ub418\uba70 \u00a0Angular Application \uc774 \uc2e4\ud589\ub429\ub2c8\ub2e4.\n<\/p><\/div>\n<p><b>\ub3d9\uc801\uc73c\ub85c \ub85c\ub529\ub418\ub294 \u00a0\ucee8\ud2b8\ub864\ub7ec \uc608 \u2013 grid.js<\/b><\/p>\n<pre class=\"brush:js\">'use strict';\n\ndefine(['library\/pqgrid\/pqgrid.dev'], function () {\n\n\t\/\/\ucee8\ud2b8\ub864\ub7ec \uc120\uc5b8\n\tfunction _controller($scope) {\n\n\t\t\/\/CSS \uc124\uc815\n\t\t$scope.$emit('updateCSS', ['lib\/jquery\/css\/base\/jquery-ui-1.10.2.min.css', 'lib\/pqgrid\/pqgrid.dev.css']);\n\n\t\t\/*\n\t\t\t\ubcf4\uc5ec\uc904 \ub354\ubbf8 \ub370\uc774\ud130 \uc0dd\uc131\n\t\t*\/\n\t\tvar array = [];\n\t\tfor(var i=0; i&lt;100; i++) {\n\t\t\tarray[i] = [ \"Task \" + i, \"5 days\", Math.round(Math.random() * 100), \"01\/01\/2009\", \"01\/05\/2009\", (i % 5 == 0) + \"\" ];\n\t\t}\n\n\t\t\/*\n\t\tParamquery Grid \uc124\uc815\n\t\t*\/\n\t\t$(\"div[pq-grid]\").pqGrid({\n\t\t\twidth: 700,\n\t\t\theight: 400,\n\t\t\teditable: false,\n\t\t\ttitle: \"Basic Grid\",\n\t\t\tcolModel: [\n\t\t\t\t{ title: \"Title\", width: 100, dataType: \"string\" },\n\t\t\t\t{ title: \"Duration\", width: 100, dataType: \"string\" },\n\t\t\t\t{ title: \"Complete\", width: 50, dataType: \"float\", align: \"right\" },\n\t\t\t\t{ title: \"Start\", width: 100, dataType: \"string\", align: \"right\" },\n\t\t\t\t{ title: \"Finish\", width: 100, dataType: \"string\", align: \"right\" },\n\t\t\t\t{ title: \"Effort Driven\", width: 100, dataType: \"string\", align: \"right\"}\n\t\t\t],\n\t\t\tdataModel: { data: array }\n\t\t});\n\t}\n\n\t\/\/\uc0dd\uc131\ud55c \ucee8\ud2b8\ub864\ub7ec \ub9ac\ud134\n\treturn _controller;\n});<\/pre>\n<div>\n<p>path \uac00 grid \uc77c \uacbd\uc6b0 grid.js \ud30c\uc77c\uc774 \ucee8\ud2b8\ub864\ub7ec\ub85c\uc11c \ub3d9\uc801\uc73c\ub85c \ub85c\ub4dc\ub429\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>RequireJS module \ud615\ud0dc\ub85c \uc120\uc5b8\ub418\uc5b4 \uc788\ub294\ub370, \uc774 grid \uba54\ub274\uc758 \ud654\uba74\uc5d0\ub294 pqGrid\ub97c \uc0ac\uc6a9\ud558\ubbc0\ub85c \ub514\ud39c\ub358\uc2dc\ub85c pqGrid \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ub123\uace0 \uc788\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<p>define([&#8216;library\/pqgrid\/pqgrid.dev&#8217;], function () {<\/p>\n<div>\n<p>\uc704\uc640 \uac19\uc774 define\uc73c\ub85c \ubaa8\ub4c8\uc744 \uc120\uc5b8\ud55c \ub4a4\uc5d0 \uccab \ud30c\ub77c\uba54\ud130\ub85c \ubc30\uc5f4 \ud615\ud0dc\ub85c \ud544\uc694\ud55c \ub514\ud39c\ub358\uc2dc\ub97c \uc120\uc5b8\ud569\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<p>\ub514\ud39c\ub358\uc2dc \ub85c\ub4dc\uac00 \uc644\ub8cc\ub418\uba74 \uc544\ub798 \ucf5c\ubc31 \ud568\uc218\uac00 \uc2e4\ud589\ub418\ub294\ub370, \ucf5c\ubc31\ud568\uc218\uc5d0\uc11c\ub294 Angular Controller \ud615\ud0dc\ub85c \ud568\uc218\ub97c \uc120\uc5b8\ud574\uc11c \uc774 \ud568\uc218\ub97c \ub9ac\ud134\ud574\uc8fc\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\ub610 \ub3d9\uc801\uc73c\ub85c CSS\ub97c \uc124\uc815\ud574\uc8fc\uae30 \uc704\ud574 \ucee8\ud2b8\ub864\ub7ec \ub0b4\ubd80\uc5d0 $emit \uc73c\ub85c \ucd94\uac00\ud558\uace0\uc790\ud558\ub294 css \uc758 \uacbd\ub85c\ub97c \ubcf4\ub0b4\uac8c \ub429\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ubc29\uc2dd\uc73c\ub85c CSS\ub97c \ub3d9\uc801\uc73c\ub85c \ucd94\uac00\/\uc81c\uac70 \ud574\uc90c\uc73c\ub85c\uc368 \ub108\ubb34 \ub9ce\uc740 CSS \ucd94\uac00\ub85c \uc778\ud574 \uc2a4\ud0c0\uc77c\uc774 \ucda9\ub3cc\ud558\ub294 \uac83\uc744 \uc608\ubc29\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<p><b>\uc2e4\uc81c \uad6c\ud604 \ubbf8\ub9ac\ubcf4\uae30<\/b><\/p>\n<\/div>\n<div>\n<p>\uc5ec\uae30\uae4c\uc9c0 \uc124\uba85\ud55c \ub0b4\uc6a9\uc744 \ubc14\ud0d5\uc73c\ub85c \ub3d9\uc801\uc73c\ub85c \ud15c\ud50c\ub9bf, \ucee8\ud2b8\ub864\ub7ec, \ub2e4\uc774\ub809\ud2f0\ube0c, \uc11c\ube44\uc2a4, \ud544\ud130 \ub4f1\uc744 \ub85c\ub4dc\ud558\ub294 \ud504\ub85c\uc81d\ud2b8 \uc0d8\ud50c\uc744 \uc81c\uc791\ud574\ubcf4\uc558\uc2b5\ub2c8\ub2e4. \uc774 \ud504\ub85c\uc81d\ud2b8 \uc0d8\ud50c\uc740 \uc544\ub798 \ud504\ub85c\uc81d\ud2b8 \uc0d8\ud50c \ub2e4\uc6b4\ub85c\ub4dc \ubd80\ubd84\uc5d0\uc11c \ub2e4\uc6b4 \ubc1b\uc744 \uc218 \uc788\ub294 \ub9c1\ud06c\ub97c \uc5bb\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n<div>\n<\/div>\n<div>\n<p><span class=\"imageblock center\"><a href=\"http:\/\/programmingsummaries.tistory.com\/m\/post\/229\/slideshow?order=4\"><img decoding=\"async\" class=\"item_image able_slideshow\" src=\"http:\/\/i1.daumcdn.net\/thumb\/R750x0\/?fname=http%3A%2F%2Fcfile9.uf.tistory.com%2Fimage%2F2623C84B51ACB63C35FAF7\" alt=\"\uc774\ubbf8\uc9c0\" \/><\/a><\/span>\n<\/div>\n<div>\n<p>\uae30\ubcf8 \uacbd\ub85c\uc778 view1 path\ub85c \ub4e4\uc5b4\uac04 \ubaa8\uc2b5\uc785\ub2c8\ub2e4. CSS, \ucee8\ud2b8\ub864\ub7ec, \ud544\ud130, \ud15c\ud50c\ub9bf \ubaa8\ub450 \ub3d9\uc801\uc73c\ub85c \ub85c\ub4dc\ub418\uc5b4 \ubc18\uc601\ub41c \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<p><span class=\"imageblock center\"><a href=\"http:\/\/programmingsummaries.tistory.com\/m\/post\/229\/slideshow?order=5\"><img decoding=\"async\" class=\"item_image able_slideshow\" src=\"http:\/\/i1.daumcdn.net\/thumb\/R750x0\/?fname=http%3A%2F%2Fcfile25.uf.tistory.com%2Fimage%2F253D324B51ACB63D2867A1\" alt=\"\uc774\ubbf8\uc9c0\" \/><\/a><\/span>\n<\/div>\n<div>\n<p>view2 \uba54\ub274\ub97c \ub204\ub974\uba74 \uc5ed\uc2dc \ub9c8\ucc2c\uac00\uc9c0\ub85c \u00a0CSS, \ucee8\ud2b8\ub864\ub7ec, \ub2e4\uc774\ub809\ud2f0\ube0c, \ud15c\ud50c\ub9bf \ubaa8\ub450 \ub3d9\uc801\uc73c\ub85c \ub85c\ub4dc\ub418\uc5b4 \ubc18\uc601\ub41c \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uae30\uc874\uc758 CSS\ub294 \uc81c\uac70\ub418\uace0 \uc0c8\ub85c\uc6b4 CSS\ub9cc \ubc18\uc601\ub41c \uac83 \uc5ed\uc2dc \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<p><span class=\"imageblock center\"><a href=\"http:\/\/programmingsummaries.tistory.com\/m\/post\/229\/slideshow?order=6\"><img decoding=\"async\" class=\"item_image able_slideshow\" src=\"http:\/\/i1.daumcdn.net\/thumb\/R750x0\/?fname=http%3A%2F%2Fcfile30.uf.tistory.com%2Fimage%2F247BFD4B51ACB63E095FEF\" alt=\"\uc774\ubbf8\uc9c0\" \/><\/a><\/span>\n<\/div>\n<div>\n<p>grid \uba54\ub274\ub97c \ub204\ub974\uba74 \ub514\ud39c\ub358\uc2dc \uc124\uc815\ub41c pqGrid \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ub3d9\uc801\uc73c\ub85c \ub85c\ub4dc\ud558\uc5ec \uc2e4\ud589\ub418\ub294 \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<p><b>\ud504\ub85c\uc81d\ud2b8 \uc0d8\ud50c \ub2e4\uc6b4\ub85c\ub4dc \u2013 GitHub<\/b><\/p>\n<\/div>\n<div>\n<p>\uc9c0\uae08\uae4c\uc9c0 \uc124\uba85\ud55c \ub0b4\uc6a9\uc744 \ubc14\ud0d5\uc73c\ub85c \uc81c\uc791\ub41c \ud504\ub85c\uc81d\ud2b8 \uc0d8\ud50c\uc744 GitHub\uc5d0\uc11c \ubc1b\uc73c\uc2e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc9c1\uc811 \ubc1b\uc544\uc11c \uc218\uc815\ud558\uace0 \uc2e4\ud589\ud574\ubcf8\ub2e4\uba74 \uc804\uccb4\uc801\uc778 \uad6c\uc870\ub97c \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud558\ub294\ub370 \ub3c4\uc6c0\uc774 \ub420 \uac83\uc785\ub2c8\ub2e4.<\/p>\n<p><span class=\"imageblock\"><a href=\"http:\/\/programmingsummaries.tistory.com\/m\/post\/229\/slideshow?order=7\"><img decoding=\"async\" class=\"item_image able_slideshow\" src=\"http:\/\/i1.daumcdn.net\/thumb\/R750x0\/?fname=http%3A%2F%2Fcfile30.uf.tistory.com%2Fimage%2F265CF04151B0A34C11C452\" alt=\"\uc774\ubbf8\uc9c0\" \/><\/a><\/span><\/p>\n<p><b><a title=\"[https:\/\/github.com\/eu81273\/AngularJS-RequireJS-Sample-Project]\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.\" href=\"https:\/\/github.com\/eu81273\/AngularJS-RequireJS-Sample-Project\" target=\"_blank\">\ud504\ub85c\uc81d\ud2b8 \uc0d8\ud50c \ub2e4\uc6b4\ub85c\ub4dc<\/a><\/b><\/p>\n<div>\n<p><b>\uacb0\ub860<\/b><\/p>\n<\/div>\n<div>\n<p>\uc9c0\uae08\uae4c\uc9c0 AngularJS\ub97c \uae30\ubc18\uc73c\ub85c \ub300\uaddc\ubaa8 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \ub54c \uace0\ubbfc\ud558\uac8c \ub418\ub294 \ubaa8\ub4c8\ud654, \ub9ac\uc18c\uc2a4\uc758 \ub3d9\uc801\ub85c\ub529 \ub4f1\uc5d0 \ub300\ud574 \uc0b4\ud3b4\ubcf4\uc558\uc2b5\ub2c8\ub2e4. \ub610 \uc774\ub97c \ubc14\ud0d5\uc73c\ub85c \uac04\ub2e8\ud55c \uc0d8\ud50c \ud504\ub85c\uc81d\ud2b8\ub97c \uc791\uc131\ud588\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\uc55e\uc11c \ub9d0\uc500\ub4dc\ub9b0 \uac83\ucc98\ub7fc \uc774 \uae00\uc740 \ub300\uaddc\ubaa8 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0 \uc788\uc5b4 \uc815\ub2f5\uc744 \uc81c\uc2dc\ud558\ub294 \uae00\uc774 \uc544\ub2d9\ub2c8\ub2e4. route \ub97c \ub3d9\uc801\uc73c\ub85c \ucd94\uac00\ud558\ub294 \ubd80\ubd84\uc774\ub098, breadcrumb\uc744 \uad00\ub9ac\ud558\ub294 \ubd80\ubd84 \ub4f1 \uc2e4\uc81c \ub300\uaddc\ubaa8 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \ub54c \ud544\uc694\ud55c \ubd80\ubd84\ub4e4\uc774 \ub9ce\uc774 \ube60\uc838\uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \ubd80\uc871\ud558\ub098\ub9c8 \ub300\uaddc\ubaa8 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\ub294\ub370 \uc788\uc5b4 \uae30\uc900\uc810\uc740 \ub420 \uc218 \uc788\uc9c0 \uc54a\uc744\uae4c \uc0dd\uac01\ud574\ubd05\ub2c8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\ubd80\uc871\ud55c \uc124\uba85\uacfc \ubd80\uc2e4\ud55c \uc608\uc81c\uc600\uc9c0\ub9cc, \ub300\uaddc\ubaa8 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc744 \uc704\ud55c \uc548\ubaa9\uc744 \uc5bb\uc744 \uc218 \uc788\ub294 \uc2dc\uac04\uc774\uc5c8\uae30\ub97c \uae30\ub300\ud569\ub2c8\ub2e4. \ub2e4\uc74c \ud3ec\uc2a4\ud305\uc5d0\uc11c\ub294 \ub300\uaddc\ubaa8 \uc6f9 \uac1c\ubc1c\uc744 \uc704\ud574 \uc880\ub354 \uac1c\uc120\ub41c \ud615\ud0dc\uc758 seed project\ub97c \uc0b4\ud3b4\ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.\n<\/p><\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\uc885\uc885 \ud604\uc7ac \ud398\uc774\uc9c0\uc5d0\uc11c \uacbd\ub85c \ubcc0\ud654\uac00 \uc788\uc744\ub54c \uc774\ub97c \uac10\uc9c0\ud560 \ud544\uc694\uac00 \uc0dd\uae34\ub2e4.<br \/>\n$watch \ub97c \uc0ac\uc6a9\ud574\uc11c \uc5b4\ub5a4 \ubcc0\ud654\uac00 \uc0dd\uae30\ub294\uc9c0 \uac10\uc2dc\ud558\uace0 \uc788\ub2e4\uac00 \ubcc0\ud654\uac00 \uc0dd\uacbc\uc744 \ub54c \uc8fc\uc18c\uac12\uc744 \ubd84\uc11d\ud574\uc11c \ud2b9\uc815 \ucc98\ub9ac\ub97c \ud574\uc904 \uc218 \uc788\ub2e4.<\/p>\n<p>\uc0ac\uc2e4 AngularJS\uc5d0\uc11c \uc81c\uacf5\ud574\uc8fc\ub294 $routeParam \ub3c4 \uc874\uc7ac\ud558\ub294\ub370, $routeParam\uc758 \uacbd\uc6b0 $routeProvider \ub97c \uc0ac\uc6a9\ud560 \ub54c\ub9cc \uc811\uadfc\uc774 \uc6a9\uc774\ud558\uae30 \ub54c\ubb38\uc5d0 \uc0ac\uc6a9\uc5d0 \uc81c\ud55c\uc774 \ub9ce\ub2e4.<\/p>\n<p>\uc544\ub798\uc640 \uac19\uc740 \ub85c\uc9c1\uc744 \ud1b5\ud574 \ud574\uc2dc \ub370\uc774\ud130\uc758 \ubcc0\ud654\ub97c \uac10\uc9c0\ud558\uace0, \uc804\uc5ed\uac1d\uccb4\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uace0\uc11c\ub3c4 \ube44 AngularJS \uad00\ub828 \ub85c\uc9c1\ub4e4\uacfc \uac12\uc744 \uc8fc\uace0 \ubc1b\uc744 \uc218 \uc788\ub2e4.<\/p>\n<pre class=\"brush:js\">\/\/[\ud574\uc2dc \ub370\uc774\ud130 \ubcc0\ud654 \uc5ec\ubd80 \uac10\uc9c0]\n$scope.$watch(\n    function () {\n        return document.location.hash;\n    },\n    function (parameter) {\n\n        \/\/\ud574\uc2dc \ucd94\ucd9c\n        var _hash = parameter.split('?');\n\n        \/\/\ud30c\ub77c\uba54\ud130\uac00 \uc874\uc7ac\ud560 \uacbd\uc6b0,\n        if( _hash[1] ) {\n\n            \/\/\ud574\uc2dc \ud30c\ub77c\uba54\ud130 \uc81c\uac70\n            document.location.href = _hash[0];\n\n            \/\/\ud574\uc2dc \ud30c\ub77c\uba54\ud130\uc5d0\uc11c \ub8e8\ud2b8\uc640 \ud30c\ub77c\uba54\ud130 \ubd84\ub9ac\n            var _route = _hash[1].replace(\/route=([^&amp;]+).*\/, \"$1\");\n            var _param = _hash[1].replace(\/param=([^&amp;]+).*\/, \"$1\");\n\n            switch( _route ) {\n                case 'test':\n                    \/\/\uc5ec\uae30\ub294 \"http:\/\/\uc8fc\uc18c#\/\ud574\uc2dc?test=value\" \uc640 \uac19\uc740 \ud615\ud0dc\uc77c \ub54c \uc2e4\ud589\ub41c\ub2e4.\n                break;\n            }\n        }\n    }\n);<\/pre>\n<div>\n<\/div>\n<p>\uc704\uc758 \ub85c\uc9c1\uc744 \ud65c\uc6a9\ud558\uba74, \uae30\uc874 \ud574\uc2dc \uc774\ud6c4\uc5d0 ? \ub97c \ubd99\uc774\uace0 \ub2e4\ub978 \ud30c\ub77c\uba54\ud130\ub97c \ucd94\uac00\ud574\ub3c4 \uac10\uc9c0\uac00 \uac00\ub2a5\ud574\uc9c4\ub2e4.<\/p>\n<p>&nbsp;<\/p>\n<p>AngularJS\ub97c \ud65c\uc6a9\ud574\uc11c \uc6f9\uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \ub54c \uac00\uc7a5 \ub9ce\uc774 \uc0ac\uc6a9\ud558\uac8c \ub418\ub294 \ub2e4\uc774\ub809\ud2f0\ube0c \uc911 \ud558\ub098\uac00 ng-repeat \uc77c \uac83\uc774\ub2e4.<br \/>\n\uac04\ub2e8\ud558\uac8c \ubc30\uc5f4 \uc548\uc758 \uc694\uc18c\ub4e4\uc744 \uc54c\uc544\uc11c \ucd9c\ub825\ud574\uc904 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0 \ud65c\uc6a9\ub3c4\uac00 \ub192\ub2e4.<\/p>\n<p>\ud558\uc9c0\ub9cc \ub2e8\uc21c\ud55c \uc0ac\uc6a9\ubc95\ub9cc \uc219\uc9c0\ud55c \uc0c1\ud0dc\uc5d0\uc11c ng-repeat\uc744 \uc4f0\uac8c \ub418\uba74, \ubcf5\uc7a1\ud55c \ucf00\uc774\uc2a4\ub97c \ub9cc\ub0ac\uc744 \ub54c \ub9ce\uc740 \ud55c\uacc4\ub97c \ub290\ub07c\uac8c \ub41c\ub2e4.<br \/>\n<a title=\"[http:\/\/docs.angularjs.org\/api\/ng.directive:ngRepeat]\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.\" href=\"http:\/\/docs.angularjs.org\/api\/ng.directive:ngRepeat\" target=\"_blank\">AngularJS \uc0ac\uc774\ud2b8\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 ng-repeat \uc5d0 \ub300\ud55c \uc124\uba85<\/a>\uc744 \uc0b4\ud3b4\ubcf4\uba74, $index, $first \ub4f1 \ub2e4\uc18c \ud2b9\ubcc4\ud55c \uc18d\uc131\ub4e4\uc774 \uc788\ub294\ub370 \uc774 \ud2b9\ubcc4\ud55c \uc18d\uc131\ub4e4\uc744 \uc0ac\uc6a9\ud558\uba74 \uc774\ub7ec\ud55c \ud55c\uacc4\ub97c \uc0c1\ub2f9\ubd80\ubd84 \ud574\uc18c\ud560 \uc218 \uc788\ub2e4.<\/p>\n<div>\n<p><b>$index<\/b> \u2013 {number} \u2013 \ud604\uc7ac \ubc18\ubcf5 \uc694\uc18c\uc758 \uc624\ud504\uc14b (0\ubd80\ud130 length-1\uae4c\uc9c0)\n<\/div>\n<div>\n<p><b>$first<\/b> \u2013 {boolean} \u2013 \ud604\uc7ac \ubc18\ubcf5 \uc694\uc18c\uac00 \uccab\ubc88\uc9f8 \uc694\uc18c\uc774\uba74 true\n<\/div>\n<div>\n<p><b>$middle<\/b> \u2013 {boolean} \u2013 \ud604\uc7ac \ubc18\ubcf5 \uc694\uc18c\uac00 \ucc98\uc74c\ub3c4 \ub05d\ub3c4 \uc544\ub2c8\uba74 true\n<\/div>\n<div>\n<p><b>$last<\/b> \u2013 {boolean} \u2013 \ud604\uc7ac \ubc18\ubcf5 \uc694\uc18c\uac00 \ub9c8\uc9c0\ub9c9 \uc694\uc18c\uc774\uba74 true\n<\/div>\n<div>\n<\/div>\n<p>\uc544\ub798\uc640 \uac19\uc740 \uc870\uac74\uc744 \uac00\uc9c4 \ub808\uc774\uc544\uc6c3\uc744 \uc0dd\uac01\ud574\ubcf4\uc790. ng-repeat \uc744 \ud65c\uc6a9\ud574\uc11c \uad6c\ud604\ud558\ub824\uba74 \uc5b4\ub5bb\uac8c \ud574\uc57c\ud560\uae4c?<\/p>\n<div>\n<p>1. TH \ud0dc\uadf8\ub97c \ud65c\uc6a9\ud574\uc11c \ud14c\uc774\ube14 \ud5e4\ub4dc\uac00 \uc67c\ud3b8\uc5d0 \ubcf4\uc5ec\uc57c \ud55c\ub2e4.<br \/>\n2. \uc785\ub825 \uc694\uc18c\ub294 5\uac1c\uae4c\uc9c0 \uac00\ub2a5\ud558\uace0 \ub9c8\uc9c0\ub9c9 \uc785\ub825 \uc694\uc18c\uc5d0\ub294 \ucd94\uac00 \ubc84\ud2bc\uc774 \ubcf4\uc5ec\uc57c \ud55c\ub2e4.<br \/>\n3. 5\uac1c\uae4c\uc9c0 \uc785\ub825\uc694\uc18c\uac00 \ucd94\uac00\ub418\uba74 \ucd94\uac00 \ubc84\ud2bc\uc740 \uac10\ucdb0\uc838\uc57c \ud55c\ub2e4.<br \/>\n4. \uc785\ub825 \uc694\uc18c\ub294 \uc0ad\uc81c \ubc84\ud2bc\uc73c\ub85c \uc0ad\uc81c\ub420 \uc218 \uc788\uace0, \ub9c8\uc9c0\ub9c9 \uc694\uc18c\ub294 \uc0ad\uc81c\ub418\uba74 \uc548\ub418\uace0 \ucd08\uae30\ud654 \ub418\uc5b4\uc57c \ud55c\ub2e4.<br \/>\n5. \uac01 \uc785\ub825 \uc694\uc18c\uc5d0\uc11c \uac80\uc0c9 \ubc84\ud2bc\uc744 \ub204\ub974\uba74 \ud574\ub2f9 \uc694\uc18c\uc758 \ub0b4\uc6a9\uc774 \ucd9c\ub825\ub418\uc5b4\uc57c \ud55c\ub2e4.\n<\/div>\n<p>1\ubc88\ubd80\ud130 \uc27d\uc9c0 \uc54a\uc544 \ubcf4\uc778\ub2e4.<br \/>\nTH\ub294 \ud558\ub098\ub9cc \ub098\uc640\uc57c \ud558\ub294\ub370 TR\uc744 \ubc18\ubcf5\uc2dc\ud0a4\uba74 TH\uac00 \uc5ec\ub7ec\uac1c \uc0dd\uaca8\ubc84\ub9ac\uac8c \ub41c\ub2e4. \uc5b4\ub5bb\uac8c \ucc98\ub9ac\ud574\uc57c \ud560\uae4c?<br \/>\n$first \uc18d\uc131\uc744 \ud65c\uc6a9\ud558\uba74 \uc0dd\uac01\ubcf4\ub2e4 \uac04\ub2e8\ud558\uac8c \ucc98\ub9ac\ud574 \uc904 \uc218 \uc788\ub2e4.<\/p>\n<pre class=\"brush:html\">&lt;tr data-ng-repeat=\"row in list\"&gt;\n    &lt;th rowspan=\"{{list.length}}\" data-ng-show=\"$first\"&gt;\ud14c\uc774\ube14 \ud5e4\ub4dc&lt;\/th&gt;<\/pre>\n<p>th \ud0dc\uadf8\uc758 rowspan \uc18d\uc131\uc740 list\uc758 \uae38\uc774\ub85c \uc7a1\uc544\uc8fc\uace0, \uc5ec\ub7ec \uac1c\uc758 th\uac00 \uc0dd\uc131\ub418\uc5b4\ub3c4 \uccab\ubc88\uc9f8 th\ub9cc \ubcf4\uc774\ub3c4\ub85d data-ng-show \ub97c \ud65c\uc6a9\ud558\uba74 \ub41c\ub2e4. $first \uc18d\uc131\uc774 \uc5c6\uc5c8\ub2e4\uba74 \ud6e8\uc52c \ubcf5\uc7a1\ud574\uc9c8 \uc218 \uc788\ub294 \ubd80\ubd84\uc744 \uc27d\uac8c \ucc98\ub9ac\ud560 \uc218 \uc788\uc5c8\ub2e4.<\/p>\n<p>2\ubc88\uacfc 3\ubc88\uc740 \uc5b4\ub5bb\uac8c \ucc98\ub9ac\ud574\uc57c \ud560\uae4c? \uc694\uc18c\ub97c \ucd94\uac00\ud560 \ub54c 5\uac1c\uae4c\uc9c0\ub9cc \ucd94\uac00\ub418\uc5b4\uc57c \ud558\uace0 \ub9c8\uc9c0\ub9c9 \uc694\uc18c\uc5d0\ub9cc \ucd94\uac00 \ubc84\ud2bc\uc774 \ubcf4\uc5ec\uc57c\ud55c\ub2e4.<br \/>\n\uc544\ub798\uc640 \uac19\uc774 $last \uc18d\uc131\uacfc $index \uc18d\uc131\uc744 \ud65c\uc6a9\ud558\uba74 \uc27d\uac8c \uad6c\ud604\ud560 \uc218 \uc788\ub2e4.<\/p>\n<pre class=\"brush:html\">&lt;a href=\"javascript:;\" data-ng-click=\"clickListener('btn_addrow')\" data-ng-show=\"$last &amp;&amp; ($index &lt; 4)\"&gt;\ud589 \ucd94\uac00&lt;\/a&gt;<\/pre>\n<p>\uac01 \ubc18\ubcf5 \ud589\ub9c8\ub2e4 \ucd94\uac00 \ubc84\ud2bc\uc774 \uc2e4\uc81c\ub85c\ub294 \uc874\uc7ac\ud558\uaca0\uc9c0\ub9cc, data-ng-show\ub97c \ud65c\uc6a9\ud574 $last \uc989, \ub9c8\uc9c0\ub9c9\uc778 \uacbd\uc6b0\uc640, $index &lt; 4 \uc778 \uacbd\uc6b0\uc5d0\ub9cc \ud589 \ucd94\uac00 \ubc84\ud2bc\uc774 \ub098\ud0c0\ub098\ub294 \uac83\uc774\ub2e4.<\/p>\n<p>4\ubc88\uc740 \ube44\uad50\uc801 \uc26c\uc6cc\ubcf4\uc778\ub2e4. \ud558\uc9c0\ub9cc $index \ub97c \ubaa8\ub978\ub2e4\uba74 \ud55c\ucc38\uc740 \ub354 \uc5b4\ub835\uac8c \ucc98\ub9ac\ud574\uc57c \ud55c\ub2e4.<br \/>\n\uba3c\uc800 \uc0ad\uc81c \ubc84\ud2bc\uc744 \ub20c\ub800\uc744 \ub54c \ud574\ub2f9 \uc694\uc18c\uc758 $index \ub97c \ud30c\ub77c\uba54\ud130\ub85c \ubcf4\ub0b8\ub2e4. $index\ub97c \ud1b5\ud574 \uc2e4\uc81c \ubc30\uc5f4\uc5d0\uc11c\uc758 \uc704\uce58\ub97c \uc54c \uc218 \uc788\uac8c \ub54c\ubb38\uc5d0 splice\ub97c \ud1b5\ud574 \uac04\ub2e8\ud558\uac8c \uc0ad\uc81c\ud574\uc904 \uc218 \uc788\ub2e4.<\/p>\n<pre class=\"brush:html\">&lt;!-- HTML --&gt;\n&lt;a href=\"javascript:;\" data-ng-click=\"clickListener('btn_deleterow', $index)\"&gt;\uc0ad\uc81c&lt;\/a&gt;\n\n\n\/\/JavaScript\nif( $scope.list.length &gt; 1 ) {\n    $scope.list.splice($index, 1);\n}\nelse {\n    $scope.list = [{ rowNm: \"\", rowLabel : \"\uc785\ub825\"}];\n}<\/pre>\n<p>5\ubc88\uc774 \uac00\uc7a5 \uc27d\ub2e4. \ud604\uc7ac \uc694\uc18c\ub97c \uadf8\ub0e5 \ud30c\ub77c\uba54\ud130\ub85c \ub118\uaca8\ubc84\ub9ac\uace0 \uac70\uae30\uc5d0\uc11c \uac12\uc744 \ucd9c\ub825\ud558\uac8c \ucc98\ub9ac\ud558\uba74 \ub418\uae30 \ub54c\ubb38\uc774\ub2e4.<\/p>\n<p><b>\uacb0\ub860<\/b><\/p>\n<p>\uc9c0\uae08\uae4c\uc9c0 \uc0b4\ud3b4\ubcf8 \ub0b4\uc6a9\uc744 jsFiddle \ub85c \ub9cc\ub4e4\uc5b4\ubcf4\uc558\ub2e4.\u00a0\uc9c1\uc811 \ud14c\uc2a4\ud2b8\ud574\ubcf4\uace0 \uc218\uc815\ud574\ubcf4\uba74\uc11c ng-repeat \uacfc \ud2b9\ubcc4\ud55c \uc18d\uc131\ub4e4\uc744 \uc5b4\ub5bb\uac8c \ud65c\uc6a9\ud560 \uc218 \uc788\ub294\uc9c0\uc5d0 \ub300\ud55c \uc778\uc0ac\uc774\ud2b8\ub97c \uc870\uae08\uc774\ub77c\ub3c4 \uc5bb\uae30\ub97c \uae30\ub300\ud574\ubcf8\ub2e4.<\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/jsfiddle.net\/eu81273\/QdFwr\/2\/embedded\/result,html,js\/\" width=\"100%\" height=\"400\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>\uc774\uc804\uc5d0 Directive\uc5d0 \ub300\ud574 \ud3ec\uc2a4\ud305\ud588\uc744 \ub54c, Directive\uc758 \uc7ac\uadc0\ud638\ucd9c\uc744 \uc751\uc6a9\ud574\uc11c \ub9cc\ub4e0 <a class=\"tx-link\" href=\"http:\/\/programmingsummaries.tistory.com\/139\" target=\"_blank\">\uac04\ub2e8\ud55c \ud2b8\ub9ac \uba54\ub274 \uc18c\uc2a4\ub97c \uacf5\uac1c<\/a>\ud588\uc5c8\ub2e4.<\/p>\n<p>\uc774\ub54c\uc758 \uc18c\uc2a4\ub294 Directive\ub97c \ud65c\uc6a9\ud558\uae30\ub294 \ud588\uc9c0\ub9cc, \ubd88\ud544\uc694\ud55c \ubd80\ubd84\uc774 \ub9ce\uc558\uace0, jqLite\uc5d0 \ub300\ud55c \uc758\uc874\uc131\uc774 \ub192\uc558\uae30 \ub54c\ubb38\uc5d0 \ub2e4\uc18c \uc544\uc26c\uc6b4 \ubd80\ubd84\uc774 \uc788\uc5c8\ub2e4. \ud558\uc9c0\ub9cc \uc774\ubc88\uc5d0\ub294 AngularJS\uc758 \ud2b9\uc131\uc744 \ucd5c\ub300\ud55c \ud65c\uc6a9\ud558\uc600\uace0, AngularJS \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc27d\uac8c \ud65c\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ubaa8\ub4c8\ud654\ud558\uc5ec GitHub\uc744 \ud1b5\ud574 \uacf5\uac1c\ud588\ub2e4. (\ub0b4\uce5c\uae40\uc5d0\u00a0<a href=\"http:\/\/ngmodules.org\/\" target=\"_blank\">http:\/\/ngmodules.org\/<\/a>\uc5d0\ub3c4 \uc0b4\uc9dd \ucd94\uac00\ud588\ub2e4^^)<\/p>\n<p>\uae30\uc874\uc5d0\ub294 \ub2e4\uc774\ub809\ud2f0\ube0c \ub450 \uac1c\ub97c \ud65c\uc6a9\ud574\uc11c \uad6c\ud604\ud588\uc5c8\ub294\ub370, \uc774\ubc88\uc5d0\ub294 \ud558\ub098\uc758 \ub2e4\uc774\ub809\ud2f0\ube0c\ub85c \ucc98\ub9ac\ud588\uace0 \uc18c\uc2a4\ucf54\ub4dc\ub3c4 90\uc904\uc5d0 \ubd88\uacfc\ud560 \uc815\ub3c4\ub85c \uac04\uacb0\ud558\ub2e4. \uc6a9\ub7c9\ub3c4 closure compiler\ub85c minified\ub41c \ubc84\uc804\uc758 \uacbd\uc6b0 1.36kb \uc815\ub3c4\uc774\uace0, \uac1c\ubc1c\uc6a9 \uc18c\uc2a4\ub3c4 2.5kb \uc815\ub3c4\ub85c \uc791\ub2e4.<\/p>\n<p><b><a title=\"[https:\/\/github.com\/eu81273\/angular.treeview]\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.\" href=\"https:\/\/github.com\/eu81273\/angular.treeview\" target=\"_blank\">Angular Treeview &#8211; github.com<\/a><\/b><br \/>\n<b><a title=\"[http:\/\/jsfiddle.net\/eu81273\/8LWUc\/33\/]\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.\" href=\"http:\/\/jsfiddle.net\/eu81273\/8LWUc\/33\/\" target=\"_blank\">jsFiddle<\/a><\/b><\/p>\n<p>\uad6c\ud604 \ucd08\uae30 \ubc84\uc804\uc758 \uacbd\uc6b0, \uac04\ub2e8\ud788 \uc18c\uc2a4\ub97c \ubd84\uc11d\ud574\ubcf4\uba74 AngularJS \uc785\ubb38\uc790\ub4e4\uc5d0\uac8c \uc0c1\ub2f9\ud55c \ub3c4\uc6c0\uc774 \ub420\uac70\ub77c \uc0dd\uac01\ub418\uc5b4 \uc774\ubc88\uc5d0 \uac1c\ubc1c\ud55c Angular Treeview \uc758 \ub85c\uc9c1\uc5d0 \ub300\ud574 \uc124\uba85\ud574 \ubcf4\uace0\uc790 \ud55c\ub2e4.<\/p>\n<p><b>\uc2e4\uc81c \uc0ac\uc6a9\uc608<\/b><\/p>\n<p>\uba3c\uc800 jsFiddle\uc744 \ud1b5\ud574 \uac04\ub2e8\ud558\uac8c \uc2e4\uc81c \ub3d9\uc791\uc744 \uc0b4\ud3b4\ubcf4\uc790.<\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/jsfiddle.net\/eu81273\/8LWUc\/33\/embedded\/result,html,js,css\/\" width=\"100%\" height=\"400\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>\uae30\ubcf8\uc801\uc778 \ud2b8\ub9ac\ubdf0\uc758 \uae30\ub2a5\uc744 \uc0b4\ud3b4\ubcfc \uc218 \uc788\ub2e4. \ud14c\uc2a4\ud2b8\uc6a9 JSON \ub370\uc774\ud130\ub294 BBC \ubc29\uc1a1\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \uba54\ub274 \uad6c\uc870\ub97c \uac00\uc838\uc654\ub2e4.<br \/>\n\ub2e4\ub978 \uc77c\ubc18\uc801\uc778 \ud2b8\ub9ac\ubdf0\uc640 \ub9c8\ucc2c\uac00\uc9c0\ub85c \uc544\uc774\ucf58 \ubd80\ubd84\uc744 \ud074\ub9ad\ud558\uba74 \ud2b8\ub9ac\uac00 \ud3bc\uccd0\uc9c0\uac70\ub098 \uc811\ud788\uace0, \uae00\uc528\ubd80\ubd84\uc744 \ud074\ub9ad\ud558\uba74 \uc120\ud0dd\ub41c\ub2e4. \uc120\ud0dd\ub41c \ub178\ub4dc\uc5d0 \ub300\ud55c \uc815\ubcf4\ub294 \uc0c1\ub2e8\uc758 Selected Node \ub780\uc5d0 \ud45c\uc2dc\ub418\ub3c4\ub85d \uc608\uc81c\ub97c \ub9cc\ub4e4\uc5b4\ubcf4\uc558\ub2e4.<\/p>\n<p><b>\uc801\uc6a9 \ubc29\ubc95<\/b><\/p>\n<pre class=\"brush:html\">&lt;div\n  data-angular-treeview\n  data-tree-model=\"treedata\"\n  data-node-id=\"id\"\n  data-node-label=\"label\"\n  data-node-children=\"children\" &gt;\n&lt;\/div&gt;<\/pre>\n<p>\uc0ac\uc6a9 \ubc29\ubc95\uc740 DIV \ub4f1\uc758 \ud0dc\uadf8\uc5d0 \uc18d\uc131\uba85\uc73c\ub85c data-angular-treeview \ub77c\uace0 \uc368\uc90c\uc73c\ub85c\uc368 \uc778\uc2dd\ud55c\ub2e4. tree-model \uc5d0\ub294 scope \uc0c1\uc5d0 \ud2b8\ub9ac \ubcc0\uc218\uba85\uc744 \uc9c0\uc815\ud574\uc900\ub2e4. \uc5ec\uae30\uc5d0\uc11c\ub294 $scope.treedata \ubcc0\uc218\uc5d0 \ud2b8\ub9ac \uad6c\uc870\uac00 \ub4e4\uc5b4\uc788\ub2e4\uace0 \uc9c0\uc815\ud55c \uac83\uc774\ub2e4. id\ub294 \ud574\ub2f9 \ub178\ub4dc\uc758 id\uc778\ub370, \ud604\uc7ac\uae4c\uc9c0\ub294 \uc0ac\uc2e4\uc0c1 \ud06c\uac8c \ud544\uc694\uac00 \uc5c6\ub294 \uc18d\uc131\uc774\ub2e4. label\uc740 \uc2e4\uc81c\ub85c \ud2b8\ub9ac\ubdf0\uc5d0 \ud45c\uc2dc\ub418\ub294 \ub0b4\uc6a9\uc774\uace0, children\uc740 \uc790\uc2dd \ubc30\uc5f4\uc774 \ub4e4\uc774 \uc788\ub294 \uc18d\uc131\uba85\uc774\ub2e4.<\/p>\n<p>\uc2e4\uc81c $scope.treedata\uc5d0\ub294 \uc544\ub798\uc640 \uac19\uc740 \ud615\ud0dc\ub85c \ub370\uc774\ud130\uac00 \ub4e4\uc5b4\uac00 \uc788\uc744 \uac83\uc774\ub2e4.<\/p>\n<pre class=\"brush:js\">$scope.treedata =\n[\n    { label : \"User\", id : \"role1\", children : [\n        { label : \"subUser1\", id : \"role11\", children : [] },\n        { label : \"subUser2\", id : \"role12\", children : [\n            { label : \"subUser2-1\", id : \"role121\", children : [\n                { label : \"subUser2-1-1\", id : \"role1211\", children : [] },\n                { label : \"subUser2-1-2\", id : \"role1212\", children : [] }\n            ]}\n        ]}\n    ]},\n    { label : \"Admin\", id : \"role2\", children : [] },\n    { label : \"Guest\", id : \"role3\", children : [] }\n];<\/pre>\n<p>\ud2b8\ub9ac\ubdf0\ub97c \uc0ac\uc6a9\ud558\ub824\uba74 \ud604\uc7ac\uc758 Angular Module\uc5d0 \uc544\ub798\uc640 \uac19\uc774 \uc778\uc81d\uc158\uc744 \ud574\uc8fc\uc5b4\uc57c \ud55c\ub2e4. \ubb3c\ub860 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud30c\uc77c\uacfc \uc2a4\ud0c0\uc77c\uc2dc\ud2b8 \ud30c\uc77c\uc744 HTML \ud398\uc774\uc9c0 \uc0c1\uc5d0\uc11c \ud3ec\ud568\uc2dc\ucf1c\uc8fc\ub294 \uac83\uc740 \uae30\ubcf8\uc774\ub2e4.<\/p>\n<pre class=\"brush:js\">angular.module('myApp', ['angularTreeview']);<\/pre>\n<p>\ud2b8\ub9ac \uba54\ub274\uc758 \uc544\uc774\ud15c\uc744 \ud074\ub9ad\ud588\uc744 \ub54c\ub294 \uc120\ud0dd\ub41c \ub178\ub4dc\uac00 $scope.currentNode \uc5d0 \uc800\uc7a5\ub41c\ub2e4. \ub530\ub77c\uc11c \ud074\ub9ad\ud55c \uc2dc\uc810\uc744 \ucee8\ud2b8\ub864\ub7ec\uc5d0\uc11c \uc778\uc9c0\ud558\uae30 \uc704\ud574\uc11c\ub294 $watch \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud560 \uc218\ub3c4 \uc788\uc744 \uac83\uc774\uace0, \uc544\uc608 \ud2b8\ub9ac\ubdf0 \uc18c\uc2a4\ub97c \ucee4\uc2a4\ud130\ub9c8\uc774\uc988\ud574\uc11c \uc6d0\ud558\ub294 \uad6c\ud604\uc744 \ub123\uc5b4\uc904 \uc218\ub3c4 \uc788\uc744 \uac83\uc774\ub2e4. \uc544\ub798\ub294 $watch \uba54\uc11c\ub4dc\ub97c \ud65c\uc6a9\ud574\uc11c \ucee8\ud2b8\ub864\ub7ec\uc5d0\uc11c \ud074\ub9ad\ud55c \uc2dc\uc810\uc5d0 \uc120\ud0dd\ub41c \ub178\ub4dc\uc758 \uc815\ubcf4\ub97c \ucf58\uc194 \ub85c\uadf8\ub85c \ubfcc\ub824\uc8fc\ub294 \ub85c\uc9c1\uc774\ub2e4.<\/p>\n<pre class=\"brush:js\">$scope.$watch( 'currentNode', function( newObj, oldObj ) {\n    if( $scope.currentNode &amp;&amp; angular.isObject($scope.currentNode) ) {\n        console.log( 'Node Selected!!' );\n        console.log( $scope.currentNode );\n    }\n}, false);<\/pre>\n<p><b>\ub85c\uc9c1 \ubd84\uc11d<\/b><\/p>\n<p>\uacf5\uac1c\ub41c \uc18c\uc2a4\ub97c \ud55c\ubc88 \uc0b4\ud3b4\ubcf4\uc790. \uc0ac\uc6a9\ub41c \uc8fc\uc694 \uac1c\ub150\uc740 AngularJS\uc758 module\uacfc directive, \uc7ac\uadc0\ud638\ucd9c\ub85c \ub098\ub20c \uc218 \uc788\ub2e4. module\uc740 \ub2e4\ub978 AngularJS Application\uc5d0 \uc8fc\uc785\uc744 \uc27d\uac8c\ud558\uae30 \uc704\ud574 \uac10\uc30c\uace0, \ub300\ubd80\ubd84\uc758 \ub85c\uc9c1\uc740 AngularJS \uc790\uccb4\uc801\uc778 Directive\uc640 Custom Directive \ub4f1\uc73c\ub85c \uc9dc\uc5ec\uc838 \uc788\ub2e4.<\/p>\n<pre class=\"brush:js\">(function ( angular ) {\n\t'use strict';\n\n\t\/\/AngularJS \ubaa8\ub4c8\n\tangular.module( 'angularTreeview', [] ).directive( 'treeModel', function( $compile ) {\n\t\treturn {\n\t\t\trestrict: 'A', \/\/\ub2e4\uc774\ub809\ud2f0\ube0c\ub294 \uc18d\uc131\uc73c\ub85c \uc778\uc9c0\ud55c\ub2e4.\n\t\t\tlink: function ( scope, element, attrs ) {\n\t\t\t\t\/\/\ud2b8\ub9ac \ubaa8\ub378\n\t\t\t\tvar treeModel = attrs.treeModel;\n\n\t\t\t\t\/\/\ub178\ub4dc \uc544\uc774\ub514\n\t\t\t\tvar nodeId = attrs.nodeId || 'id';\n\n\t\t\t\t\/\/\ub178\ub4dc \ub77c\ubca8\n\t\t\t\tvar nodeLabel = attrs.nodeLabel || 'label';\n\n\t\t\t\t\/\/\uc790\uc2dd \ub178\ub4dc\ub4e4\n\t\t\t\tvar nodeChildren = attrs.nodeChildren || 'children';\n\n\t\t\t\t\/\/\ud2b8\ub9ac \ud15c\ud50c\ub9bf. \uc774 \ud15c\ud50c\ub9bf \ub0b4\uc5d0 data-tree-model \ub2e4\uc774\ub809\ud2f0\ube0c\uac00 \ub2e4\uc2dc \uc874\uc7ac\ud558\ub294 \ud615\ud0dc\ub85c \uc7ac\uadc0\ud638\ucd9c\uc774 \uad6c\ud604\ub41c\ub2e4.\n\t\t\t\tvar template =\n\t\t\t\t\t'&lt;ul&gt;' +\n\t\t\t\t\t\t'&lt;li data-ng-repeat=\"node in ' + treeModel + '\"&gt;' +\n\t\t\t\t\t\t\t'&lt;i class=\"collapsed\" data-ng-show=\"node.' + nodeChildren + '.length &amp;&amp; node.collapsed\" data-ng-click=\"selectNodeHead(node)\"&gt;&lt;\/i&gt;' +\n\t\t\t\t\t\t\t'&lt;i class=\"expanded\" data-ng-show=\"node.' + nodeChildren + '.length &amp;&amp; !node.collapsed\" data-ng-click=\"selectNodeHead(nodet)\"&gt;&lt;\/i&gt;' +\n\t\t\t\t\t\t\t'&lt;i class=\"normal\" data-ng-hide=\"node.' + nodeChildren + '.length\"&gt;&lt;\/i&gt; ' +\n\t\t\t\t\t\t\t'&lt;span data-ng-class=\"node.selected\" data-ng-click=\"selectNodeLabel(node)\"&gt;{{node.' + nodeLabel + '}}&lt;\/span&gt;' +\n\t\t\t\t\t\t\t'&lt;div data-ng-hide=\"node.collapsed\" data-tree-model=\"node.' + nodeChildren + '\" data-node-id=' + nodeId + ' data-node-label=' + nodeLabel + ' data-node-children=' + nodeChildren + '&gt;&lt;\/div&gt;' +\n\t\t\t\t\t\t'&lt;\/li&gt;' +\n\t\t\t\t\t'&lt;\/ul&gt;';\n\n\n\t\t\t\t\/\/\ud2b8\ub9ac \ubaa8\ub378\uba85\uc744 HTML \ud0dc\uadf8\uc758 \uc18d\uc131\uc73c\ub85c \uc785\ub825\ud588\ub294\uc9c0 \uccb4\ud06c\n\t\t\t\tif( treeModel &amp;&amp; treeModel.length ) {\n\n\t\t\t\t\t\/\/data-angular-treeview \uc18d\uc131\uc774 \uc788\uc73c\uba74 \ub8e8\ud2b8 \ub178\ub4dc\uc774\uace0,\n\t\t\t\t\t\/\/\ub8e8\ud2b8 \ub178\ub4dc\uc77c \ub54c\uc5d0\ub9cc \ud074\ub9ad \uc774\ubca4\ud2b8 \ucc98\ub9ac \uba54\uc11c\ub4dc\ub97c \uc120\uc5b8\ud55c\ub2e4.\n\t\t\t\t\tif( attrs.angularTreeview ) {\n\n\t\t\t\t\t\t\/\/\ub178\ub4dc\uc758 \uc544\uc774\ucf58 \ubd80\ubd84(\ub178\ub4dc \ud5e4\ub4dc)\uc744 \ud074\ub9ad\ud588\uc744 \ub54c,\n\t\t\t\t\t\tscope.selectNodeHead = scope.selectNodeHead || function( selectedNode ){\n\n\t\t\t\t\t\t\t\/\/collapsed\uac12\uc744 \ud1a0\uae00\ud574 \uc900\ub2e4.\n\t\t\t\t\t\t\tselectedNode.collapsed = !selectedNode.collapsed;\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\/\/\ub178\ub4dc\uc758 \uc774\ub984 \ubd80\ubd84(\ub178\ub4dc \ub77c\ubca8)\uc744 \ud074\ub9ad\ud588\uc744 \ub54c\n\t\t\t\t\t\tscope.selectNodeLabel = scope.selectNodeLabel || function( selectedNode ){\n\n\t\t\t\t\t\t\t\/\/\uae30\uc874\uc5d0 \uc120\ud0dd\ub418\uc5b4 \uc788\ub358 \ub178\ub4dc\uc758 \ud558\uc774\ub77c\uc774\ud305 \ud074\ub798\uc2a4\ub97c \uc81c\uac70\ud574\uc8fc\uace0,\n\t\t\t\t\t\t\tif( scope.currentNode &amp;&amp; scope.currentNode.selected ) {\n\t\t\t\t\t\t\t\tscope.currentNode.selected = undefined;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\/\/\ud604\uc7ac \uc120\ud0dd\ud55c \ub178\ub4dc\uc5d0 \ud558\uc774\ub77c\uc774\ud305 \ud074\ub798\uc2a4\ub97c \uc124\uc815\ud574 \uc900\ub2e4.\n\t\t\t\t\t\t\tselectedNode.selected = 'selected'\n\n\t\t\t\t\t\t\t\/\/\ud604\uc7ac \uc120\ud0dd\ud55c \ub178\ub4dc\ub97c $scope.currentNode \uc5d0 \ub123\uc5b4\uc900\ub2e4.\n\t\t\t\t\t\t\tscope.currentNode = selectedNode;\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\n\t\t\t\t\t\/\/\ud15c\ud50c\ub9bf\uc744 \ub80c\ub354\ub9c1\ud574\uc11c \ubfcc\ub824\uc900\ub2e4.\n\t\t\t\t\telement.html(null).append( $compile( template )( scope ) );\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t});\n})( angular );\n<\/pre>\n<div>\n<\/div>\n<p>&nbsp;<\/p>\n<div>\n<p>\uc7ac\uadc0\ud638\ucd9c\uc758 \ud575\uc2ec\uc740 \uc758\uc678\ub85c template \ubcc0\uc218\uc5d0 \uc788\ub2e4. \uc774 \ubcc0\uc218\uc5d0\ub294 \ud654\uba74\uc5d0 \ubfcc\ub824\uc904 HTML \ud15c\ud50c\ub9bf\uc774 \ub2f4\uaca8\uc838 \uc788\ub294\ub370, \uc8fc\uc11d\uc5d0\ub3c4 \uc124\uba85\ud55c \uac83\uacfc \uac19\uc774 \uc774 \ud15c\ud50c\ub9bf \uc548\uc5d0 \ub2e4\uc2dc directive\ub97c \uc0ac\uc6a9\ud574\uc11c \uc7ac\uadc0\ud638\ucd9c\uc744 \uad6c\ud604\ud558\uace0 \uc788\ub2e4. \ubb3c\ub860 \ubaa8\ub4e0 \uc790\uc2dd \uc694\uc18c\uac00 \ub2e4 \ud45c\ud604\ub418\uace0 \ub098\uba74 \ub354\uc774\uc0c1 \uc7ac\uadc0\ud638\ucd9c\uc774 \uc77c\uc5b4\ub098\uc9c0 \uc54a\ub294\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<p>\ud074\ub9ad \uc774\ubca4\ud2b8\uc5d0 \ub300\ud574 \ucc98\ub9ac\ud558\ub294 \uba54\uc11c\ub4dc \ub4f1\uc740 \ubc18\ubcf5\ud574\uc11c \uc120\uc5b8\ud560 \ud544\uc694\uac00 \uc5c6\uae30 \ub54c\ubb38\uc5d0 \ub8e8\ud2b8 \ub178\ub4dc\ub97c \uc0dd\uc131\ud560 \ub54c\ub9cc \ud55c\ubc88 \uc120\uc5b8\ub41c\ub2e4.\u00a0\ud2b8\ub9ac\uac00 \ud3bc\uccd0\uc9c0\uace0 \uc0ac\ub77c\uc9c0\ub294 \uac83 \ubaa8\ub450 AngularJS\uc5d0\uc11c \uc790\uccb4\uc801\uc73c\ub85c \uc81c\uacf5\ud574\uc8fc\ub294 directive\uc778 ng-show \ub098 ng-hide\ub97c \ud65c\uc6a9\ud588\uace0 \ud074\ub9ad \uc774\ubca4\ud2b8 \uc5ed\uc2dc ng-click \uc744 \uc0ac\uc6a9\ud588\ub2e4. \ub610 \ud2b8\ub9ac \ub0b4\uc6a9\uc774 \ud45c\uc2dc\ub418\ub294 \uac83\uc740 ng-repeat\uc744 \ud65c\uc6a9\ud574 \ucc98\ub9ac\ud588\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<\/div>\n<div>\n<p><b>\uacb0\ub860<\/b>\n<\/div>\n<div>\n<\/div>\n<div>\n<p>\uc804\uccb4\uc801\uc73c\ub85c AngularJS\uc758 \ud2b9\uc131\ub4e4\ub9cc\uc744 \ud65c\uc6a9\ud574\uc11c \uad6c\ud604\ud588\uae30 \ub54c\ubb38\uc5d0 \ubd84\uc11d\ud574\ubcf8\ub2e4\uba74, AngularJS\uc5d0 \ub300\ud55c \uc774\ud574\uac00 \ud55c\uce35 \ub354 \uae4a\uc5b4\uc9c8 \uc218 \uc788\uc744 \uac83\uc774\ub2e4.\u00a0\uc55e\uc73c\ub85c \ud2b8\ub9ac\ubdf0\uc5d0 \ud544\uc694\ud55c \uae30\ub2a5\ub4e4\uc744 \uc870\uae08\uc529 \ucd94\uac00\ud574\uc11c \ubcf4\ub2e4 \uc644\uc131\ub3c4 \uc788\ub294 AngularJS \ub77c\uc774\ube0c\ub7ec\ub9ac\uac00 \ub418\ub294 \uac83\uc744 \uae30\ub300\ud574\ubcf8\ub2e4.\n<\/p><\/div>\n<div>\n<\/div>\n<div class=\"area_content\">AngularJS\ub97c IE\uc5d0\uc11c \ud14c\uc2a4\ud2b8\ud558\ub2e4\ubcf4\ub2c8 $http \uc11c\ube44\uc2a4\ub97c \uc0ac\uc6a9\ud560 \ub54c \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\ub2e4.<br \/>\n\uba54\ud0c0 \ud0dc\uadf8\ub97c \uc544\ub798\uc640 \uac19\uc774 \uc8fc\uc5c8\uae30 \ub54c\ubb38\uc5d0 \ud14c\uc2a4\ud2b8\uc6a9 \ube0c\ub77c\uc6b0\uc800\uc778 IE9\uc5d0\uc11c\ub294 \uc77c\ubc18\uc801\uc73c\ub85c \uc624\ub958\uac00 \uc5c6\uc5c8\uc9c0\ub9cc, \uac15\uc81c\uc801\uc73c\ub85c \uac1c\ubc1c\uc790 \ubaa8\ub4dc\uc5d0\uc11c \ubb38\uc11c\ubaa8\ub4dc\ub97c IE7 \ub4f1\uc73c\ub85c \ubc14\uafb8\uc5c8\uc744 \ub54c \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud588\ub2e4.<\/p>\n<pre class=\"brush:html\">&lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1;text\/html; charset=utf-8;\" \/&gt;<\/pre>\n<p>\uc704\uc640 \uac19\uc774\u00a0IE=Edge \uc635\uc158\uc744 \uc8fc\uc5b4\u00a0\uba54\ud0c0 \ud0dc\uadf8\ub97c \uc124\uc815\ud558\uba74, \ud638\ud658\uc131 \ubcf4\uae30 \ubc84\ud2bc \uc790\uccb4\uac00 \uc0ac\ub77c\uc9c0\uae30 \ub54c\ubb38\uc5d0 IE\uc5d0\uc11c \ud56d\uc0c1 \ucd5c\uc2e0 \ub80c\ub354\ub9c1 \uc5d4\uc9c4\uc73c\ub85c \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \ub80c\ub354\ub9c1\ub41c\ub2e4. \ud558\uc9c0\ub9cc \uac15\uc81c\uc801\uc73c\ub85c \ubb38\uc11c \ubaa8\ub4dc\ub97c IE7\uc73c\ub85c \ubc14\uafb8\uba74 \uc598\uae30\uac00 \ud2c0\ub824\uc9c4\ub2e4.<\/p>\n<p>\uace0\uac1d\ub4e4\uc774 \uc5b4\ub5a4 \ube0c\ub77c\uc6b0\uc800\ub97c \uc0ac\uc6a9\ud560\uc9c0 \ubaa8\ub974\uae30 \ub54c\ubb38\uc5d0 &#8220;IE \ud638\ud658\uc131 \ubaa8\ub4dc\ub97c \uc4f0\uc9c0 \ub9c8\uc138\uc694&#8221;\ub77c\uace0 \ud560 \uc218\ub3c4 \uc5c6\ub294 \ub178\ub987\uc774\ub2e4.<br \/>\n\uc774\ub7f0 \uae4c\ub2ed\uc5d0 \ubb38\uc81c \ud574\uacb0\uc744 \uc704\ud574 \uad6c\uae00\ub9c1\uc744 \ud55c \uacb0\uacfc, JSON\uc744 IE \uad6c\ubc84\uc804\uc5d0\uc11c \uc81c\ub300\ub85c \uc9c0\uc6d0\ud558\uc9c0 \ubabb\ud558\uae30 \ub54c\ubb38\uc5d0 \ub098\ud0c0\ub098\ub294 \ubb38\uc81c\uc600\ub2e4. \uc774\uc5d0 \ub300\ud55c \ud574\uacb0\ucc45\uc73c\ub85c json\uc5d0 \ub300\ud55c \ub300\ud45c\uc801 polyfill\uc778 <b><a title=\"[http:\/\/bestiejs.github.io\/json3\/]\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.\" href=\"http:\/\/bestiejs.github.io\/json3\/\" target=\"_blank\">json3.js<\/a><\/b> \ub97c \ud65c\uc6a9\ud574\uc11c \ubb38\uc81c\ub97c \ud574\uacb0\ud560 \uc218 \uc788\uc5c8\ub2e4. json2.js \ub3c4 \uc788\uc9c0\ub9cc, \uc774\ubcf4\ub2e4 \uba87\uac00\uc9c0 \ud5a5\uc0c1\ub41c \ubd80\ubd84\uc774 \uc788\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uac00 json3 \ub77c\uace0 \uc18c\uac1c\ud558\uace0 \uc788\ub2e4.<\/p>\n<pre class=\"brush:html\">&lt;!--[if IE]&gt;\n\t&lt;script language=\"javascript\" type=\"text\/javascript\" src=\"json3.min.js\"&gt;&lt;\/script&gt;\n&lt;![endif]--&gt;<\/pre>\n<p>\ube0c\ub77c\uc6b0\uc800 \ubaa8\ub4dc\uc640 \ubb38\uc11c \ubaa8\ub4dc\uc758 \uc870\ud569\uc774 \ub2e4\uc591\ud558\uae30 \ub54c\ubb38\uc5d0 \ud2b9\uc815\ud55c IE \ubc84\uc804\uc744 \uc9c0\uc815\ud558\uc9c0 \uc54a\uace0 IE\uc778 \uacbd\uc6b0\uc5d0\ub294 json3.js \ub97c \ub85c\ub4dc\ud558\uac8c \ud574\uc11c IE\uc5d0\uc11c\ub3c4 JSON\uc744 \uc9c0\uc6d0\ud558\ub3c4\ub85d \uc124\uc815\ud588\ub2e4. IE9\uc5d0\uc11c \ub2e4\uc591\ud55c \ubb38\uc11c \ubaa8\ub4dc\uc640 \ube0c\ub77c\uc6b0\uc800 \ubaa8\ub4dc\uc758 \uc870\ud569\uc73c\ub85c \ud14c\uc2a4\ud2b8\ud55c \uacb0\uacfc \ud070 \ubb38\uc81c\uc5c6\uc774 \uc815\uc0c1\ub3d9\uc791\ud558\ub294 \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc5c8\ub2e4.<\/p>\n<p>\uc0ac\uc2e4 \uad6c\ubc84\uc804 IE\ub97c \uace0\ub824\ud560 \ub54c, \uc5b4\ub5a4 \uc124\uc815\uc744 \ud574\uc57c\ud558\ub294\uc9c0 \uc774\ubbf8 AngularJS \uc0ac\uc774\ud2b8\uc5d0 \uc790\uc138\ud558\uac8c \uc18c\uac1c\ub418\uc5b4 \uc788\uc5c8\ub294\ub370, \uc624\ub298\uc758 \uace0\uc0dd\uc740 \uc774 \ubd80\ubd84\uc744 \uaf3c\uaf3c\ud788 \uc77d\uc9c0 \ubabb\ud55c \ud0d3\uc774 \ud06c\ub2e4.<\/p>\n<p><b>AngularJS\ub97c IE\uc5d0\uc11c \uc0ac\uc6a9\ud560 \ub54c \uace0\ub824\ud574\uc57c \ud560 \ubd80\ubd84<\/b><br \/>\n<a href=\"http:\/\/docs.angularjs.org\/guide\/ie\" target=\"_blank\">http:\/\/docs.angularjs.org\/guide\/ie<\/a><\/p>\n<\/div>\n<div class=\"area_post_footer\">\n<\/div>\n<div class=\"area_comment\">\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>http:\/\/programmingsummaries.tistory.com\/m\/post\/229 &nbsp; AngularJS \uae30\ubc18 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158, \uc5b4\ub514\uc11c\ubd80\ud130 \uc2dc\uc791\ud574\uc57c \ud560\uae4c? AngularJS\ub97c \uae30\ubc18\uc73c\ub85c \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \ub54c, AngularJS \uc0ac\uc774\ud2b8\uc5d0\uc11c \uc81c\uacf5\ud574\uc8fc\ub294 \ubb38\uc11c\ub4e4\uc740 \ud2b9\uc815 API \ud65c\uc6a9 \ubc29\ubc95\uc744 \uc774\ud574\ud558\uac70\ub098 \ub2e8\uc21c\ud55c \uc218\uc900\uc73c\ub85c \uc2dc\uc791\ud558\uae30\uc5d0\ub294 \uc801\ud569\ud558\uc9c0\ub9cc \uc5b4\ub5bb\uac8c \uc218\ubc31\uc5d0\uc11c \uc218\ucc9c\uc904\uc5d0 \uc774\ub974\ub294 \ucf54\ub4dc\ub85c \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\uc131\ud558\uace0 \ubc1c\uc804\uc2dc\ucf1c\uc57c\ud558\ub294\uc9c0\uc5d0 \ub300\ud574\uc11c\ub294 \uba85\ud655\ud55c \uac00\uc774\ub4dc\ub77c\uc778\uc744 \uc81c\uacf5\ud574\uc8fc\uace0 \uc788\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. AngularJS\ub97c \uae30\ubc18\uc73c\ub85c \uc218\ucc28\ub840\uc758 \ud06c\uace0 \uc791\uc740 \uac1c\ubc1c\uc744 \uc9c4\ud589\ud558\uba70 \uc5bb\uc740 \uacbd\ud5d8 \uc9c0\uc2dd\uacfc, \uc774\ub97c \uae30\ubc18\uc73c\ub85c \ub300\uaddc\ubaa8 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc774 \uac00\ub2a5\ud55c UI \ud504\ub808\uc784\uc6cc\ud06c\ub97c \ub9cc\ub4dc\ub294 \uacfc\uc815\uc5d0\uc11c \uace0\ubbfc\ud558\uace0 \uc5f0\uad6c\ud55c \uacb0\uacfc\ubb3c\uc744 \uc815\ub9ac\ud574 \ubcf4\uc558\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc740 \ub300\uaddc\ubaa8 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0 \uc788\uc5b4 \uc815\ub2f5\uc744 \uc81c\uc2dc\ud558\ub294 \uae00\uc774 \uc544\ub2c8\uba70, \ub300\uaddc\ubaa8 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uace0\ub824\ud55c UI \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uac1c\ubc1c\ud558\ub294 \uacfc\uc815\uc5d0\uc11c \ub098\uc628 \uc0b0\ucd9c\ubb3c\ub4e4 \uc911 \uc77c\ubd80\ub97c \uc124\uba85\uacfc \uacc1\ub4e4\uc5ec \uacf5\uac1c\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \ub530\ub77c\uc11c \ub300\uaddc\ubaa8 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc744 \uc704\ud55c \uc778\uc0ac\uc774\ud2b8\ub97c \uc5bb\ub294 \ubc29\ud5a5\uc73c\ub85c \uc811\uadfc\ud558\uc2dc\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4. \uba3c\uc800\ub294 \ud30c\uc77c\uacfc \ub514\ub809\ud1a0\ub9ac \uad6c\uc870\ub97c \uc5b4\ub5bb\uac8c \uad6c\uc131\ud574\uc57c \ud558\ub294\uc9c0\uc5d0\uc11c\ubd80\ud130, \uc8fc\uc694 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud30c\uc77c\uc774 \uc5b4\ub5bb\uac8c \uad6c\ub3d9\ub418\ub294\uc9c0 \ud558\ub098\ud558\ub098 \uc0b4\ud3b4\ubcf4\uac8c \ub420 \uac83\uc785\ub2c8\ub2e4. \ud30c\uc77c \ubc0f \ub514\ub809\ud1a0\ub9ac \uad6c\uc131 Brain Ford\ub294 \u201cBuilding Huuuuuge Apps with AngularJS\u201d \ub77c\ub294 \ud3ec\uc2a4\ud305\uc5d0\uc11c \ub300\uaddc\ubaa8 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \ub54c \uc911\uc694\ud55c \uac83\uc740 \uc791\uace0 \uc9d1\uc911\ub418\uace0 \ubaa8\ub4c8\ud654\ub41c \ubd80\ubd84\uc73c\ub85c \uac1c\ubc1c\ud574\uc11c \uc810\uc9c4\uc801\uc73c\ub85c \ud655\uc7a5\uc2dc\ucf1c\ub098\uac00\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2e4\uace0 \uc870\uc5b8\ud588\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc774\ub807\uac8c \ub300\uaddc\ubaa8 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc5b4\ub5a0\ud55c \ubd84\ub958\ub85c \ub098\ub204\uace0 \ub610 \uc5b4\ub5a4 \uad6c\uc870\ub85c \uad6c\uc131\ud574\uc57c\ud558\ub294\uc9c0\uc5d0 \ub300\ud55c \uace0\ubbfc\uc774 \ub610\ub2e4\uc2dc \uc0dd\uae30\uac8c \ub429\ub2c8\ub2e4. \ub098\ub204\uc5b4\uc9c4 \ubd80\ubd84\ub4e4\uc740 \ud544\uc5f0\uc801\uc73c\ub85c \ud30c\uc77c\uacfc \ub514\ub809\ud1a0\ub9ac\ub85c \ubd84\ub958\ub418\uac8c \ub418\ub294\ub370, angular seed project \ub4f1\uc5d0\uc11c\ub3c4 \uad8c\uc7a5\ud558\ub294 \ub514\ub809\ud1a0\ub9ac \uad6c\uc870\uac00 \uc788\uace0, \ub610 \uc6f9 \uc0c1\uc5d0\uc11c \uac80\uc0c9\ud574\ubcf4\uba74 \ub2e4\uc591\ud55c \uad6c\uc870\ub85c \ud30c\uc77c\uacfc \ub514\ub809\ud1a0\ub9ac\ub97c \ub098\ub204\ub294 \ubc29\ubc95\uc744 \ucc3e\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc5ec\uae30\uc5d0\uc11c\ub294 \ud604\uc7ac\uae4c\uc9c0 \uc5ec\ub7ec \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"ngg_post_thumbnail":0,"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[4,5],"tags":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5q9Zn-dN","jetpack-related-posts":[{"id":597,"url":"https:\/\/blog.box.kr\/?p=597","url_meta":{"origin":855,"position":0},"title":"[\ud38c][AngularJS] \ubc30\uc6b0\ub294 \ubc29\ubc95 &amp; \uae30\ubcf8 \uac1c\ub150 \uc7a1\uae30","date":"2015-02-02","format":false,"excerpt":"http:\/\/mobicon.tistory.com\/281 AngularJS\/Concept AngularJS\ub97c \ubc30\uc6b0\uae30 \uc704\ud574\u00a0\uc88c\ucda9\uc6b0\ub3cc \ud558\uba70 \uc77d\uace0, \ubcf4\uace0,\u00a0\ub4e3\uace0, \ucf54\ub529\ud574\ubcf8 \ucf54\uc2a4\ub97c \ub098\ub984 \uc815\ub9ac\ud574 \ubcf4\uc558\ub2e4. 1.\u00a0\uac1c\ub150\uc7a1\uae30 -\u00a0Angular's father\uc778\u00a0\ubbf8\uc2a4\ucf54\ub2d8\uc758\u00a0AngularJS \uc18c\uac1c \ub3d9\uc601\uc0c1\uc744 \ubcf8\ub2e4 : \ub2e8\uacc4\ubcc4\ub85c jQuery\uc640 \uc798 \ube44\uad50\ud558\uace0 \uc788\ub2e4 \u00a0 - Art of AngularJS\ub97c \ubcf4\uace0\uc11c \uc774\uc81c \ubc30\uc6cc\uc57c\ud560 \ud544\uc694\uc131\uc744 \ub290\uaef4\ubcf4\uc138\uc694. \uc774\uc81c \uc2dc\uc791\ud558\uc138\uc694. \u00a0 \u00a0\u00a0The Art of AngularJS from Matt Raible - AngularJS\uc758 \uc911\uc694 \uc694\uc18c\uc640 \uae30\ubcf8\uae30\ub97c\u2026","rel":"","context":"In &quot;JAVA&quot;","img":{"alt_text":"","src":"http:\/\/cfile29.uf.tistory.com\/image\/2161163B517694CB2CA7B5","width":350,"height":200},"classes":[]},{"id":493,"url":"https:\/\/blog.box.kr\/?p=493","url_meta":{"origin":855,"position":1},"title":"[\ud38c]\ud504\ub860\ud2b8\uc5d4\ub4dc\uc6f9\uac1c\ubc1c\uc790,\uc790\ub3d9\ud654\uae30\uc220\uc368\ubcf4\uc138\uc694","date":"2014-12-22","format":false,"excerpt":"11\uc6d430\uc77c \uc790\ubc14 \uc2a4\ud504\ub9c1 \ucee4\ubba4\ub2c8\ud2f0 \u2018\ubd04\uc2f9\u2019\uc774 \uc8fc\ucd5c\ud55c \uc138\ubbf8\ub098\uac00 \ub124\uc774\ubc84 \uadf8\ub9b0 \ud329\ud1a0\ub9ac \uac15\ub2f9\uc5d0\uc11c \uc5f4\ub838\ub2e4. 200\uc5ec\uba85\uc774 \ucc38\uc5ec\ud55c \uc138\ubbf8\ub098\uc5d0\uc11c\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c \ub3d9\ud5a5\uc744 \uc804\ud558\ub294 \uc138\uc158\ub3c4 \uc788\uc5c8\ub2e4. \ubcc0\uc815\ud6c8 \uac1c\ubc1c\uc790\ub294 \u2018\uac8c\uc73c\ub978 \uac1c\ubc1c\uc790\u2019 \uc774\uc57c\uae30\ub97c \uba3c\uc800 \uaebc\ub0c8\ub2e4. \u201c\uc5b4\ub5a4 \uc791\uac00\ub294 \uc774\ub807\uac8c \ub9d0\ud558\ub354\ub77c\uace0\uc694. \u2018\uac1c\ubc1c\uc790\ub294 1\uc2dc\uac04 \ubc18\ubcf5 \uc791\uc5c5\uc744 \uc5c6\uc560\uae30 \uc704\ud574, 7~8\uc2dc\uac04\uc744 \ud22c\uc790\ud55c\ub2e4\u2019\uace0\uc694. \ubc18\ubcf5 \uc791\uc5c5\uc744 \uc5c6\uc560\ub294 \ud504\ub85c\uadf8\ub7a8\uc744 \ub9cc\ub4e4\uae30 \uc704\ud574\uc11c\uc8e0. \uc800\ub294 \uc774 \uc0dd\uac01\uc5d0 \ub3d9\uc758\ud574\uc694.\u2026","rel":"","context":"In &quot;\uae30\uc220\uc790\ub8cc&quot;","img":{"alt_text":"spring_seminar_thum01","src":"https:\/\/i0.wp.com\/www.bloter.net\/wp-content\/uploads\/2014\/12\/spring_seminar_thum01.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":74,"url":"https:\/\/blog.box.kr\/?p=74","url_meta":{"origin":855,"position":2},"title":"Logging\uc124\uc815 for JEUS5","date":"2014-06-12","format":false,"excerpt":"Logging\uc124\uc815 for JEUS5 \uc18c\uac1c \uc774 \ubb38\uc11c\ub294 JEUS 5\uc758 \uc6f9 \uad00\ub9ac\uc790\ub97c \uc0ac\uc6a9\ud55c logging \uc124\uc815 \ubc29\ubc95 \ubc0f customization \ubc29\ubc95, log4j \uc0ac\uc6a9\ubc95 \ub4f1\uc744 \uc124\uba85\ud55c\ub2e4. \uae30\ubcf8logger \ud30c\uc77c \ucd5c\ucd08 JEUS \uc124\uce58 \uc2dc, JEUS log\ub294 default\ub85c console handler\ub97c \uc0ac\uc6a9\ud558\uae30 \ub54c\ubb38\uc5d0 JEUS manager\uc640 \ubaa8\ub4e0 engine container\uc758 log message\uac00 stdout\ud615\ud0dc\ub85c \ucd9c\ub825\ub41c\ub2e4. \ub610\ud55c web container \uc758 access log\uac00 $JEUS_HOME\/logs\/<\ub178\ub4dc\uba85>\/<\ub178\ub4dc\uba85>_<\ucee8\ud14c\uc774\ub108\uba85>\/servlet\/accesslog\/access.log\u2026","rel":"","context":"In &quot;JEUS &amp; WEBToB&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":357,"url":"https:\/\/blog.box.kr\/?p=357","url_meta":{"origin":855,"position":3},"title":"top5 open \uc18c\uc2a4 \ud504\ub85c\uc81d\ud2b8 \uad00\ub9ac \ud234","date":"2014-09-02","format":false,"excerpt":"\uc774 \ubb38\uc11c\ub294 \uc138\uacc4\uc801\uc73c\ub85c \ub9ce\uc774 \uc0ac\uc6a9\ub418\uace0 \uc788\ub294 5\uac1c\uc758 \uc624\ud508 \uc18c\uc2a4 \ud504\ub85c\uc81d\ud2b8 \uad00\ub9ac \ub3c4\uad6c\ub97c \uac04\ub2e8\ud558\uac8c \uc18c\uac1c\ud569\ub2c8\ub2e4. TOP5\ub294 opensource.com\uc758\u00a0Top 5 open source project management tools in 2014\ub97c \ucc38\uc870\ud558\uc5ec \uc791\uc131\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\u00a0 ProjectLibre ProjectLibre\ub294 MS Project\ub97c \ub300\uccb4\ud560 \uc218 \uc788\ub294 \ud504\ub85c\uc81d\ud2b8 \uad00\ub9ac \ub3c4\uad6c\uc785\ub2c8\ub2e4. Java\uac00 \uc124\uce58\ub418\uc5b4 \uc788\ub2e4\uba74, Linux, Mac OS, Windows OS\uc5d0\uc11c \uc0ac\uc6a9\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4. \ud604\uc7ac \ub77c\uc774\uc13c\uc2a4\ub294 Common Public\u2026","rel":"","context":"In &quot;\uae30\uc220\uc790\ub8cc&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192,"url":"https:\/\/blog.box.kr\/?p=192","url_meta":{"origin":855,"position":4},"title":"MFC \uafb8\ubbf8\uae30","date":"2014-07-16","format":false,"excerpt":"Dialog\uc5d0 \uc2a4\ud06c\ub864\ubc14 \ubd99\uc774\uae30 http:\/\/www.codeguru.com\/Cpp\/W-D\/dislog\/scrolling\/article.php\/c1859 Read Resource (\ub9ac\uc18c\uc2a4 \ub4f1\ub85d \ud30c\uc77c \uc77d\uc5b4\ub4e4\uc774\uae30) http:\/\/blog.daum.net\/debugx\/51 Flash \ucee8\ud2b8\ub864 \uc0ac\uc6a9 http:\/\/www.devpia.com\/MAEUL\/Contents\/Detail.aspx?BoardID=51&MAEULNO=20&no=8254&page=9 ? 1 2 3 4 5 6 7 m_flash.put_Movie(_T(\"D:\\Sample1.swf\")); m_flash.put_Loop(TRUE); \u00a0\u00a0\u00a0\u00a0 long state = m_flash.get_ReadyState();\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/4\uba74 \uc900\ube44\ub428 long totalFrame = m_flash.get_TotalFrames();\u00a0\u00a0\u00a0 \/\/get_ReadyState()\uac00 4\uc778\uc0c1\ud0dc\uc5d0\uc11c flash \ud504\ub808\uc784 \ud68d\ub4dd m_flash.Play(); Web Browser control (\uc6f9 \ube0c\ub77c\uc6b0\uc800 \ucee8\ud2b8\ub864) \uc6f9 \ube0c\ub77c\uc6b0\uc800\u2026","rel":"","context":"In &quot;C\/C++&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":553,"url":"https:\/\/blog.box.kr\/?p=553","url_meta":{"origin":855,"position":5},"title":"site Links&#8230;","date":"2015-01-25","format":false,"excerpt":"NHN Cloud \uc11c\ube44\uc2a4 \u00a0: \u00a0\u00a0http:\/\/cloud.toast.com\/ URQA \uc11c\ube44\uc2a4 :\u00a0http:\/\/urqa.io\/urqa\/ URQA OpenSource : https:\/\/github.com\/search?utf8=%E2%9C%93&q=URQA APACHE CORDOVA \u00a0: http:\/\/cordova.apache.org\/ AngularJS-MVC-Repository \u00a0: http:\/\/www.codeproject.com\/Articles\/869433\/AngularJS-MVC-Repository dither algorithm foundations :\u00a0http:\/\/blog.danielepiccone.com\/post\/46328916747\/image-processing-dither-algorithm-foundations (Dithering)\uc774\ub780\u00a0PDF :\u00a0\u00a0https:\/\/www.google.co.kr\/url?sa=t&rct=j&q=&esrc=s&source=web&cd=12&ved=0CCEQFjABOAo&url=http%3A%2F%2Fcfile3.uf.tistory.com%2Fattach%2F1519C21349B14149387C6B&ei=-xDHVOWyFsOymAX80IKIAg&usg=AFQjCNHVgi8dVuY1c7eFzVjDTeKhNM6wPA&bvm=bv.84349003,d.dGY&cad=rjt \u00a0 IT PDF\ucc45 :\u00a0http:\/\/www.onlineprogrammingbooks.com\/cplusplus\/ IT PDF\ucc45 :\u00a0http:\/\/www.e-booksdirectory.com\/","rel":"","context":"In &quot;\uae30\uc220&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/blog.box.kr\/index.php?rest_route=\/wp\/v2\/posts\/855"}],"collection":[{"href":"https:\/\/blog.box.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.box.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.box.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.box.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=855"}],"version-history":[{"count":0,"href":"https:\/\/blog.box.kr\/index.php?rest_route=\/wp\/v2\/posts\/855\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.box.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.box.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.box.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}