{"id":758,"date":"2017-02-23T16:15:21","date_gmt":"2017-02-24T01:15:21","guid":{"rendered":"\/blog\/?p=758"},"modified":"2023-09-21T09:37:46","modified_gmt":"2023-09-21T00:37:46","slug":"%ed%95%98%eb%a3%a8%eb%a7%8c%ec%97%90-%eb%81%9d%eb%82%b4%eb%8a%94-angularjs","status":"publish","type":"post","link":"https:\/\/hasu0707.duckdns.org\/blog\/?p=758","title":{"rendered":"\ud558\ub8e8\ub9cc\uc5d0 \ub05d\ub0b4\ub294 AngularJS"},"content":{"rendered":"\n

\ucd9c\ucc98 : <\/span>http:\/\/soomong.net\/blog\/2014\/01\/20\/translation-ultimate-guide-to-learning-angularjs-in-one-day\/<\/span><\/a><\/p>\r\n


<\/p>\r\n


<\/p>\r\n


<\/p>\r\n

AngularJS \ub780?<\/span><\/h3>

Angular\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \ub9cc\ub4e0 client \uce21 MVC\/MVVM \ud504\ub808\uc784\uc6cc\ud06c\ub85c \ubaa8\ub358 \ub2e8\uc77c \ud398\uc774\uc9c0 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158(\ud639\uc740 \uc6f9\uc0ac\uc774\ud2b8) \uac1c\ubc1c\uc758 \uc815\uc218\uc774\ub2e4. \uadf8\ub9ac\uace0 \ubaa8\ub358 \uc6f9\uc744 \ub2e4\ub8e8\ub294 \uc0c8\ub85c\uc6b4 \ubc29\ubc95\uc774\uc790 HTML5\uac00 \uac00\uc838\uc62c \ubbf8\ub798\ub97c \uc704\ud55c \ud070 \ubc1c\ud310\uc774\ub2e4. \uc774 \uae00\uc740 \ud544\uc790\uac00 Angular\ub97c \uacbd\ud5d8\ud574\ubcf4\uba70 \uc54c\uac8c \ub41c \uac83\ub4e4\uacfc \uc870\uc5b8, \uc6b0\uc218 \uc0ac\ub840\ub97c \ubc14\ud0d5\uc73c\ub85c \uc791\uc131\ud574\ubcf8 \uc774\ub984\ud558\uc5ec \ud558\ub8e8\ub9cc\uc5d0 \ub05d\ub0b4\ub294 Angular \uac15\uc88c\ub2e4.<\/span><\/p>\r\n

\uc6a9\uc5b4<\/span><\/h3>

Angular\ub294 \uc0c8\ub85c \ub4f1\uc7a5\ud558\ub294 \uc6a9\uc5b4\uc640 \"MVC\ub85c \uc0dd\uac01\"\ud558\ub294 \ubc29\ubc95\uc73c\ub85c \uc778\ud574 \uc57d\uac04\uc758 \ub7ec\ub2dd\ucee4\ube0c\uac00 \uc788\ub2e4. \uc5ec\uae30\uc11c MVC\ub294<\/span> <\/span>\ubaa8\ub378-\ubdf0-\ucee8\ud2b8\ub864\ub7ec<\/span><\/em> <\/span>\ub97c \uc758\ubbf8\ud55c\ub2e4. \uc774\uc81c\ubd80\ud130 Angular\ub97c \uad6c\uc131\ud558\ub294 \ud544\uc218\uc801\uc778 API\uc640 \uc6a9\uc5b4\ub97c \uc0b4\ud3b4\ubcf4\uc790.<\/span><\/p>\r\n

MVC<\/span><\/h4>

\ubd84\uba85 MVC\ub294 \ub4e4\uc5b4\ubd24\uc744 \uac83\uc774\ub2e4. \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\uc5d0\uc11c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\/\uc18c\ud504\ud2b8\uc6e8\uc5b4\uc758 \uad6c\uc870\ub97c \uc7a1\uac70\ub098 \uc544\ud0a4\ud14d\ucc98\ub97c \uc815\ud558\ub294 \ubc29\ubc95\uc73c\ub85c \ub9ce\uc774 \uc0ac\uc6a9 \ub418\uace0 \uc788\ub2e4. \uc77c\ub2e8 \uac04\ub2e8\ud788 \uc758\ubbf8\ub97c \uc0b4\ud3b4\ubcf4\uc790:<\/span><\/p>\r\n

  • \ubaa8\ub378<\/span><\/em> <\/span>: \ubcf4\ud1b5 JSON\uc73c\ub85c \ud45c\ud604\ub418\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ud2b9\uc815\ud55c \ub370\uc774\ud130 \uad6c\uc870\ub97c \ub9d0\ud55c\ub2e4. \ubdf0\uac00 \uc11c\ubc84\uc640 \ud1b5\uc2e0\ud558\uae30 \uc704\ud574 \uaf2d \ud544\uc694\ud55c \ub0b4\uc6a9\uc774\ub2c8 \ub354 \uc9c4\ud589\ud558\uae30 \uc804\uc5d0 \ub2e4\uc74c JSON\uc744 \uc798 \uc0b4\ud3b4\ubcf4\uc790. \uc608\ub97c \ub4e4\uc5b4<\/span> <\/span>User ID<\/span><\/em> <\/span>\uadf8\ub8f9\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \ubaa8\ub378\uc744 \uac00\uc9c8 \uc218 \uc788\ub2e4:<\/span><\/li><\/ul>
    {\r\n  <\/span>\"<\/span>users<\/span>\"<\/span><\/span> : [{\r\n    <\/span>\"<\/span>name<\/span>\"<\/span><\/span>: <\/span>\"<\/span>Joe Bloggs<\/span>\"<\/span><\/span>,\r\n    <\/span>\"<\/span>id<\/span>\"<\/span><\/span>: <\/span>\"<\/span>82047392<\/span>\"<\/span><\/span>\r\n  },{\r\n    <\/span>\"<\/span>name<\/span>\"<\/span><\/span>: <\/span>\"<\/span>John Doe<\/span>\"<\/span><\/span>,\r\n    <\/span>\"<\/span>id<\/span>\"<\/span><\/span>: <\/span>\"<\/span>65198013<\/span>\"<\/span><\/span>\r\n  }]\r\n}\r\n<\/span><\/pre><\/div><\/div><\/div>
    \uc774 \uc815\ubcf4\ub97c jQuery\uc758<\/span> <\/span>$.ajax<\/span><\/em> <\/span>\uba54\uc11c\ub4dc\ub97c \ub798\ud551\ud55c Angular\uc758<\/span> <\/span>$http<\/span><\/em> <\/span>\ub97c \ud1b5\ud574 XHR(XMLHttp Request)\ub85c \uc11c\ubc84\uc5d0\uc11c \uac00\uc838\uc624\uac70\ub098 \ud398\uc774\uc9c0\ub97c \ub85c\ub529\ud560 \ub54c \ucf54\ub4dc\uc5d0\uc11c \uc9c1\uc811 (\ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0\uc11c) \uc77d\uc5b4\uc624\ub3c4\ub85d \ud560 \uc218 \uc788\ub2e4. \uadf8\ub9ac\uace0 \ubaa8\ub378\uc744 \ubcc0\uacbd\ud55c \ub2e4\uc74c \ub2e4\uc2dc \ubc18\uc601\ud560 \uc218\ub3c4 \uc788\ub2e4.<\/span><\/p>\r\n
    • \ubdf0<\/span><\/em> <\/span>: \ubdf0\ub294 \uac04\ub2e8\ud558\ub2e4. HTML \ud639\uc740 \ub80c\ub354\ub9c1\ub41c \uacb0\uacfc\ub97c \ub9d0\ud55c\ub2e4. MVC \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc0ac\uc6a9\ud55c\ub2e4\uba74 \ubdf0\ub97c \uac31\uc2e0\ud560 \ubaa8\ub378 \ub370\uc774\ud130\ub97c \ub0b4\ub824\ubc1b\uc740 \ub4a4 HTML\uc5d0\uc11c \ud574\ub2f9 \ub370\uc774\ud130\ub97c \ubcf4\uc5ec\uc904 \uac83\uc774\ub2e4.<\/span><\/p>\r\n<\/li>
    • \ucee8\ud2b8\ub864\ub7ec<\/span><\/em> <\/span>: \ub9d0 \uadf8\ub300\ub85c \ud55c\ubc88 \uc0dd\uac01\ud574\ubcf4\uc790. \ubb34\uc5b8\uac00\ub97c \uc870\uc815\ud55c\ub2e4. \uadfc\ub370 \ubb34\uc5c7\uc744 \uc870\uc815\ud560\uae4c? \ub370\uc774\ud130\ub2e4. \ucee8\ud2b8\ub864\ub7ec\ub294<\/span> <\/span>\uc11c\ubc84<\/span><\/em> <\/span>\uc5d0\uc11c \uc9c1\uc811<\/span> <\/span>\ubdf0<\/span><\/em> <\/span>\ub85c \uc811\uadfc\ud558\ub294 \uc77c\uc885\uc758 \uc911\uac04 \ud1b5\ub85c\ub85c\uc11c \ud544\uc694\ud560 \ub54c\ub9c8\ub2e4 \uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8 \ud1b5\uc2e0\uc73c\ub85c \ub370\uc774\ud130\ub97c \ubcc0\uacbd\ud55c\ub2e4.<\/span><\/p>\r\n<\/li><\/ul>
      AngularJS \ud504\ub85c\uc81d\ud2b8 \uc124\uc815 (\uc544\uc8fc \uae30\ucd08)<\/span><\/h4>
      \uc774\uc81c \uc2e4\uc81c AngularJS \ud504\ub85c\uc81d\ud2b8\ub97c \ub9cc\ub4e4\uc5b4\ubcf4\uc790. \uc2dc\uc791\ud558\uae30 \uc804\uc5d0<\/span> <\/span>ng-app<\/span><\/em> <\/span>\uc120\uc5b8\uc73c\ub85c \uc571\uc744 \uc815\uc758\ud558\ub294 \ubd80\ubd84\uc774\ub77c\ub4e0\uac00 \ubdf0\uc640 \ud1b5\uc2e0\ud558\ub294<\/span> <\/span>\ucee8\ud2b8\ub864\ub7ec<\/span><\/em> <\/span>\ub610\ub294 Angular\uc5d0 \ub0b4\uc7ac\ub41c DOM \ubc14\uc778\ub529 \ub4f1 \uba87 \uac00\uc9c0 \uc0b4\ud3b4\ubcfc \uac8c \uc788\ub2e4. \uc774\uc81c\ubd80\ud130\ub294 \uc544\uc8fc \uae30\ucd08\uc801\uc778 \ubd80\ubd84\uc774\ub2e4:<\/span><\/p>\r\n
      \ub2e4\uc74c\uc740<\/span> <\/span>ng-*<\/span><\/em> <\/span>\uc120\uc5b8\uc744 \ucd94\uac00\ud55c HTML\uc774\ub2e4:<\/span><\/p>\r\n
      <div<\/span> <\/span>ng-app<\/span>=<\/span>\"<\/span>myApp<\/span>\"<\/span><\/span>><\/span>\r\n    <\/span><div<\/span> <\/span>ng-controller<\/span>=<\/span>\"<\/span>MainCtrl<\/span>\"<\/span><\/span>><\/span>\r\n        <\/span><!-- controller logic --><\/span>\r\n    <\/span><\/div><\/span>\r\n<\/span><\/div><\/span>\r\n<\/span><\/pre><\/div><\/div><\/div>
      \uadf8\ub9ac\uace0 Angular \ubaa8\ub4c8\uacfc \ucee8\ud2b8\ub864\ub7ec\ub2e4:<\/span><\/p>\r\n
      var<\/span> myApp = angular.module(<\/span>'<\/span>myApp<\/span>'<\/span><\/span>, []);\r\n\r\nmyApp.controller(<\/span>'<\/span>MainCtrl<\/span>'<\/span><\/span>, [<\/span>'<\/span>$scope<\/span>'<\/span><\/span>, <\/span>function<\/span> (<\/span>$scope<\/span>) {\r\n  <\/span>\/\/ Controller magic<\/span>\r\n}]);\r\n<\/span><\/pre><\/div><\/div><\/div>
      \ub354 \uc9c4\ud589\ud558\uae30 \uc804\uc5d0 \ubaa8\ub4e0 \ub85c\uc9c1\uc744 \ub2f4\uc744<\/span> <\/span>Angular \ubaa8\ub4c8<\/span><\/em> <\/span>\uc744 \ud558\ub098 \ub9cc\ub4e4\uc5b4\ubcf4\uc790. \ubaa8\ub4c8\uc744 \uc815\uc758\ud558\ub294 \ubc29\ubc95\uc740 \ub2e4\uc591\ud558\uba70 \uadf8 \uc911 \ud558\ub098\uac00 \ub2e4\uc74c\uacfc \uac19\uc774 \ub85c\uc9c1\uc744 \ubb36\ub294 \ubc29\ubc95\uc774\ub2e4(\ud544\uc790\ub294 \uc774\ub7f0 \ubc29\uc2dd\uc744 \ubcc4\ub85c \uc548\uc88b\uc544\ud55c\ub2e4):<\/span><\/p>\r\n
      angular.module(<\/span>'<\/span>myApp<\/span>'<\/span><\/span>, [])\r\n.controller(<\/span>'<\/span>MainCtrl<\/span>'<\/span><\/span>, [<\/span>'<\/span>$scope<\/span>'<\/span><\/span>, <\/span>function<\/span> (<\/span>$scope<\/span>) {...}])\r\n.controller(<\/span>'<\/span>NavCtrl<\/span>'<\/span><\/span>, [<\/span>'<\/span>$scope<\/span>'<\/span><\/span>, <\/span>function<\/span> (<\/span>$scope<\/span>) {...}])\r\n.controller(<\/span>'<\/span>UserCtrl<\/span>'<\/span><\/span>, [<\/span>'<\/span>$scope<\/span>'<\/span><\/span>, <\/span>function<\/span> (<\/span>$scope<\/span>) {...}]);\r\n<\/span><\/pre><\/div><\/div><\/div>
      \ud544\uc790\uac00 \ud574\ubd24\ub358 Angular \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uac01\ud574\ubcf4\uba74 \uc804\uc5ed \ubaa8\ub4c8\uc744 \ub9cc\ub4dc\ub294\uac8c \uac00\uc7a5 \uc88b\uc740 \ubc29\ubc95\uc774\ub2e4. \ud558\uc9c0\ub9cc \uc774\ub807\uac8c \uc138\ubbf8\ucf5c\ub860\uc744 \uc4f0\uc9c0\uc54a\uace0 \ud568\uc218 \uccb4\uc778\uc744 \uac11\uc790\uae30 \ub04a\uc73c\uba74 \ubd88\ud544\uc694\ud55c \ucef4\ud30c\uc77c \uc5d0\ub7ec\ub97c \ub9cc\ub4e4\uc5b4\ub0b4\uae30 \ub54c\ubb38\uc5d0 \ube44\ud6a8\uc728\uc801\uc774\ub2e4. \ub2e4\uc74c \ucf54\ub4dc\ub97c \ubcf4\uc790:<\/span><\/p>\r\n
      var<\/span> myApp = angular.module(<\/span>'<\/span>myApp<\/span>'<\/span><\/span>, []);\r\nmyApp.controller(<\/span>'<\/span>MainCtrl<\/span>'<\/span><\/span>, [<\/span>'<\/span>$scope<\/span>'<\/span><\/span>, <\/span>function<\/span> (<\/span>$scope<\/span>) {...}]);\r\nmyApp.controller(<\/span>'<\/span>NavCtrl<\/span>'<\/span><\/span>, [<\/span>'<\/span>$scope<\/span>'<\/span><\/span>, <\/span>function<\/span> (<\/span>$scope<\/span>) {...}]);\r\nmyApp.controller(<\/span>'<\/span>UserCtrl<\/span>'<\/span><\/span>, [<\/span>'<\/span>$scope<\/span>'<\/span><\/span>, <\/span>function<\/span> (<\/span>$scope<\/span>) {...}]);\r\n<\/span><\/pre><\/div><\/div><\/div>
      \uc0c8\ub85c \ub9cc\ub4dc\ub294 \ud30c\uc77c\ub9c8\ub2e4<\/span> <\/span>myApp<\/span><\/em> <\/span>\uc744 \ub124\uc784\uc2a4\ud398\uc774\uc2a4\ucc98\ub7fc \uc0ac\uc6a9\ud560 \uc218 \uc788\uc73c\ub2c8 \ubc14\ub85c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \uc9d1\uc911\ud560 \uc218 \uc788\uc744 \uac83\uc774\ub2e4. \uadf8\ub807\ub2e4. \uac01 \ucee8\ud2b8\ub864\ub7ec, \ub514\ub809\ud2f0\ube0c, \ud329\ud1a0\ub9ac \ub4f1 \ubaa8\ub4e0 \uac83\uc5d0 \ub300\ud574\uc11c \uac01\uac01 \uc0c8\ub85c\uc6b4 \ud30c\uc77c\uc744 \ub9cc\ub4e4 \uac83\uc774\ub2e4(\uc774\ubd80\ubd84\uc740 \ub098\uc5d0\uac8c \uace0\ub9c8\uc6cc\ud574\uc57c \ud560 \uac83\uc784). \uadf8\ub9ac\uace0 \uc774\ub4e4\uc744 \ubaa8\ub450 \uc5ee\uc5b4\uc11c Grunt\uac19\uc740 \uc2e4\ud589\uae30\ub85c \ud558\ub098\uc758 \uc2a4\ud06c\ub9bd\ud2b8 \ud30c\uc77c\uc744 DOM\uc5d0 \uc801\uc6a9\ud55c\ub2e4.<\/span><\/p>\r\n
      \ucee8\ud2b8\ub864\ub7ec<\/span><\/h4>
      \uc774\uc81c MVC\uc640 \uae30\ubcf8\uc801\uc778 \uc124\uc815\uc744 \uc0b4\ud3b4\ubd24\uc73c\ub2c8 Angular\uc758 \ucee8\ud2b8\ub864\ub7ec\ub97c \uc5b4\ub5bb\uac8c \uc0ac\uc6a9\ud558\ub294\uc9c0 \uc0b4\ud3b4\ubcf4\uc790.<\/span><\/p>\r\n
      \ub2e4\uc74c \uc608\uc81c\ub97c \uc9c4\ud589\ud558\uae30 \uc804\uc5d0 \ucee8\ud2b8\ub864\ub7ec\ub97c \ud1b5\ud574\uc11c \ub370\uc774\ud130\ub97c DOM\uc5d0 \uc8fc\uc785\ud558\ub294 \uc544\uc8fc \uc26c\uc6b4 \ub2e8\uacc4\ubd80\ud130 \uc0b4\ud3b4\ubcf4\uc790. Angular\ub294 HTML\uacfc \ud1b5\uc2e0\ud558\uae30 \uc704\ud574<\/span> <\/span>{{ handlebars }}<\/span><\/em> <\/span>\uc640 \uac19\uc740 \ud15c\ud50c\ub9bf \ud615\uc2dd\uc758 \ubb38\ubc95\uc744 \uc0ac\uc6a9\ud55c\ub2e4. HTML\uc5d0 \ub370\uc774\ud130\ub97c \ud558\ub4dc\ucf54\ub529\ud558\uc9c0 \uc54a\uc544\uc57c\uc9c0\ub9cc(\uc774\uc0c1\uc801\uc73c\ub85c\ub294) Angular\ub97c \uc81c\ub300\ub85c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774\ub2e4. \ub2e4\uc74c\uc740 DOM\uc5d0 \uac04\ub2e8\ud55c \ubb38\uc790\uc5f4\uc744 \ub123\ub294 \uc608\uc81c\ub2e4:<\/span><\/p>\r\n
      <div<\/span> <\/span>ng-app<\/span>=<\/span>\"<\/span>myApp<\/span>\"<\/span><\/span>><\/span>\r\n    <\/span><div<\/span> <\/span>ng-controller<\/span>=<\/span>\"<\/span>MainCtrl<\/span>\"<\/span><\/span>><\/span>\r\n         {{ text }}\r\n    <\/span><\/div><\/span>\r\n<\/span><\/div><\/span>\r\n<\/span><\/pre><\/div><\/div><\/div>
      var<\/span> myApp = angular.module(<\/span>'<\/span>myApp<\/span>'<\/span><\/span>, []);\r\n\r\nmyApp.controller(<\/span>'<\/span>MainCtrl<\/span>'<\/span><\/span>, [<\/span>'<\/span>$scope<\/span>'<\/span><\/span>, <\/span>function<\/span> (<\/span>$scope<\/span>) {\r\n    \r\n    <\/span>$scope<\/span>.text = <\/span>'<\/span>Hello, Angular fanatic.<\/span>'<\/span><\/span>;\r\n    \r\n}]);\r\n<\/span><\/pre><\/div><\/div><\/div>
      \ub2e4\uc74c\uc740 \uc2e4\ud589\ud55c \uacb0\uacfc\ub2e4:<\/span><\/p>\r\n