AngularJS
データの共有
サーチ…
備考
Angularで作業するときのよくある質問は、コントローラ間でデータを共有する方法です。 サービスの使用が最も頻繁に行われるレスポンスで、これは2つ以上のコントローラ間で任意のタイプのデータオブジェクトを共有するためのファクトリパターンを示す簡単な例です。これは共有オブジェクト参照であるため、あるコントローラの更新は、そのサービスを使用する他のすべてのコントローラで直ちに利用可能になります。サービスと工場の両方と両方のプロバイダに注意してください。
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 。ただし、 HTML5 localStorageを使用するには、オブジェクトを使用または保存する前に、オブジェクトを直列化および逆シリアル化する必要があります。
例えば：
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使用されるgettingがmyCtrl2ます。そこで、あるコントローラのデータをこのようなコントローラに共有することができます。
