コントローラ間でデータを渡す

Question

AngularJSは、さまざまなMV *フレームワークから来ています。 私はフレームワークが好きですが、私はコントローラ間でデータを渡すことに問題があります。

いくつかの入力（input.html）とコントローラを持つ画面があるとしましょう（たとえば、InputCtrl）。
コントローラApproveCtrlを使用して承認（approve.html）すると、別の画面に移動するボタンが表示されます。
このApproveCtrlには、InputCtrlのデータが必要です。これは大きなアプリケーションでは非常に一般的なシナリオのようです。私の以前のMV *フレームワークで

、これは（擬似コード）のように扱われます：

var self = this; 
    onClick = function() { 
      var approveCtrl = DI.resolve(ApproveCtrl); 
      approveCtrl.property1 = self.property1; 
      approveCtrl.property1 = self.property2; 
      self.router.show(approveCtrl); 
    }    

• それは最初Controller-のように動作します。 コントローラーを最初に作成して、コントローラーを正しい状態にすることができます。その後、ビューが作成されます。

さて、AngularJSで、私はこのようなハンドリングだ：

var self = this; 
onClick = function(){ 
      self.$locationService.path('approve');  
} 

• これは、ビュー、最初のように動作します。 ナビゲーションするビュー/ルートを指定すると、コントローラはフレームワークによって作成されます。

作成されたコントローラの状態を制御し、それにデータを渡すことは困難です。 は、私が見て、次のアプローチを試みたが、すべてが、それは私の意見で自分の問題だ持っていました。このサービス

• このルックスで共有することが
  1. がApproveCtrl InputCtrl &に共有サービスを注入し、すべてのデータを置くを汚い仕事のように。共有サービスの状態はグローバルな状態になりますが、私はApproveCtrlにデータを渡すだけです。
  2. この共有サービスの有効期間は、私が必要とする以上に長くなります - 承認データにデータを渡すだけです

は$ routeParamsにデータを渡し

• パスに多くのパラメータを持つとき、これはかなり厄介取得

使用$スコープイベント

• コンこれは私がイベントを使用するものではありません - 私はApproveCtrlにデータを渡す必要があります。何もイベントはありません
• これはかなり面倒です。私はそれにそれを放送することを、最初の親にイベントを送信する必要が子供

が、私はここで何かをしないのですの？あまりにも多くの小さなコントローラを作成していますか？ 私は他のフレームワークの習慣をここであまりにも重視しようとしていますか？

Answer 1

AngularJSはMVCよりもモジュラー型です。

クラシックMVCは、ControllerがViewでModelをステッチするようなやり方で、Viewと直接やり取りしないでください。例えば、複数の方法で互いの間で対話することができ

角度で

あなたには、いくつかの完全にオプション、複数持つことができ、エンティティ：

異なるの間でデータを通信する複数の方法がある理由です

エンティティ。次のことができます（：答えは両方の技術を示し、上記と同じリンク注）

または

を

• はメッセージusing shared systemを送るusing events
• にメッセージを送るdifference between this and $scope
• を使用してコントローラ間で直接メッセージを送ります
  • AJAXバックエンドを使用してメッセージを送信する
  • は、より多くの

  （例えばMQなど）、外部システムを使用してメッセージを送信...と。その多様性のため、Angularは開発者/デザイナーが最も快適な方法を選択して実行することができます。私はAngularJS Developer Guideを読むことをお勧めします。は、祝福されたのいくつかの一般的な問題の解決策を見つけることができます。

Answer 2

2つのビュー間で単純にデータを共有することを目的としている場合は、おそらくサービスが必要です。データストアへの永続化に興味がある場合は、REST APIなどの何らかのバックエンドサービスを検討することができます。このために$ httpサービスを見てください。

Answer 3

XLIIが完全な応答を返したとしても、このチュートリアルではサービスを使用していました。これは非常に面白く、2ウェイバインディングプロパティを使用してコントロール間でデータを共有するための簡単な方法です。https://egghead.io/lessons/angularjs-sharing-data-between-controllers

私はまだこれを使用していません。

は、そうでない場合はイベントに基づいて、また、この他の方法があります：http://www.objectpartners.com/2013/08/21/using-services-and-messages-to-share-data-between-controllers-in-angularjs/

Answer 4

あなたが別のページ（PAGE2）に1ページ（1ページ目）から、単純な文字列データを渡したい場合は、1つの解決策は、伝統的なURLパラメータを使用することです。 "/ page2/param1/param2"のようなパラメータを持つpage2ルートURLを呼び出します。ページ2のコントローラは、 "routeParams"のパラメータを受信します。あなたはのrouteParams.param1とrouteParams.param2のようなパラメータにアクセスすることができます。

"/page2/param1/param2" 

ページ2経路：

$routeProvider.when('/page2/:param1/:param2', { 
    templateUrl: 'pages/page2.html',  
    controller: 'Page2Ctrl' 
}); 

そして、1ページ目のコントローラ（JS）またはパラメータとのHTML内のURLからPAGE2経路呼び出しHow to get the url parameters using angular js

：以下のコードは、から採用されていますコントローラ：

.controller('Page2Ctrl', ['$scope','$routeParams', function($scope, $routeParams) { 
    $scope.param1 = $routeParams.param1; 
    $scope.param2 = $routeParams.param2; 
    ... 
}]); 

ここで、パラメータ（param1とpa ram2）の値をpage2のhtml/templateに追加します。