AngularJS에서 컨트롤러 간에 데이터 공유
AngularJS에서 컨트롤러 간에 데이터를 공유하기 위해 여러 가지 방법을 사용할 수 있지만 여기서는 두 가지 방법만 설명합니다. 첫 번째 방법은 변수 범위를 지정하는 것입니다. 두 번째 방법은 factory 또는 service를 사용하는 것입니다.
AngularJS의 상위 컨트롤러와 하위 컨트롤러 간에 데이터 공유
자식 컨트롤러의 범위는 부모 컨트롤러의 범위를 상속하므로 컨트롤러 상속을 사용하여 간단히 데이터를 공유할 수 있습니다.
자식 구성 요소가 부모 구성 요소 내에 중첩되면 자식 구성 요소는 부모의 데이터에 액세스할 수 있습니다.
이것은 양방향 데이터 바인딩을 사용하여 수행됩니다. 부모 구성 요소는 속성 바인딩이나 이벤트 바인딩을 사용하여 자식에게 데이터를 전달할 수 있습니다.
그런 다음 자식은 컨트롤러의 속성 바인딩 또는 이벤트 바인딩을 사용하여 이 데이터를 부모에게 다시 전달할 수 있습니다. 이 패턴은 관련된 구성 요소 간에 선택을 공유하는 데에도 사용됩니다.
범위 개체
범위 개체는 컨트롤러가 인스턴스화될 때 만들어지며 모델 및 보기 속성을 모두 포함합니다.
모델 속성은 다른 컨트롤러와 공유되는 모든 정보를 보유하거나 저장합니다. 반면에 view 속성은 이 정보를 화면에 표시하는 정보(예: HTML)를 갖거나 저장합니다.
AngularJS에서 팩토리 또는 서비스를 사용하여 컨트롤러 간에 데이터 공유
AngularJS에서는 팩토리 또는 서비스를 사용하여 컨트롤러 간에 데이터를 공유할 수 있습니다.
팩토리는 객체를 생성하고 업데이트하는 메소드와 함께 객체를 반환합니다. 한 컨트롤러에서 새 개체를 만들고 다른 컨트롤러와 공유하려는 경우 팩토리를 사용할 수 있습니다.
서비스는 컨트롤러와 다른 JavaScript 파일 간에 데이터를 공유하려는 경우에 사용됩니다.
결론적으로 AngularJS 팩토리 및 서비스는 특정 목적을 실행하고 메소드와 속성을 모두 포함하는 JS 모듈입니다.
의존성 주입을 통해 다른 구성 요소에 주입될 수 있습니다. 팩토리에서 공유 변수를 정의하고, 이를 두 컨트롤러에 주입하고, 이 메소드에서 범위 변수를 팩토리 데이터에 연결할 수 있습니다.
아래 단계를 따라야 합니다.
-
공장 또는 서비스를 등록합니다.
-
데이터 가져오기를 담당할 서비스 또는 팩토리를 만듭니다.
-
서비스 또는 팩토리를 모듈의 공급자 목록에 추가합니다.
-
서비스를 사용할 함수로 컨트롤러를 만듭니다.
아래는 위에서 논의한 두 가지 방법을 사용하여 컨트롤러 간에 데이터를 공유하는 방법을 이해하는 데 도움이 되는 예입니다.
자바스크립트 코드:
var myApp = angular.module('myApp', []);
myApp.service('demo', [function () {
'use strict';
this.pointtot = {hello: 'Adil'};
}]);
myApp.controller('Ctrl1', ['$scope', 'demo', function($scope, demo) {
$scope.myPointtot = demo.pointtot;
}]);
myApp.controller('Ctrl2', ['$scope', 'demo', function($scope, demo) {
$scope.yourPointtot = demo.pointtot;
}]);
HTML 코드:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.2.1/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Example of sharing data between controllers</h1>
<div ng-controller="Ctrl1">
<p>Write something in Controller 1 <input ng-model="myPointtot.hello" type="text" /></p>
</div>
<div ng-controller="Ctrl2">
<h4>Everything you write in controller 1, it will be copied to controller 2 and vice versa</h4>
<p>Write something in Controller 2 <input ng-model="yourPointtot.hello" type="text" /></p>
</div>
</body>
</html>
여기를 클릭 위 코드의 라이브 데모를 확인하십시오.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook