AngularJSのクライアントのみの状態を管理します-jsチュートリアル-php.cn

Managing Client-Only State in AngularJS

AngularJSのクライアントのみの状態を管理します

キーテイクアウト

ビューモデルを注射可能なサービスに抽出すると、特に複雑でリアルタイムの更新があるアプリケーションのスケーリングに役立ちます。監視やフィルタリングなどの手法を使用して、状態の変更を管理し、アプリケーションのAPIの複合性を改善できます。
angularjsなどのJavaScriptフレームワークのビューモデルは、サーバー上のドメインモデルとは異なる場合があります。ビューモデルは、サーバーに存在する必要さえありません。その後、ビューモデルにクライアントのみの状態を持つことができます。「アニメーションスタート」、「アニメーションエンド」または「ドラッグ」と「ドロップ」。この投稿は、Angularの$リソースサービスを使用してビューモデルを作成および保存する際に、状態の変更に集中する予定です。
このアプローチは、単一の消費者を含むアプリケーションには問題ありません。このコードが複数の消費者にとってどれほど退屈でエラーが発生しやすいか想像してみてください！しかし、状態の変更ロジックを1つの場所でカプセル化できるとしたら？

記事リソースを注射可能なサービスに引き出すことから始めましょう。また、記事が最初に作成されたときに、最も些細な状態の設定を誰にも追加しません。

検索と保存はどうですか？消費者に$リソースサービスとして現れることを望んでいるので、一貫して1つのように機能する必要があります。 John Resigの優れた本「Secrets of the JavaScript Ninja」で学んだテクニックは、ここで非常に便利です - 機能ラッピング。彼の実装は、注射可能な角度サービスに直接持ち上げられました。

angular<span>.module('clientOnlyState.controllers')
</span>    <span>.controller('ArticleCtrl', function($scope, $resource, ArticleStates /* simple lookup */) {
</span>        <span>var Article = $resource('/article/:articleId', { articleId: '@id' });
</span>
        <span>var article = new Article({ id: 1, title: 'A title', author: 'M Godfrey' });
</span>        article<span>.state = ArticleStates.NONE; // "NONE"
</span>
        $scope<span>.article = article;
</span>
        $scope<span>.save = function() {
</span>            article<span>.state = ArticleStates.SAVING; // "SAVING"
</span>
            article<span>.$save(function success() {
</span>                article<span>.state = ArticleStates.SAVED; // "SAVED"
</span>            <span>});
</span>        <span>};
</span>    <span>});</span>

ログイン後にコピー

これにより、保存をラップして記事の方法を取得し、前後に別の/追加を行うことができます。

私たちのコントローラーは、このためにleanせなくなり始め、状態がどのように設定されているかを完全に知らない。コントローラーも気にしてはならないので、これは良いことです

angular<span>.module('clientOnlyState.controllers')
</span>    <span>.controller('ArticleCtrl', function($scope, $resource, ArticleStates /* simple lookup */) {
</span>        <span>var Article = $resource('/article/:articleId', { articleId: '@id' });
</span>
        <span>var article = new Article({ id: 1, title: 'A title', author: 'M Godfrey' });
</span>        article<span>.state = ArticleStates.NONE; // "NONE"
</span>
        $scope<span>.article = article;
</span>
        $scope<span>.save = function() {
</span>            article<span>.state = ArticleStates.SAVING; // "SAVING"
</span>
            article<span>.$save(function success() {
</span>                article<span>.state = ArticleStates.SAVED; // "SAVED"
</span>            <span>});
</span>        <span>};
</span>    <span>});</span>

ログイン後にコピー

カプセル化の利点

私たちはコントローラーの外側の状態の変更をカプセル化するために妥当な長さになりましたが、私たちはどのような利点を得ていますか？

私たちのコントローラーは、古い状態と新しい状態を通過している時計リスナーを利用してメッセージを設定できるようになりました。以下に示すように、ローカル翻訳を実行することもできます。

$は、アプリケーションのAPIを形成するスコープ、ディレクティブ、フィルターを考慮してください。 HTMLビューこのAPIを消費します。 APIの複合性が大きいほど、再利用の可能性が高くなります。フィルターは、新しいウォッチングと古い監視にわたって複合性を改善できますか？

angular<span>.module('clientOnlyState.services')
</span>    <span>.factory('Article', function($resource<span>, ArticleStates</span>) {
</span>
        <span>var Article = $resource('/article/:articleId', { articleId: '@id' });
</span>
        <span>// Consumers will think they're getting an Article instance, and eventually they are...
</span>        <span>return function(data) {
</span>            <span>var article = new Article(data);
</span>            article<span>.state = ArticleStates.NONE;
</span>            <span>return article;
</span>        <span>}
</span>    <span>});</span>

