Question

我正在使用AngularJS和ngProgress在我的网站顶部显示类似YouTube的加载栏。

条形图启动，然后通过ajax加载新数据，一旦请求完成，条形图就完成了。

示例：

var TestCtrl = function( $scope, $location, Tests, ngProgress ) 
{
    // start progressbar
    ngProgress.start();

    $scope.tests = Tests.query(
        function()
        {
            // end progressbar
            ngProgress.complete()
        }
    );
};

现在我的问题是：如何按照事物的顺序将这个原则整合到更高的位置，这样我就不必为每个控制器重复代码了？

Answer 1

您可以使用控制ngProgress的服务（就像它上面的包装一样）并监听网址中的更改。

每次网址更改时，广播的$locationChangeSuccess广告（$location的更多信息）我们可以听取调用ngProgress.start()
但是我们不知道它什么时候完成（我们不能永远在顶部加载一个条），因此我们需要在控制器中显式调用ngProgress.complete()或者我们可以假设我们的异步函数可能花费5秒钟完成并使用我们的包装器服务中的计时器调用ngProgress.complete()
当加载栏已经显示并且网址发生变化时，我们需要通过调用ngProgress.reset()重置条形状态

您可以使用以下方法来解决这些问题：

angular.module('myApp').factory('Progress', function (ngProgress) {
    var timer;
    return {
        start: function () {
            var me = this;
            // reset the status of the progress bar
            me.reset();
            // if the `complete` method is not called
            // complete the progress of the bar after 5 seconds
            timer = setTimeout(function () {
                me.complete();
            }, 5000);
        },
        complete: function () {
            ngProgress.complete();
            if (timer) {
                // remove the 5 second timer
                clearTimeout(timer);
                timer = null;
            }
        },
        reset: function () {             
            if (timer) {
                // remove the 5 second timer
                clearTimeout(timer);
                // reset the progress bar
                ngProgress.reset();
            }
            // start the progress bar
            ngProgress.start();
        }
    };
});

要收听网址中的更改并显示我们可以使用的进度条：

angular.module('myApp')
    .run(function (Progress) {
        $rootScope.$on('$locationChangeSuccess', function () {
            Progress.start();
        });
    }

现在我们可以通过注入Progress服务并在所有异步函数完成时调用方法Progress.complete()来手动控制状态栏的完整性（我们也可以通过任何服务来控制它）进行异步调用）：

angular.module('myApp')
    .controller('SomeCtrl', function (Progress) {
        setTimeout(function () {
            Progress.complete();
        }, 2000);
    });

Answer 2

以下是使用Interceptor的示例：

.factory('interceptorNgProgress', [
    'ngProgressFactory', function (ngProgressFactory) {

var complete_progress, getNgProgress, ng_progress, working;
ng_progress = null;
working = false;

getNgProgress = function() {

    if(!ng_progress) {

        ng_progress = ngProgressFactory.createInstance();

        return ng_progress;
    }

    return ng_progress;
};

complete_progress = function() {
    var ngProgress;
    if (working) {
        ngProgress = getNgProgress();
        ngProgress.complete();
        return working = false;
    }
};

return {
    request: function(request) {
        var ngProgress;
        ngProgress = getNgProgress();
        if (request.url.indexOf('.html') > 0) {
            return request;
        }
        if (!working) {
            ngProgress.reset();
            ngProgress.start();
            working = true;
        }
        return request;
    },
    requestError: function(request) {
        complete_progress();
        return request;
    },
    response: function(response) {
        complete_progress();
        return response;
    },
    responseError: function(response) {
        complete_progress();
        return response;
    }
}
}])

.config(function ($httpProvider) {
    $httpProvider.interceptors.push('interceptorNgProgress');
});

Answer 3

我会把它放在一个角度指令中然后你可以将它传递给你想要能够使用它的任何控制器。

http://docs.angularjs.org/guide/directive

编辑，考虑一下这项服务可能会更好。

http://docs.angularjs.org/guide/dev_guide.services.creating_services

Answer 4

您显然已经拥有Tests服务。覆盖它，以便ngProgress注入其中Tests始终在ngProgress.start()为您调用ngProgress.complete()和query。

每页加载时ngProgress加载栏

4 个答案: