怎么办preloader对角JS'NG-view`？ [英] How to do preloader for `ng-view` in Angular JS?

问题描述

我用＆LT; D​​IV NG-视图＆gt;＆LT; / DIV＆GT; 网​​页。
当我点击屏蔽链接＆LT; D​​IV＆GT; 加载HTML模板在 routeProvider 设置。也一起做，返回已加载的模板数据请求AJAX。

I use <div ng-view></div> on web page. When I click link in block <div> is loaded HTML template was set in routeProvider. Also together is done request AJAX that returns data that was loaded template.

现在的问题是，点击后，我得到空的形式HTML模板，仍然是工作的AJAX请求。几秒钟后，HTML表单是从AJAX fiiled数据。

Now problem is that after click I get HTML template with empty form, still is working AJAX request. After some seconds form HTML is fiiled data from AJAX.

我该怎么办preloader页的目录 NG-视图？

How I can do preloader to page for directory ng-view?

推荐答案

看来，这里也有一些类似的问题：

It seems that there are some similar questions here:

• Angularjs在Ajax请求加载屏幕


• Angular JS加载屏幕和网页动画。

• Angularjs loading screen on ajax request
• Angular JS loading screen and page animation.

此外，还有在一堆模块，加载动画工作的 http://ngmodules.org 。例如，这些

Also, there a bunch of modules to work with loading animation at http://ngmodules.org. For example, these:

• https://github.com/cgross/angular-busy


• https://github.com/chieffancypants/angular-loading-bar （我用这一个在我的应用程序）


• https://github.com/McNull/angular-block-ui 并其他。

• https://github.com/cgross/angular-busy
• https://github.com/chieffancypants/angular-loading-bar (I use this one in my apps)
• https://github.com/McNull/angular-block-ui and other.

UPD ：
我已经写了基于角度加载酒吧是如何工作的一个简单的解决方案。我没有NG-查看测试它，但它煤层用户界面视图工作。它不是一个最终的解决方案，并已被抛光

UPD: I've written a simple solution based on how the angular-loading-bar works. I didn't test it with ng-view, but it seams to work with ui-view. It is not a final solution and have to be polished.

angular.module('ui')

.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('LoadingListener');
}])

.factory('LoadingListener', [ '$q', '$rootScope', function($q, $rootScope) {
    var reqsActive = 0;

    function onResponse() {
        reqsActive--;
        if (reqsActive === 0) {
            $rootScope.$broadcast('loading:completed');
        }
    }

    return {
        'request': function(config) {
            if (reqsActive === 0) {
                $rootScope.$broadcast('loading:started');
            }
            reqsActive++;
            return config;
        },
        'response': function(response) {
            if (!response || !response.config) {
                return response;
            }
            onResponse();
            return response;
        },
        'responseError': function(rejection) {
            if (!rejection || !rejection.config) {
                return $q.reject(rejection);
            }
            onResponse();
            return $q.reject(rejection);
        },
        isLoadingActive : function() {
            return reqsActive === 0;
        }
    };
}])

.directive('loadingListener', [ '$rootScope', 'LoadingListener', function($rootScope, LoadingListener) {

    var tpl = '<div class="loading-indicator" style="position: absolute; height: 100%; width: 100%; background-color: #fff; z-index: 1000">Loading...</div>';

    return {
        restrict: 'CA',
        link: function linkFn(scope, elem, attr) {
            var indicator = angular.element(tpl);
            elem.prepend(indicator);

            elem.css('position', 'relative');
            if (!LoadingListener.isLoadingActive()) {
                indicator.css('display', 'none');
            }

            $rootScope.$on('loading:started', function () {
                indicator.css('display', 'block');
            });
            $rootScope.$on('loading:completed', function () {
                indicator.css('display', 'none');
            });
        }
    };
}]);

它可以像这样使用：

It can be used like this:

<section class="content ui-view" loading-listener></section>

这篇关于怎么办preloader对角JS'NG-view`？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！