ログイン後にコピー

フィルターを介した

作曲、万能薬

次のようなものは私が念頭に置いているものです。式の各部分は再利用可能になります。

Angular 1.3の時点で、フィルターは$ Statefulプロパティを使用できますが、Angularが入力パラメーターの値に基づいてフィルターを呼び出す結果をキャッシュできないため、その使用は強く落胆しています。そのため、ステートフルなパラメーターで制限範囲（前の状態）に渡され、翻訳（利用可能な翻訳）。

angular<span>.module('clientOnlyState.services')
</span>    <span>.factory('wrapMethod', function() {
</span>        <span>return function(object<span>, method, wrapper</span>) {
</span>            <span>var fn = object[method];
</span>
            <span>return object[method] = function() {
</span>                <span>return wrapper.apply(this, [fn.bind(this)].concat(
</span>                    <span>Array.prototype.slice.call(arguments))
</span>                <span>);
</span>            <span>};
</span>        <span>}
</span>    <span>});</span>

ログイン後にコピー

このため、記事のわずかな修正が必要です。

最終結果はそれほどきれいではありませんが、それでも非常に強力です：

angular<span>.module('clientOnlyState.services')
</span>    <span>.factory('Article', function($resource<span>, ArticleStates, wrapMethod</span>) {
</span>        <span>var Article = $resource('/article/:articleId', { articleId: '@id' });
</span>
        <span>wrapMethod(Article, 'get', function(original<span>, params</span>) {
</span>            <span>var article = original(params);
</span>
            article<span>.$promise.then(function(article) {
</span>                article<span>.state = ArticleStates.NONE;
</span>            <span>});
</span>
            <span>return article;
</span>        <span>});
</span>
        <span>// Consumers will actually call $save with optional params, success and error arguments
</span>        <span>// $save consolidates arguments and then calls our wrapper, additionally passing the Resource instance
</span>        <span>wrapMethod(Article, 'save', function(original<span>, params, article, success, error</span>) {
</span>            article<span>.state = ArticleStates.SAVING;
</span>
            <span>return original.call(this, params, article, function (article) {
</span>                article<span>.state = ArticleStates.SAVED;
</span>                success <span>&& success(article);
</span>            <span>}, function(article) {
</span>                article<span>.state = ArticleStates.ERROR;
</span>                error <span>&& error(article);
</span>            <span>});
</span>        <span>});
</span>
        <span>// $resource(...) returns a function that also has methods
</span>        <span>// As such we reference Article's own properties via extend
</span>        <span>// Which in the case of get and save are already wrapped functions
</span>        <span>return angular.extend(function(data) {
</span>            <span>var article = new Article(data);
</span>            article<span>.state = ArticleStates.NONE;
</span>            <span>return article;
</span>        <span>}, Article);
</span>    <span>});</span>

ログイン後にコピー

私たちのコントローラーは、特に翻訳を注射可能なサービスに引き出すことができると考える場合に再びleanせます。

angular<span>.module('clientOnlyState.controllers')
</span>    <span>.controller('ArticleCtrl', function($scope<span>, Article</span>) {
</span>        <span>var article = new Article({ id: 1, title: 'A title', author: 'M Godfrey' });
</span>        
        <span>console.log(article.state); // "NONE"
</span>
        $scope<span>.article = article;
</span>
        $scope<span>.save = function() {
</span>            article<span>.$save({}, function success() {
</span>                <span>console.log(article.state); // "SAVED"
</span>            <span>}, function error() {
</span>                <span>console.log(article.state); // "ERROR"
</span>            <span>});
</span>        <span>};
</span>    <span>});</span>

ログイン後にコピー

結論

angular<span>.module('clientOnlyState.controllers')
</span>    <span>.controller('ArticleCtrl', function($scope<span>, Article, ArticleStates</span>) {
</span>        <span>var article = new Article({ id: 1, title: 'A title', author: 'M Godfrey' });
</span>
        <span>var translations = {};
</span>        translations<span>[ArticleStates.SAVED] = 'Saved, oh yeah!';
</span>        translations<span>['default'] = '';
</span>
        $scope<span>.article = article;
</span>
        $scope<span>.save = function() {
</span>            article<span>.$save({});
</span>        <span>};
</span>
        $scope<span>.$watch('article.state', function(newState<span>, oldState</span>) {
</span>            <span>if (newState == ArticleStates.SAVED && oldState == ArticleStates.SAVING) {
</span>                $scope<span>.message = translations[newState];
</span>            <span>} else {
</span>                $scope<span>.message = translations['default'];
</span>            <span>}
</span>        <span>});
</span>    <span>});</span>

ログイン後にコピー

ビューモデルを注射可能なサービスに抽出すると、アプリケーションのスケーリングが役立ちます。この投稿に記載されている例は、意図的に簡単です。通貨ペアの取引を許可するアプリケーション（例：GBPからUSD、EURからGBPなど）を検討してください。各通貨ペアは製品を表します。このようなアプリケーションでは、数百の製品が存在する可能性があり、それぞれがリアルタイムの価格の更新を受け取ります。価格の更新は、現在の価格よりも高くまたは低くなる可能性があります。アプリケーションの一部は、2回連続して上昇した価格を気にする場合がありますが、別の部分は、より低くなった価格を気にする場合があります。これらの価格変化状態を監視できることは、アプリケーションのさまざまな消費部分を大幅に簡素化することであり、

古い値と新しい値に基づいて監視するための代替方法を提示しました。どちらも完全に受け入れられるテクニックです。実際、この投稿の調査を始めたときに私が念頭に置いていたものです。フィルタリングは、郵便記入部近くで特定された潜在的な改善でした

<span><span><span><p</span>></span>{{article.state | limitToTransition:"SAVING":"SAVED" | translate}}<span><span></p</span>></span></span>

ログイン後にコピー

私が提示したテクニックが、角度アプリのスケーリングに役立つかどうかを確認したいと思います。すべてのフィードバックはコメントで大幅に受け取ります！

この投稿の調査中に作成されたコードサンプルは、Githubでも利用できます。

angularjsのクライアント状態の管理に関するよくある質問

$ StateProviderは、AngularJSのクライアント状態を管理する上で重要な役割を果たします。これは、アプリケーションの状態を定義できるサービスです。各状態は、UI全体とナビゲーションの観点から、アプリケーションの「場所」に対応しています。 $ StateProviderは、さまざまなビューをルーティングするAPIを提供します。状態がアクティブ化されると、Resolveプロパティを介してデータのセットを解決できます。その後、このデータはコントローラーに注入されます。Angularjsの状態を管理する最良の方法は、アプリケーションの特定のニーズに依存します。ただし、UIルーターを使用することは、開発者の間で人気のある選択肢です。 UI-Routerは、状態を管理するための柔軟で堅牢なソリューションを提供するサードパーティモジュールです。ネストされたビューと複数の名前付きビューを可能にします。これは、より大きなアプリケーションで非常に役立つことがあります。UIルーターは、AngularJSのデフォルトルーティングシステムとどのように異なりますか？ AngularJSのデフォルトルーティングシステムに代わる、より強力で柔軟な代替品。デフォルトのルーターはルートを使用して状態を管理しますが、UIルーターは状態を使用します。これは階層的にネストおよび編成できます。これにより、複数のビューとネストされた状態を備えたより複雑なアプリケーションが可能になります。

大規模なAngularJSアプリケーションで国家管理が重要なのはなぜですか？ユーザーインターフェイスの一貫性と予測可能性を維持します。適切な国家管理がなければ、変更を追跡してアプリケーションの動作を管理し、バグとユーザーエクスペリエンスの低下につながることがますます困難になる可能性があります。 Angularjsでは、状態は特定の時点でのシステムまたはアプリケーションのステータスを指します。ユーザーインターフェイスのステータス、データモデル値などのさまざまなものを含めることができます。状態はUIビューを定義するために使用され、階層的にネストおよび編成されます。各状態は、UI全体とナビゲーションの観点からアプリケーションの「場所」に対応しています。Angularjsでの状態管理にUIルーターを使用することの利点は何ですか？

UI-Routerは、AngularJSの州管理にいくつかの利点を提供します。ネストされたビューと複数の名前付きビューを可能にします。これは、より大きなアプリケーションで非常に役立ちます。また、AngularJSのデフォルトのルートベースのルーティングよりも柔軟で強力な状態ベースのルーティングも提供します。 $ state.go（）メソッドを使用してangularjsで。この方法は、状態の名前を最初の引数として、およびその2番目の引数としてパラメーターのオプションのオブジェクトを受け取ります。パラメーターオブジェクトを使用して、データを状態に渡す状態にデータを渡すことができます。