AngularJSでui-routerを使ってデータを取得して別の状態に渡す

Question

ここではコントローラ間でデータをやりとりするという話題を知っていますが、よくある問題のように思われていました。このタイプのユースケースに対して誰かが「ベストプラクティス」を持っていたとします。

このシナリオは、ユーザーがリンクをクリックするか、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のこのタイプのユースケースについて誰かが洞察していて、それをより良くするための提案があれば興味がありました。あなたの助けを前にありがとう。

Answer 1

ルーティングロジックをコントローラに移す方が良いと思います。したがって、サービスRsvpServiceは、Rsvpのデータコントローラまたはデータモーダルのように機能します。セッター機能と更新機能を追加することもできます。

さらに、の内部では、変数Rsvpが空でないかどうかを調べることができます。そうでない場合は、再びフェッチするのではなく戻ります。 http://www.webdeveasy.com/angularjs-data-model/

Answer 2

タイトルから、あなたはおそらく、たとえば、paramsになります。

.state('home', { 
    params: { 
    email: null 
    } 
}) 

は、例えば$のstate.params.emailを経由してアクセスします。 $ state.goを渡すには、$ state.go（ 'another.page'、{email：$ email_value}）のようにします。

またはdata：例えば$のstate.current.data.email経由

.state('home', { 
    data: { 
    email: null 
    } 
}) 

アクセス。