[angularJS] 선언적 데이터 바인딩 (.. MVC 구조)

Angular의 철학,

- 기능이 풍부한 동적 HTML을 생성해서 웹 클라이언트 측에서 많은 일을 보이지 않게 처리해준다.(view에서 거의 다 해준다는 것인가 ?)

var myApp = angular.module('myApp', []); myApp.controller('EmailsCtrl', ['$scope', function ($scope) { $scope.emails = {}; $scope.emails.messages = [{ "from": "Steve Jobs", "subject": "I think I'm holding my phone wrong :/", "sent": "2013-10-01T08:05:59Z" },{ "from": "Ellie Goulding", "subject": "I've got Starry Eyes, lulz", "sent": "2013-09-21T19:45:00Z" },{ "from": "Michael Stipe", "subject": "Everybody hurts, sometimes.", "sent": "2013-09-12T11:38:30Z" },{ "from": "Jeremy Clarkson", "subject": "Think I've found the best car... In the world", "sent": "2013-09-03T13:15:11Z" }]; }]);

- 메일에 대한 컨트롤러

-  $scope.emails.messages의 배열에 메시지 정보 객체를 넣는다.

<div ng-app="myApp"> <div class="inbox" ng-controller="EmailsCtrl"> My Inbox: <ul> <li ng-repeat="message in emails.messages"> <p>From: {{ message.from }}</p> <p>Subject: {{ message.subject }}</p> <p>{{ message.sent | date:'MMM d, y h:mm:ss a' }}</p> </li> </ul> </div> </div>

- Angular가 기본으로 제공하고 데이터를 순회하면서 결과를 렌더링하는 ng-repeat 디렉티브 사용. (Jquery의 each문 같은?)

- <li ng-repeat="message in emails.messages"> 이 구문의 message와

    P태그 내에 있는 {{ message.xxxxx }} 이 message는 같아야한다.

- date 필터가 추가되었으니, UTC 날짜로 표현하는 것을 확인할 수 있다.

선언적 바인딩을 더 활용하려면 Angular가 제공하는 ng-* 디렉티브를 공부하면 좋다.

서버, 모델, 뷰 그리고 데이터를 그려주는 부분이 어떻게 조화되는지 확인할 수 있다.

- MVC 구조에 대해 한 번 보고 넘어가자 !

* 출처 :  https://www.slideshare.net/ssuserb05912/meam

  :  http://soomong.net/blog/2014/01/20/translation-ultimate-guide-to-learning-angularjs-in-one-day/