1

私の問題

Angular を使用して Phonegap アプリケーションを作成しています。私のページのほとんどはかなり小さく、遷移/応答性は迅速かつスムーズです. ただし、問題が発生しているかなり大きなページが 1 つあります。

このページに変更する方法は簡単です。

<button ng-click="$location.url('/page2')"></button>

上のボタンを「タップ」すると、応答してページを変更するのに約 1 ～ 2 秒かかります。このページの改善点をすべて再確認したところ、ページを変更する前に Angular がこのページの DOM をコンパイルおよび解析したために遅延が発生したことが判明しました。これは実際のデバイスでテストしているため、エミュレータの速度によるものではないことに注意してください。

質問

自動または手動でページの変更を傍受し、それらを一種の「読み込み中」ページに配置して、ボタンのクリックへの応答が即座に行われ、ページの変更が表示されるようにする方法はありますか?」読み込んでいます」ページ。

その唯一の問題は、何かをクリックして何も起こらないのは非常に厄介です。この問題に関するリソースを見つけるのに非常に苦労しているので、誰かが私を正しい方向に向けることさえできれば、私は感謝しています.

編集：

私が見つけた非常にハックな解決策は、ラッパーページで ng-include を使用し、インクルードを少し遅らせることでした。

myBigPageWrapper.html:

<div ng-include="page"></div>

コントローラ：

$scope.page = '';
setTimeout(function() { $scope.page='/pages/myBigPage.html'; $scope.$apply(); }, 1000);

次に、代わりにラッパー ページに移動します: $location.url('/myBigPageWrapper')

これは明らかに理想的ではありません...しかし、これが私がやろうとしていることを明確にするのに役立つことを願っています.

Page2.html

これは、ページが遅くなる原因となるセクションです。これをコメントアウトすると、ページの読み込みが非常に速くなります。「auditPages」配列には 13 ページあり、各ページには約 50 行の HTML が含まれており、ほとんどがフォーム入力要素を含んでいます。かなりのロジックですが、ロードされるとうまく動作します。過負荷になるため、すべてのページを含めるつもりはありません。

<div class="page-contents">
    <form name="auditPageForm">
        <div ng-repeat="(pageKey, pageData) in auditPages " ng-show="currentAuditPage.name==pageData.name">
            <audit-form page="pageData">
                <ng-include src=" 'partials/audit/auditSections/'+pageData.name+'.html'" onload="isFormValid(pageKey)"></ng-include>
            </audit-form>
        </div>
    </form>
</div>
4

2 に答える 2

1

Angular には$httpProvider.responseInterceptorsがあります

// zdamによるオリジナル: http://jsfiddle.net/zdam/dBR2r/

angular.module('LoadingService', [])
.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.responseInterceptors.push('myHttpInterceptor');
    var spinnerFunction = function (data, headersGetter) {
        angular.element(document.getElementById('waiting')).css('display','block');
        return data;
    };
    $httpProvider.defaults.transformRequest.push(spinnerFunction);
}])
// register the interceptor as a service, intercepts ALL angular ajax http calls
.factory('myHttpInterceptor', ['$q','$window', function ($q, $window) {
    return function (promise) {
        return promise.then(function (response) {
            angular.element(document.getElementById('waiting')).css('display','none');
            return response;

        }, function (response) {
            angular.element(document.getElementById('waiting')).css('display','none');
            return $q.reject(response);
        });
    };
}])
于 2013-11-13T08:07:45.783 に答える
1

上記の私のコメントを要約すると：

あなたの質問は：

自動または手動でページの変更を傍受し、一種の「読み込み中」ページに入れる方法はありますか?

Angular はローディング遷移の適切な処理を提供していないように見えるため、多くの人がこの質問をします。

実際、考えられる最も良い解決策はresolve、angular のモジュール構成のプロパティで「遊ぶ」ことでした。
ご存知のresolveように、ターゲット ページがレンダリングされる前に、Promise を処理するロジックを実行できます。resolveコードの実行中に、このターゲット ページにロード ページを配置できることが理想的です。

ルート変更中に読み込みアイコンを処理する良い 方法 彼は$routeChangeStartイベントを使用するので、SOURCE ページに読み込みアイコンが表示されます。
私はそれを使用し、それはうまく機能します。

また、別の方法があります：$httpインターセプター（上記の@ooriの回答など）を使用して、読み込みアイコンを配置できる共通のコードを作成しますが...すべての種類のhttpリクエストで同じアイコンを使用したくないと思いますページはあなた次第です。

将来的には、ソリューションがresolveプロパティに直接関連付けられる可能性があります。

于 2013-11-13T08:11:27.507 に答える