ここではコントローラ間でデータをやりとりするという話題を知っていますが、よくある問題のように思われていました。このタイプのユースケースに対して誰かが「ベストプラクティス」を持っていたとします。AngularJSでui-routerを使ってデータを取得して別の状態に渡す
このシナリオは、ユーザーがリンクをクリックするか、IDを使用してオブジェクトを取得するサービスを呼び出すフォームを送信する場合です。オブジェクトが見つかると、状態が変更され、オブジェクトは新しい状態のコントローラに返されます。オブジェクトが見つからない場合、エラーが返されます。つまり、「そのレコードが見つかりません」。以下の例では
は、電子メールは、フォームを介してコントローラに渡されると「RsvpService」に送信されます。
var MainController = function($state, $http, GuestListService, RsvpService){
var mnCtrl = this;
mnCtrl.submitEmail = submitEmail;
function submitEmail(email){
mnCtrl.error = "";
mnCtrl.emailEntry = "";
RsvpService.getGuestsByEmail(email)
.then(function(res){
//if an error comes back and it's 404, set an error message
if(res === 404){
mnCtrl.error = 'We can\'t find you :(Sure you got the right email?';
}
})
}
}
工場は$ http.post ...
(function(){
'use strict';
var RsvpService = function($http, $state){
var Rsvp = {};
Rsvp.getGuestsByEmail = function(email){
return $http.post('/getGuestsByEmail', {email : email})
.then(function(res){
//if there's a record, set it to Rsvp.guests and redirect to the next state
Rsvp.guests = res.data;
$state.go('rsvp-enter');
}).catch(function(err){
//if there's no record found, server returns a 404 error
return err.status;
});
}
return Rsvp;
}
angular.module('mainApp')
.factory('RsvpService', [
'$http',
'$state',
RsvpService
])
})();
を返します。
状態 'rsvp-enter'では、RsvpServiceからRsvp.guestsプロパティを取得してレコードをスコープに設定します。
var RsvpEnterController = function($state, RsvpService){
var reCtrl = this;
reCtrl.guests = RsvpService.guests
}
これは単純な問題のために物事の非常に回り道のように感じている、と私はおそらく約束を悪用し、自分のコードの中に悪い習慣の多くを導入してるような気がします。たとえば、サービスでエラー処理が実行されており、コントローラの応答が実際にエラー処理を行っています。確かにこれは間違っていますか?私はanglejsとui-routerのこのタイプのユースケースについて誰かが洞察していて、それをより良くするための提案があれば興味がありました。あなたの助けを前にありがとう。
感謝、デビッド、フィードバックと素敵な記事へのリンクです。データをロードする別のメソッドを呼び出す前に、データをチェックするきれいな方法が好きです。私はルーティングをコントローラに移しました。さて、エラーは前のようにコントローラで処理され、データが戻ってきたら$ state.go( 'rsvp-enter')が呼び出されます。それが受け入れられる方法だと思います。それはとにかく働いている! – hughesjmh
@hughesjmh非常にあなたを助けてうれしい:) plz私は今、さらに質問をさせて、私は助けて喜んで –