angular.jsを使用してSPAのページ全体の状態を維持する方法

Question

単一ページアーキテクチャを使用すると、使用が特定のページに移動するたびに、そのページのコントローラが実行されます。私は、さまざまなSPAのページ全体で状態の多くを維持する必要があります。

質問：$ rootScopeを汚染することなくコントローラ（SPAページ）間で状態を維持する適切な方法は何ですか？

何らかの理由で、状態を管理するためにサービスを使用するのが「適切」ではないようです。

おかげで、 -Andres

Answer 1

答えがサービスを使用することです。サービスは、複数のコントローラに注入可能なシングルトンオブジェクトであり、ステートを格納するために使用できます。

あなたの状態の中で、あなたは

app.config(function($routeProvider){ 
$routeProvider.when('/', { 
    controller: 'MainCtrl' 
}).when('/another', { 
    controller: 'SideCtrl' 
}); 
}); 

app.controller('MainCtrl', function($scope, State){ 
    $scope.formData = State.formData; 

    $scope./* other scope stuff that deal with with your current page*/ 
}); 

app.controller('SideCtrl', function($scope, State){ 
    $scope.formData = State.formData; // same state from MainCtrl 

}); 

app.directive('myDirective', function(State){ 
    return { 
    controller: function(){ 
     State.formData; // same state! 
    } 
    }; 
}); 

コードcourtesy

Answer 2

永続ストレージを維持するためにlocalStorage、またはsessionStorageのようなキャッシュ機構のいくつかの種類を使用することができますこれは、内部に直接あなたの状態を保存するために良い習慣ではありません$ rootScope。

なぜですか？

角度（ダーティチェック）のダイジェストサイクル中に、rootScopeはアプリケーションのすべてのスコープウォッチャーが「安定」していることを確認します。これは、DOM内で多くの、多くの、多くのループが変更をチェックすることを意味します。本当に重い...

しかし、あなたはより良いものを作ることができ、あなたは複数のソリューションがあります。

ソリューション1 - あなたのコンポーネント/ディレクティブツリーが

/高次のディレクティブを使用して、あなたの状態のツリーに適合し成分子コンポーネント/ディレクティブを介してデータを渡します。このようにして、すべてが親で管理され、ステートレスコンポーネントを提供して他の場所に何も格納する必要はありません。 あなたのコンポーネントツリーがあなたの状態ツリーに合っている場合、とても簡単な解決策です。

ソリューション2 - あなたのコンポーネント/ディレクティブ木はあなたがそれらの内部で直接情報のいくつかの種類を保存するために、角度のサービスを使用し、どこでもあなたが必要とする状態を再利用することができ、あなたの状態のツリー

に合わせdoesntの。 angularjs内のすべてのサービス（工場/プロバイダ/サービス）シングルトンなので、私は本当にこのソリューション好きではない、それはアンチパターンです...

ソリューション3 - Reduxの

Reduxのは、提示されています（それはReactjsコミュニティだけではありません。

Angularjs、Angular 2などで使うことができます。コンポーネントツリーがあなたの状態ツリーに合わない場合は、フロントエンドのjavascriptプロジェクト/ fwでうまく動作するこのライブラリに注目することをお勧めします。