如何在角度js的状态变化上应用加载器/微调器

时间:2016-09-20 07:58:09

标签: javascript angularjs

Hi I want to add loader on state change...what code to be added here
/**
     * @ngdoc overview
     * @name app
     * @description
     * # app
     *
     * Main module of the application.
     */
    'use strict';
    var app = angular.module('app', [
            'ngAnimate',
            'ngResource',
            'ngSanitize', // have to check
            'ngTouch',
            'ui.bootstrap',
            'LocalStorageModule', // adding by me
            'datatables',
            'ngStore',
            'ui.router',
            'ui.utils', // have to check
            'ui.load', // have to get rid of this
            'ui.jp', // have to get rid of this ( for using jquery plugins in angular )
            'oc.lazyLoad',
            'ng-fusioncharts',
            'toastr',
            'ng-fusioncharts',
            'ngTagsInput',
            'angularjs-dropdown-multiselect',
            'ng-jwplayer',
            'gm',
            'angular-img-cropper',
            'rzModule'

        ]);


    app.run(['$rootScope', 'SessionService', '$location', function ($rootScope, SessionService, $location)
        {

            // redirect to login page if not logged in and trying to access a restricted page
            $rootScope.$on('$locationChangeStart', function (event, next, current) {
                if (!SessionService.isLoggedIn()) {
                    $location.path('/login');
                }
            });

     }]);


    app.config(['$httpProvider', function ($httpProvider) {
        // $http.defaults.headers.common.Authorization = '';
        delete $httpProvider.defaults.headers.common['X-Requested-With'];

        $httpProvider.interceptors.push(function ($q, SessionService, $injector, APP_CONFIG) {
            return {
                request: function (config) {
                    config.headers = config.headers || {};
                    var authTokenField = APP_CONFIG.authTokenField;
                    var sessionObj = SessionService.getSession();
                    var authToken = sessionObj['authToken'] || null;
                    if (authToken) {
                        config.headers[authTokenField] = authToken;
                    }
                    return config;
                },

                responseError: function (rejection) {
                    if (rejection.status === 401) {
                        SessionService.clear();
                        $injector.get('$state').go('login', {}, {
                            location: true // do not update the url with the sign in state
                        })
                    }
                    return $q.reject(rejection);
                }
            };
        });
    }]);

1 个答案:

答案 0 :(得分:0)

我肯定会使用: https://github.com/urish/angular-spinner

简单的例子:

<span spinner-on="showSpinner"></span>

所以你可以设置变量&#34; showSpinner&#34;在$ locationChangeStart上为true,在$ locationChangeSuccess上为false