質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

解決済

2回答

2162閲覧

Angular JS 1.5.x RESTサーバアクセスのservice化

xexnteratail

総合スコア12

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

0クリップ

投稿2016/09/23 01:32

編集2016/09/23 01:34

###行いたいこと
Angular JS 1.5.8とUI Gridを使用して開発しております。

今までcontrollerで行っていたRESTサーバへのアクセスをservice化し、
共通利用化しようと考えております。

しかし、serviceでのRESTサーバへのアクセス、データの取得まで
はできるのですが、serviceからcontrollerへのデータ戻しができないで
おります。

###コード
■現在動作しているコード = 現在のcontroller上のRESTサーバアクセスコード

JavaScript

1//controller 2 //RESTサーバからデータ取得 3 $scope.d4API = $resource("http://127.0.0.1/dataHyojiList", { 4 callback: 'JSON_CALLBACK' 5 }, { 6 get: { 7 method: 'JSONP' 8 } 9 }); 10 11 $scope.d4API.get({tgt: 'hyojiData'}).$promise.then( 12 function (data) { 13 //データ取得成功 14 $scope.gridOptions.data = data.list; 15 }, 16 function (error) { 17 //データ取得失敗 18 console.log('データ取得失敗'); 19 } 20 ); 21

■サービス化した後のコード

JavaScript

1 2//controller 3/* 4 データを取得し、Ui Gridの表示データとする 5$scope.gridOptions.dataにデータが入ればUI Gridにデータが表示される 6*/ 7 $scope.gridOptions.data = getGrdDataSrvc.getGridData('hyojiData');

JavaScript

1 2//service 3 4/* 5 データを取得し、呼びだし元のcontrollerへ戻す 6*/ 7myApp.service('getGrdDataSrvc', ['$resource', function ($resource) { 8 this.getGridData = function (tgtName) { 9 var d4API = $resource("http://127.0.0.1/dataHyojiList", { 10 callback: 'JSON_CALLBACK' 11 }, { 12 get: { 13 method: 'JSONP' 14 } 15 }); 16 17 d4API.get({tgt: tgtName}).$promise.then( 18 function (data) { 19 //データ取得成功 20 return data.list; //←この時点では、「data」に取得データしたはある=データは取得できている(デバッガで確認済) 21 }, 22 function (error) { 23 //データ取得失敗 24 console.log('データ取得失敗'); 25 } 26 ); 27 } 28}]);

よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

ngResourceは非同期なので、そのまま戻り値を返すことはできません。

javascript

1return d4API.get({tgt: tgtName}).$promise;

として呼び出し元でPromiseの処理をするか、もしくは単に

javascript

1return d4API.get({tgt: tgtName});

とすれば、Promiseが解決した時点で自動的に値が入ります。

投稿2016/09/23 02:01

naga3

総合スコア1293

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

xexnteratail

2016/09/23 07:00

ご回答誠にありがとうございます。 頂いた回答を元に以下の様に変更しました。 ■修正後 //controller.js(呼びだし元) /* データを取得し、Ui Gridの表示データとする $scope.gridOptions.dataにデータが入ればUI Gridにデータが表示される */ $scope.gridOptions.data = getGrdDataSrvc.getGridData('hyojiData'); var tgtName = 'hyojiData'; //呼び出し用の関数を変数に入れる var d4API = getGrdDataSrvc.getGridData(tgtName); //作成した呼び出し用関数を使用してデータを取得 //$resourceは非同期処理なので、このメソッドを最後まで実行して //終了する d4API.get({tgt: tgtName}).$promise.then( //結果が返ると、ここに戻る(ここから処理が開始される)    function (data) {     //データ取得成功   $scope.gridOptions.data = data.list; }, function (error) {      //データ取得失敗 console.log('データ取得失敗'); } ); //service.js /* データを取得し、呼びだし元のcontrollerへ戻す為の関数を返す。 */ myApp.service('getGrdDataSrvc', ['$resource', function ($resource) { this.getGridData = function (tgtName) { var d4API = $resource("http://127.0.0.1/dataHyojiList", { callback: 'JSON_CALLBACK' }, { get: { method: 'JSONP' } }); ■残念なこと   私としてはサービスに全てを移動して、呼びだし元では1行で済ませたかった  のですが、非同期処理のため、それはできない。と理解しました。   もし、「できるよ!」と言うことであればぜひともご教授頂きたい  ですが、まずはこの形で進めます。 ■ありがとうございました。   一部ではありますが、共有化でき、大変助かりました。  ありがとうございました。
xexnteratail

2016/09/23 07:03

すいません。 修正に間違いがありました。 最終行の一番大事なreturnが抜けていました。 修正します。 //service.js /* データを取得し、呼びだし元のcontrollerへ戻す為の関数を返す。 */ myApp.service('getGrdDataSrvc', ['$resource', function ($resource) { this.getGridData = function (tgtName) { var d4API = $resource("http://127.0.0.1/dataHyojiList", { callback: 'JSON_CALLBACK' }, { get: { method: 'JSONP' } }); return d4API;//←これが抜けていました。
naga3

2016/09/23 13:11

ngResourceの仕組みとして、まず空オブジェクトをreturnして、Promiseが解決された時点でデータが入るので、 var d4API = getGrdDataSrvc.getGridData(tgtName); $scope.gridOptions.data = d4API.get({tgt: tgtName}); という感じで書いておけば自動的にデータが入るのではないでしょうか。
guest

0

動かしてないのでわからないですがこんな感じでしょうか

controller

javascript

1myApp.controller('hogeCtl', function ($scope, gridResource) { 2 $scope.gridOptions.data = []; 3 4 $scope.getGridData = function () { 5 gridResource.getListData({tgt: 'hyojiData'}).success(function (data) { 6 $scope.gridOptions.data = data.list; 7 }); 8 } 9});

api

javascript

1myApp.factory('gridResource', function ($http) { 2 var baseApi = 'http://127.0.0.1/'; 3 var self = {}; 4 self.getListData = function (params) { 5 return $http.get(baseApi + 'dataHyojiList', params); 6 }; 7 return self; 8});

投稿2016/09/23 07:17

pinpikokun

総合スコア376

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

xexnteratail

2016/09/24 04:07

ご回答誠にありがとうございます。 今回はとりあえず動作する様になったので、$httpを使う際の参考とさせていただます。 とても助かります。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問