AngularJS
데이터 공유
수색…
비고
Angular로 작업 할 때 자주 발생하는 질문은 컨트롤러간에 데이터를 공유하는 방법입니다. 서비스를 사용하는 것이 가장 빈번한 응답이며 두 개 이상의 컨트롤러간에 모든 유형의 데이터 객체를 공유하는 팩토리 패턴을 보여주는 간단한 예입니다. 공유 객체 참조이기 때문에 한 컨트롤러의 업데이트를 서비스를 사용하는 다른 모든 컨트롤러에서 즉시 사용할 수 있습니다. 서비스와 공장 모두와 두 공급자 모두에 유의하십시오.
ngStorage를 사용하여 데이터 공유
먼저 index.html에 ngStorage 소스를 포함시킵니다.
ngStorage src를 주입하는 예제는 다음과 같습니다.
<head>
<title>Angular JS ngStorage</title>
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
</head>
ngStorage 는 2 개의 저장소 즉, $localStorage 및 $sessionStorage 합니다. ngStorage를 요구하고 서비스를 주입해야합니다.
ng-app="myApp" 라고 가정하면 다음과 같이 ngStorage 를 주입합니다.
var app = angular.module('myApp', ['ngStorage']);
app.controller('controllerOne', function($localStorage,$sessionStorage) {
// an object to share
var sampleObject = {
name: 'angularjs',
value: 1
};
$localStorage.valueToShare = sampleObject;
$sessionStorage.valueToShare = sampleObject;
})
.controller('controllerTwo', function($localStorage,$sessionStorage) {
console.log('localStorage: '+ $localStorage +'sessionStorage: '+$sessionStorage);
})
$localStorage 및 $sessionStorage 는 컨트롤러에 이러한 서비스를 주입하는 한 모든 컨트롤러를 통해 전역으로 액세스 할 수 있습니다.
HTML5 의 localStorage 및 sessionStorage 를 사용할 수도 있습니다. 그러나 HTML5 localStorage 사용하려면 개체를 사용하거나 저장하기 전에 개체를 serialize 및 deserialize해야합니다.
예 :
var myObj = {
firstname: "Nic",
lastname: "Raboy",
website: "https://www.google.com"
}
//if you wanted to save into localStorage, serialize it
window.localStorage.set("saved", JSON.stringify(myObj));
//unserialize to get object
var myObj = JSON.parse(window.localStorage.get("saved"));
서비스를 사용하여 한 컨트롤러에서 다른 컨트롤러로 데이터 공유
우리는 controllers 간에 데이터를 set 하고 get service 를 생성 한 다음 사용하려는 컨트롤러 기능에 해당 서비스를 주입 할 수 있습니다.
서비스 :
app.service('setGetData', function() {
var data = '';
getData: function() { return data; },
setData: function(requestData) { data = requestData; }
});
컨트롤러 :
app.controller('myCtrl1', ['setGetData',function(setGetData) {
// To set the data from the one controller
var data = 'Hello World !!';
setGetData.setData(data);
}]);
app.controller('myCtrl2', ['setGetData',function(setGetData) {
// To get the data from the another controller
var res = setGetData.getData();
console.log(res); // Hello World !!
}]);
여기서는 myCtrl1 이 데이터를 setting 하는 데 사용되고 myCtrl2 가 데이터를 getting 데 사용됨을 알 수 있습니다. 그래서 우리는 한 컨트롤러에서 다른 컨트롤러로 데이터를 공유 할 수 있습니다.