[Angular] AngularJS 튜토리얼 6. 데이터 바인딩(Data Binding)

AngularJS에서의 데이터 바인딩은 모델과 뷰간의 동기화를 의미한다.

 

[ 데이터 모델 ]

 

: Angular 애플리케이션은 보통 데이터 모델을 가지고 있다. 데이터 모델이란 애플리케이션에서 사용가능한 데이터의 Collection을 의미한다.

 

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
	$scope.firstname = 'NY';
	$scope.lastname = 'KIM';
});

 

 

[ HTML 뷰 ]

 

: AngularJS의 애플리케이션이 표시되는(displayed) HTML 컨테이너를 의미한다.

뷰는 모델에 접근(access)이 가능하며, 모델의 데이터를 나타내는 몇가지 방법을 가지고 있다.

 

• ng-bind
• {{}}
• ng-model

 

 

[ ng-model 디렉티브 ]

 

: 뷰의  HTML 요소에 모델의 데이터를 연결하는 데에 사용한다.

 

	<div ng-app="myApp" ng-controller="myCtrl">
	    <input ng-model="lastname">
	</div>
	
	<script>
		var app = angular.module('myApp', []);
		
		app.controller('myCtrl', function($scope) {
			$scope.firstname = 'NY';
			$scope.lastname = 'KIM';
		});
	</script>

 

[ 양방향 바인딩 ]

 

: 첫줄에서 말했듯이 AngularJS에서의 데이터 바인딩은 모델과 뷰간의 동기화를 의미한다.

모델의 데이터가 변경되면 뷰는 변동사항을 반영하고,  뷰의 데이터가 변경되면 모델의 데이터도 변경된다. 이러한 과정은 즉시, 그리고 자동적으로 일어난다.

 

	<div ng-app="myApp" ng-controller="myCtrl">
	    <input ng-model="lastname">
	    <h1>{{lastname}}</h1>
	</div>
	
	<script>
		var app = angular.module('myApp', []);
		
		app.controller('myCtrl', function($scope) {
			$scope.firstname = 'NY';
			$scope.lastname = 'KIM';
		});
	</script>

 

 

[ AngularJS 컨트롤러 ]

 

: AngularJS의 애플리케이션은 컨트롤러에 의해서 제어된다.

모델과 뷰가 동기화 되어있기 때문에 컨트롤러는 뷰에서 완전히 분리되어 데이터에만 집중하는 것이 가능해진다.

이러한 데이터 바인딩의 형식 덕분에 컨트롤러의 변경사항을 뷰에 바로 반영할 수 있다.

 

<div ng-app="myApp" ng-controller="myCtrl">
	<h1 ng-click="changeName()">{{firstname}}</h1>
</div>

<script>
	var app = angular.module('myApp', []);
		
    app.controller('myCtrl', function($scope) {
        $scope.firstname = 'NY';
        $scope.changeName = function () {
        	$scope.firstname = 'JS';
        }
     });
</script>

 

기본 {{firstname}}

클릭 후