角JS加载屏幕和页面动画

Question

我正在为当前的项目学习AngularJS，我的网站大约有6-7页。我正在使用/#/导航方案，我想介绍一个加载/请等待屏幕，而XHR请求没有得到模板。

一旦模板被下载，我想调用一个页面转换，但是我真的很困惑如何构造它或执行它。

这是否可以简单地完成，或者是否有任何的例子？

Answer 1

在引导AngularJs时显示加载消息

您可以使用ngCloak

ngCloak指令用于防止浏览器在加载应用程序时以其原始(未编译)形式简要显示角html模板。使用此指令可避免因html模板显示而产生的不受欢迎的闪烁效果。

示例CSS

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
{
    display: none;
}

#splash-page.ng-cloak  /*<-- This has higher specificity so it can display a splash screen*/
{
    display: block;
}

通过承诺显示加载消息

我们实际上使用了一个promise tracker，它允许您跟踪承诺并显示消息(如果它们是活动的)，该消息位于github上。

从演示中：

  <div ng-show="pizzaTracker.active()" style="background:pink;">
    <h1 style="text-align: center;">
      Loading Pizza
      <br />{{pizzaPercent() | number:2}}%
    </h1>
  </div>

并将$http注册到承诺跟踪器

$http.get('flavor.json', { tracker: 'pizza' });

Answer 2

我已经通过编写自定义解决了这个问题。下面是示例代码：

var app = angular.module('yourapp', ['loadingService']);

app.config(function ($httpProvider) {
    $httpProvider.responseInterceptors.push('myHttpInterceptor');
    var spinnerFunction = function (data, headers) {
        $('#loading').show();
        return data;
    };
    $httpProvider.defaults.transformRequest.push(spinnerFunction);
});

angular.module('loadingService', [],
    function ($provide) {

        $provide.factory('myHttpInterceptor', function ($q, $window) {
            return function (promise) {
                return promise.then(function (response) {
                    $('#loading').hide();
                    return response;
                }, function (response) {
                    $('#loading').hide();
                    return $q.reject(response);
                });
            };
        });
    });

注意到：DOM中应该有一个ID为loading的元素。