1

我的问题

我正在使用 Angular 创建一个 Phonegap 应用程序。我的大部分页面都相当小，并且转换/响应快速而流畅。但是，我有一页相当大，我遇到了问题。

切换到这个页面的方法很简单：

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

当您“点击”上方的按钮时，大约需要 1-2 秒来响应和更改页面。我已经仔细检查了此页面上的所有改进区域，并确定延迟是由 Angular 在更改页面之前编译和解析此页面的 DOM 引起的。请注意，我是在真实设备上进行测试的，所以它不是由于模拟器速度。

问题

有没有办法自动或手动拦截页面更改并将它们放在一种“加载”页面中，以便立即响应按钮单击并且页面更改可见，但页面内容会在一两秒后加载到此“加载”页面。

它只是一个问题，因为单击某些东西并且没有任何反应是非常尴尬的。我很难找到关于这个问题的任何资源，所以如果有人能指出我正确的方向，我将不胜感激。

编辑：

我发现的一个超级 hacky 解决方案是在包装页面上使用 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 似乎没有很好地处理加载转换。

实际上，可能最好的解决方案是“玩” resolveangular 模块配置的属性。
正如我们所知，resolve允许在呈现目标页面之前运行一些逻辑，处理承诺。理想的情况是能够在resolve代码运行时在这个目标页面上放置一个加载页面。

所以有些人有这样的好主意： 在路由改变时处理加载图标的好方法 他使用$routeChangeStart事件，所以加载图标会发生在 SOURCE 页面上。
我使用它并且效果很好。

此外，还有另一种方法：利用$http拦截器（如上面的@oori 答案），有一个允许放置加载图标的通用代码，但是......我想你不希望在每种 http 请求上都使用相同的图标页面做，这取决于你。

也许在未来，解决方案会直接与该resolve物业相关联。

于 2013-11-13T08:11:27.507 回答