[Angular] AngularJS 튜토리얼 8. 스코프(Scope)

스코프는 HTML(view) 과 자바스크립트(controller)를 연결해준다.

사용가능한 프로퍼티와 메서드를 가지고 있는 객체이며, 뷰와 컨트롤러 양쪽에서 사용가능하다.

 

 

[ Scope 사용방법 ]

 

: 컨트롤러를 만들때 $scope 객체를 인자(argument)로 넘기게 된다.

컨트롤러에서 $scope 객체에 프로퍼티를 추가하면, 뷰(HTML)에서는 해당 프로퍼티에 접근할 수 있다.

뷰에서는 $scope라는 접두어를 붙이지 않고 단순히 프로퍼티명을 쓰는 것만으로 데이터를 사용할 수 있다.

 

	<div ng-app="myApp" ng-controller="myCtrl">
		<h1>{{carname}}</h1>
	</div>
	
	<script>
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope) {
			$scope.carname = "Pride";
		});
	</script>

 

 

[ Scope 이해하기 ]

 

: AngularJS 애플리케이션이 다음의 세가지로 구성되어있다고 한다면,

 

• 뷰(View) : HTML
• 모델(Model) : 현재 뷰에서 사용가능한 데이터
• 컨트롤러(Controller) : 데이터를 생성/변경/제거/제어 하는 자바스크립트 함수

 

scope는 모델이다.

scope는 프로퍼티와 메서드를 가지고 있는 자바스크립트 객체이며, 뷰와 컨트롤러 양쪽에서 사용이 가능하다.

 

 

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

 

 

[ Scope 파악하기 ]

 

: 어느때든 현재 무슨 scope를 다루고 있는지 파악해야한다.

scope가 하나면 문제가 없지만, 대규모의 애플리케이션의 HTML DOM에서는 특정 scope에만 접근이 가능한 부분이 있을 수 있다.

 

	<div ng-app="myApp" ng-controller="myCtrl">
		<ul>
			<li ng-repeat="x in names">{{x}}</li>
		</ul>
	</div>
	
	<script>
		var app = angular.module('myApp', []);
		
		app.controller('myCtrl', function($scope) {
			$scope.names = ['NY', 'JS', 'HW'];
		});
	</script>

ng-repeat 디렉티브에서, 각각의 반복되는 요소들은 현재 반복되는 오브젝트에 대해 접근해서 데이터를 바인딩한다.

 

위의 예시에서 각각의 <li> 요소는 현재 반복되는 객체(여기서는 x를 통해 언급되는 값, names array 안의 String 객체) 에 접근한다.

 

[ Root Scope ]

 

: 모든 애플리케이션은 $rootScope를 가진다. $rootScope는 ng-app 디렉티브를 포함하는 HTML 요소에 대해 생성된  scope를 의미한다.

 

rootScope는 모든 애플리케이션에서 사용 가능하다.

 

rootScope와 현재 scope에서 동일한 이름을 가지는 변수가 있다면, 애플리케이션은 현재 scope에 정의된 변수를 사용한다.

 

console.log($rootScope)

 

 

	<p>The rootScope`s favorite color : </p>
	<h1>{{color}}</h1>
	
	<div ng-controller="myCtrl">
		<p>The scope of the controller`s favorite color:</p>
		<h1>{{color}}</h1>
	</div>
	
	<p>The rootScope`s favorite color is still: </p>
	<h1>{{color}}</h1>
    
	<script>
    	var app = angular.module('myApp', []);
		
		app.run(function($rootScope) {
			$rootScope.color = 'blue';
		});
		app.controller('myCtrl', function($scope) {
			$scope.color = 'red';
		});
		
	</script>

rootScope에서 정의된 color와 myCtrl 의 scope에서 정의된 color가 다르다.

 

 

결과. $scope가 우선한다