V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
coolicer
V2EX  ›  JavaScript

Angular 怎么在加载中加入 Loading 提示框?

  •  
  •   coolicer · 2014-02-20 09:05:27 +08:00 · 14856 次点击
    这是一个创建于 3920 天前的主题,其中的信息可能已经有所发展或是发生改变。
    现在有一个差不多做好的项目,由于之前没有考虑外网情况,如果当网络慢的时候加载会慢(就是切换模块时或者叫路由?)。现在要我加一个Loading,目前我的想法是在一个controller定义一些监听事件,获取数据前触发从而显示loading,加载完之后再触发隐藏loading。但是这样不就是每个页面都要加上了,有没有其他好方法。本人ng第一战,支持一下我吧。
    11 条回复    1970-01-01 08:00:00 +08:00
    coolicer
        1
    coolicer  
    OP
       2014-02-20 09:16:06 +08:00
    angular.module('APP', [
    'ngRoute',
    ...
    ]).
    config(function ($routeProvider, $locationProvider) {
    $routeProvider.
    when('/xxxx', {templateUrl: 'view/xxxx.html', controller: 'xxx'});
    when('/xxxx', {templateUrl: 'view/xxxx.html', controller: 'xxx'});
    $locationProvider.hashPrefix('!');
    }).run(function(){
    //run block
    });
    换个问法,如何在这些view切换中加入loading。
    dingdong
        2
    dingdong  
       2014-02-20 09:20:36 +08:00
    <div ng-view>loading...</div>
    ijse
        3
    ijse  
       2014-02-20 09:30:40 +08:00
    ng加载完之前controller执行不了。

    可以页面默认显示loading , 然后加载完执行controller时关掉
    coolicer
        4
    coolicer  
    OP
       2014-02-20 09:31:13 +08:00
    @dingdong 现在那些view就是在ng-view中切换,要加哪里啊。不懂
    fansgentle
        5
    fansgentle  
       2014-02-20 09:33:19 +08:00   ❤️ 1
    这是我的:

    html:
    <img ngs-butterbar src="{% static 'ico/loading.gif' %}">

    directive.js:
    directives.directive('ngsButterbar', ['$rootScope',
    function ($rootScope) {
    return {
    link: function (scope, element) { //attrs

    element.hide();

    $rootScope.$on('$routeChangeStart', function () {
    element.show();
    $('div[ng-view]').css('opacity', '0.5');
    });

    $rootScope.$on('$routeChangeSuccess', function () {
    element.hide();
    $('div[ng-view]').css('opacity', '1');
    });
    }
    };
    }]
    );

    具体参考 《用AngularJS开发下一代Web应用》 第 84 页
    dingdong
        6
    dingdong  
       2014-02-20 09:44:04 +08:00   ❤️ 1
    @coolicer 在ng-view的tag中间啊,ng-view会把tag中的内容替换掉的,没加载完之前会显示tag中的内容,可以试试,不确定一定能解决你的问题
    coolicer
        7
    coolicer  
    OP
       2014-02-20 09:44:24 +08:00
    @fansgentle
    是否routeChangeStart,routeChangeSuccess完了之后才执行link里面的操作。你这个方法看起来不错
    coolicer
        8
    coolicer  
    OP
       2014-02-20 09:45:25 +08:00
    @dingdong 也有道理,我到时候试试。
    coolicer
        9
    coolicer  
    OP
       2014-02-20 09:47:02 +08:00
    @dingdong 我试了一下,不知道是不是速度太快,看不到ng-view的内容
    whuhacker
        10
    whuhacker  
       2014-02-20 13:57:14 +08:00
    /**
    * Loading Indicator
    *
    * @author Maikel Daloo
    * @date 12th March 2013
    *
    * Creates a new module and intercepts all ajax requests.
    * Every time a request is sent, we display the loading message and increment
    * the enable_counter variable. Then when requests complete (whether success or error)
    * we increment the disable_counter variable and we only hide the loading message
    * when the enable/disable counters are equal.
    *
    * @example
    * All that is required to get this working is to inject this module into your main
    * module. E.g.
    * var app = angular.module('my-app', ['LoadingIndicator']);
    * Then the script will look for the element specified in the LoadingIndicatorHandler object
    * and show/hide it.
    */
    var module = angular.module('LoadingIndicator', []);

    module.config(['$httpProvider', function($httpProvider) {
    var interceptor = ['$q', 'LoadingIndicatorHandler', function($q, LoadingIndicatorHandler) {
    return function(promise) {
    LoadingIndicatorHandler.enable();

    return promise.then(
    function( response ) {
    LoadingIndicatorHandler.disable();

    return response;
    },
    function( response ) {
    LoadingIndicatorHandler.disable();

    // Reject the reponse so that angular isn't waiting for a response.
    return $q.reject( response );
    }
    );
    };
    }];

    $httpProvider.responseInterceptors.push(interceptor);
    }]);

    /**
    * LoadingIndicatorHandler object to show a loading animation while we load the next page or wait
    * for a request to finish.
    */
    module.factory('LoadingIndicatorHandler', function()
    {
    // The element we want to show/hide.
    var $element = $('#loading-indicator');

    return {
    // Counters to keep track of how many requests are sent and to know
    // when to hide the loading element.
    enable_count: 0,
    disable_count: 0,

    /**
    * Fade the blocker in to block the screen.
    *
    * @return {void}
    */
    enable: function() {
    this.enable_count++;

    if ( $element.length ) $element.show();
    },

    /**
    * Fade the blocker out to unblock the screen.
    *
    * @return {void}
    */
    disable: function() {
    this.disable_count++;

    if ( this.enable_count == this.disable_count ) {
    if ( $element.length ) $element.hide();
    }
    }
    }
    });
    atian25
        11
    atian25  
       2014-02-20 14:01:04 +08:00
    [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;
    }
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1719 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 16:52 · PVG 00:52 · LAX 08:52 · JFK 11:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.