Clever Geek Handbook

AngularJSでリストを操作するための一連のメソッド

多くの場合、プリミティブリストを使用する必要があるため、同じメソッドを記述しないために、1つのサービスでそれらを収集しました。 コントローラーから機能を取り出す例として、彼について少しお話しします。



デモ 、 サンドボックス （多くはデモで再生されるため、データをダウンロードできます）



例からわかるように、問題があります。同様の機能（アイテムの追加、削除、並べ替え-リストには他に何がありますか:-)を持つリストがたくさんあります。



サービス



コントローラで同じメソッドを記述することは、明らかに良いアイデアではありません。 幸いなことに、Angularはサービスを使用して一般的なコードを作成するいくつかの方法を提供します。 それらの詳細については、 こちらをご覧ください 。



このタスクでは、最も単純なタイプであるfactory：が使用されます。 



angular.module('oi.list', []) .factory('oiList', function () { return function (scope, Resource) { scope.items = Resource.query() scope.add = Resource.add() ... } }


ここで、サービスをコントローラーに導入すると、必要なすべてのメソッドをスコープに書き込む関数が取得されます。 



 .controller('MyCtrl', ['$scope', 'ListRes', function ($scope, ListRes) { oiList($scope, ListRes); }])




キャッシング



良いですが、改善することができます。 Ajax（$リソース、$ http）でデータを受信すると、Angularはデフォルトで受信したデータをキャッシュします。 これは、たとえば、ng-viewでデータページをロードし、ページを離れて再び戻ると、データを再度ロードする必要がないことを意味します。 それらはキャッシュから取得されます。



残念ながら、これは基本的な場合にのみ機能します。 Angularはリクエストをキャッシュしますが、モデルはキャッシュしません。 つまり Resource.query()



を使用してデータ配列をロードおよびキャッシュした後、 resArr[0].get()



を使用して個々の要素を要求しても、Angularはキャッシュからデータを取得しません。 キャッシュはモデルに関連付けられていないため、モデルの更新時にキャッシュを更新することは重要なタスクになります。



これらの問題を解決するには、 value



型のoiListCache



サービスをアプリケーションに追加します。 モデルへのリンクが保存されます。 データを読み込むときにリンクが空であることがわかった場合は、サーバーから読み込みます。それ以外の場合は、参照によってモデルを取得します。 



 .value('oiListCache', {cacheRes: {}}) .factory('oiList', ['oiListCache', function (oiListCache) { return function (scope, cache, Resource) { if (angular.equals(oiListCache.cacheRes[cache], [])) { //        scope.items = oiListCache.cacheRes[cache] = Resource.query(); } else { //    scope.items = oiListCache.cacheRes[cache]; } } }


モデルごとに、それを特徴付けるcache



ラインを使用して、異なるモデルが個別のキャッシュを持つようにします。



方法



モジュール内には、リストを操作するための多くの関数があります。 私はそのようなセットを持っています、あなたのものはわずかに異なるかもしれません。 新しい要素を追加するという、誰もが持つ方法について少し説明します。 既にデータベースに追加されており、その識別子がわかっている場合、ユーザーに要素を表示するのが最も簡単です。 欠点は、ユーザーがサーバーからの応答を待たなければならないことです。



最善の方法は、新しい要素をすぐに表示し、応答を受信した後にデータベースに添付することです。 そして、ここに大きなキャッチがあります。 ユーザーがまだ識別子を持たないアイテムを削除した場合はどうすればよいですか？ または同時にいくつかの要素を追加しましたか？ この場合、追加/削除されたアイテムのカウンターを使用します。 追加/削除のリクエストを送信すると、カウンターが増加し、応答を受信すると減少します。 コードは提供しません。サンドボックスで簡単に見つけることができます。



既知の問題



モジュールをオープンプロジェクトにするつもりはありませんでしたが、この記事でモジュールを投稿したので、既知の問題についても言及します。 さらに、突然誰かが賢明な何かをアドバイスします。



  1. Resource



    オブジェクトとキャッシュcache



    キーは、パラメーターとして受け入れられます。 リソースの名前を引き出すことができれば、キャッシュキーを完全に置き換えます。 残念ながら、私はそれを取得する方法がわかりません。



  2. リストが変更されるたびに、sort（）関数によって要素の新しい配置がサーバーに送信されます。 問題はscope.$$phase || scope.$apply()



    がないscope.$$phase || scope.$apply()



    scope.$$phase || scope.$apply()



    変更の送信は1回発生します。



  3. これで、モデルはscope.itemsという名前でスコープに書き込まれ、別の名前に変更することはできません。 パラメーターの名前を個別の設定にしたくない。 $scope.modelname = oiList($scope, 'list', ListRes)



    を書きたいのですが、バインディングが壊れるのは サーバーからデータを受信するとき、それらはスコープに直接割り当てられません。





More articles:


All Articles