Angularjs 加上「；中间人；全页加载之前的页面 我的问题

我正在使用Angular创建Phonegap应用程序。我的大多数页面都相当小，转换/响应速度也很快且平稳。然而，我有一个页面是相当大的，我有一个问题

更改到此页面的方法很简单：

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

然后导航到您的包装页：$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>

---

Angular拥有$httpProvider.responseInterceptors

//zdam原件：

---

总结我的上述评论：

你的问题是：

有没有办法自动或手动截取页面更改和 把它们放在“加载”页面中

很多人问这个问题，因为Angular似乎不能很好地处理加载转换

实际上，最好的解决方案可能是“玩”angular模块配置的

resolve

属性。
正如我们所知，

resolve

允许在呈现目标页面之前运行一些逻辑，处理承诺。理想的情况是，当

resolve

代码运行时，能够在这个目标页面上放置一个加载页面

所以有些人有这样的好主意： 他使用

$routeChangeStart

事件，因此加载图标将出现在源页面上。
我使用它，而且效果很好

另外，还有另一种方法：使用

$http

拦截器（如上面的@oori-answer），使用一个公共代码来放置加载图标，但是……我想你不希望页面上的每种http请求都有相同的图标，这取决于你

---

也许将来会有一个解决方案直接关联到

resolve

属性。

您能显示您的page2和主应用程序的一些代码吗？添加了page2的主要部分。请参见编辑要在页面之间生成“加载”，我通常在目标页面上使用

$routeChangeSuccess

事件（）。因此，无需创建“中介”页面，因为我正在处理此事件中的“加载”代码。（更准确地说，我在那里用调用期间设置的加载微调器启动所需的

$http

调用）此事件意味着“一旦我的路线改变，首先要做什么？”=>显示加载两秒钟，然后填充此目标页面的所有常用内容。在模板上使用ng hide和ng show。因此，在我的$RouteChangeSuccessful处理中，我在http调用中使用了以下内容：。非常方便。@Mik378所以您只需强制延迟2秒，然后填充视图并隐藏加载？我很想使用这样的方法，但是问题在于导航等待创建视图并将范围应用于dom（可能没有完全正确的，对Angular来说仍然是新的）。我深入研究了ResponseInterceptor，但据我观察，它们似乎非常适合在渲染视图之前进行外部调用以获取数据，而不适合渲染视图本身。搜索/管理DOM属性（如

getElementById

）只应在Angular的指令中执行。否则，它违背了Angular的本质：“我们为您管理DOM”。视图渲染需要这么长时间？不是等待响应的ajax请求吗？如果是的话，这太长了。你能插入kr/jsfiddle吗？我不打算操纵DOM，我计划在显示DOM之前操纵操纵DOM的变量。@Mik378，当然你是对的，但这在这个服务中是不可能的。最好用$documentinjection替换document，但这并不能真正解决您的意思。。我知道。。

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

<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>

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);
        });
    };
}])