AngularJS의 $Scope란 무엇입니까? 기능이 포함된 튜토리얼(예)

작성자 : 제임스 하트만 제임스 하트만
Hours 업데이트

AngularJS의 $scope란 무엇입니까?

AngularJS의 $scope 기본적으로 "컨트롤러"와 "뷰"를 바인딩하는 내장 개체입니다. 뷰에서 액세스할 수 있는 컨트롤러 내의 범위에서 멤버 변수를 정의할 수 있습니다.

아래 예를 고려하십시오.

AngularJS의 $scope

angular.module('app',[]).controller('HelloWorldCtrl'
	function($scope)
	{
		$scope.message = "Hello World"
	});

코드 설명 :

  1. 모듈 이름은 "app"입니다.
  2. 컨트롤러 이름은 "HelloWorldCntrl"입니다.
  3. Scope 객체는 컨트롤러에서 뷰로 정보를 전달하는 데 사용되는 기본 객체입니다.
  4. 범위 개체에 추가된 멤버 변수

동작 설정 또는 추가

이벤트에 반응하거나 뷰에서 일종의 계산/처리를 실행하려면 범위에 동작을 제공해야 합니다.

뷰에 의해 트리거될 수 있는 특정 이벤트에 응답하기 위해 범위 개체에 동작이 추가됩니다. 동작이 컨트롤러에 정의되면 뷰에서 액세스할 수 있습니다.

이를 달성할 수 있는 방법의 예를 살펴보겠습니다.

동작 설정 또는 추가

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta chrset="UTF 8">
    <title>Guru99</title>     
</head>  
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-controller="DemoController">
	{{fullName("Guru","99")}}
</div>
<script type="text/javascript">  
	var app = angular.module("DemoApp", []);
	app.controller("DemoController", function($scope) {
    
    $scope.fullName=function(firstName,lastname){
		return firstName + lastname;
		}
	} );
</script> 

</body>  
</html>

코드 설명 :

  1. 우리는 "fullName"이라는 동작을 생성하고 있습니다. 이 동작은 2개의 매개변수(firstName,lastname)를 허용하는 함수입니다.
  2. 그런 다음 동작은 이러한 두 매개변수의 연결을 반환합니다.
  3. 뷰에서 우리는 동작을 호출하고 동작에 대한 매개변수로 전달되는 "Guru"와 "2"의 두 값을 전달합니다.

명령이 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음 출력이 표시됩니다.

출력:

동작 설정 또는 추가

브라우저에서는 다음의 동작에 전달된 Guru 및 99 값이 모두 연결된 것을 볼 수 있습니다. 제어 장치.

제품 개요

  • 다양한 멤버 변수를 범위 개체에 추가하여 뷰에서 참조할 수 있습니다.
  • 사용자가 수행한 작업에 대해 생성된 이벤트를 사용하기 위해 동작을 추가할 수 있습니다.
  • The AngularJS와 $rootScope 전체 애플리케이션의 범위입니다. 애플리케이션은 $rootScope를 하나만 가질 수 있으며 전역 변수처럼 사용됩니다. Angular JS에서 $scopes는 하위 범위이고 $rootScope는 상위 범위입니다.