nabil-boag / angular-http-loader Goto Github PK

Angular component which monitors HTTP requests and shows a custom loader element when calls start and hides it when they complete

Home Page: http://tech.wonga.com

License: MIT License

JavaScript 91.69% HTML 8.31%

angular-http-loader's People

Contributors

Stargazers

Watchers

angular-http-loader's Issues

Unable to integrate module (yeoman scaffolding)

I am trying to integrate your module into my app

However, when I try to integrate it, I get a white screen.

My code is as follows:

/* global app:true */
/* exported app */
'use strict';

/**
 * @ngdoc overview
 * @name WebAppApp
 * @description
 * # WebAppApp
 *
 * Main module of the application.
 */
var app = angular
    .module('WebAppApp', [
        'ngAnimate',
        'ngAria',
        'ngCookies',
        'ngMessages',
        'ngResource',
        'ngRoute',
        'ngSanitize',
        'ngTouch',
        'angularUtils.directives.dirPagination',
        'ui.bootstrap',
        'ng.httpLoader'
    ])
    .config(function($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/login.html',
                controller: 'loginCtrl',
                //  controllerAs: 'login'
            })
            .when('/home', {
                controller: 'homeCtrl',
                templateUrl: 'views/home.html',
                resolve: {
                    "checkLoggedIn": function($location, $cookies, $rootScope) {
                        if (!$cookies.get('globals')) {
                            $location.path('/');
                        }
                    }
                },
                //controllerAs: 'home'
            })
            .when('/menteeMentors', {
                controller: 'menteeMentorsCtrl',
                templateUrl: 'views/listMentorsMentees.html',
                resolve: {
                    "checkLoggedIn": function($location, $cookies, $rootScope) {
                        if (!$cookies.get('globals')) {
                            $location.path('/');
                        }
                    }
                },
                //controllerAs: 'home'
            })
            .when('/myGoals', {
                controller: 'myGoalsCtrl',
                templateUrl: 'views/myGoals.html',
                resolve: {
                    "checkLoggedIn": function($location, $cookies, $rootScope) {
                        if (!$cookies.get('globals')) {
                            $location.path('/');
                        }
                    }
                },
                //controllerAs: 'home'
            })
            .when('/addGoal', {
                controller: 'myGoalsCtrl',
                templateUrl: 'views/addGoal.html',
                resolve: {
                    "checkLoggedIn": function($location, $cookies, $rootScope) {
                        if (!$cookies.get('globals')) {
                            $location.path('/');
                        }
                    }
                },
                //controllerAs: 'home'
            })
            .when('/signup', {
                templateUrl: 'views/signup.html',
                controller: 'signupCtrl',
                //controllerAs: 'home'
            })
            .otherwise({
                redirectTo: '/'
            });

        //check browser support
        if (window.history && window.history.pushState) {
            //$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a  tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="/">

            // to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase

            // if you don't wish to set base URL then use this
            $locationProvider.html5Mode({
                enabled: true,
                requireBase: false
            });
        }

    });

.config([
    'httpMethodInterceptorProvider',
    function(httpMethodInterceptorProvider) {
        httpMethodInterceptorProvider.whitelistDomain('validate.jsontest.com');
        httpMethodInterceptorProvider.whitelistDomain('github.com');
    }
]);

I am using yeoman scaffolding for AngularJS

How to add loader for a specific http request?

If I set the http-loader in global, such as at app.js:

httpMethodInterceptorProvider.whitelistDomain('http://*****/')

and add directive in template. If multiple request in controller for the template scope which added the loader directive. Any one request will trigger the loader show, if I want show the loader for specific http request, others dont's show, what should I do?

Programmatically show/hide element

Is it available or planned an API ti programmatically show/hide the loader?

Please create NPM package

As bower is slowly becoming obsolete, please consider creating NPM package for this tool.

How to use it in a modal?

Because first shows the loader, and then shows the modal.

I'm using this component with the angular bootstrap modal component.
http://angular-ui.github.io/bootstrap/#/modal

Thanks

Way to trigger the loader without XHR call?

Hi,

I'd like to show the loader to notify the user thats something is processing.

Is there a way/hack to enable programmatically the loader?

Bests

Add monitoring for 'XMLHttpRequest' requests

Is it possible to add easily a checker of the request type?
<div ng-http-loader request-Type="XMLHttpRequest" methods="GET" template="example/loader.tpl.html"></div>

Add the ability to hide the spinner on faults (404/500)

Currently when a web request returns a faultcode the spinner will keep spinning indefinitely. It would be better if the spinner is hidden when all requests are done, faulted or not.

npm install doesn't work

Hi,

can you publish your plugin on www.npmjs.com ?

How to stop showing loader when working with auto complete text box?

This is a very awesome library which is I am using for my current project. Now the problem I am facing is on the page where I am having autocomplete textbox which suggests the data based on the search string, it makes HTTP request in turn to serve the purpose. So now whenever the request is made the loader appears for fraction of seconds and disappears which in turn gives a bad experience.

So, is there any way this problem can be solved? Like it can be disabled for the few request ??

Thanks in advance.

Add whitelisting to local requests regardless of domain name

Hi everyone,

I find this module very useful, however I wonder if there is a way to whitelist all domains at once? Or more precisely, my application sends $http requests to a relative path so it works both in the testing and the productive environment. Whitelisting the server's domain doesn't seem to work when making relative requests ...

Additionally, I wonder if it's possible to exclude a certain $http request to a whitelisted domain to avoid the loader to show up? I'm reloading messages every 2 seconds and don't want the loader to show up here.

Cheers,
Rob

Add the ability to disable http loader for certain urls on a white listed domain

It would be good to have the ability to stop http loader from showing for certain urls on a whitelisted domain.

This request was originally part of #21

showLoader Not getting True

We implementing your directive but when the http request is made the showLoader is not getting true. It remain false.

Operate only on specific server requests

Hi
Is there a way to show loading only on specific server $htpp requests. I need it as some requests are critical and some can be done in parallel with user web page filling.
Thanks

Version number change missed in the commit a79a096235e87cc22b8353555148b53cd4c2cf44

Refering to the commit a79a096

Because the version number wasn't updated in the commit, "bower install" apparently doesn't notice a change and doesn't download a new version of the module.

Moreover I think the main file ought to be "./angular-http-loader/app/package/js/angular-http-loader.min.js" like for example in https://github.com/angular-ui/ui-router/blob/master/bower.json or https://github.com/mgonto/restangular/blob/master/bower.json

Because of this our Gruntfile's bower_concat module must have different mainFile depenging on whether the angular-http-loader is in version 0.1.11 (old) or 0.1.11 (current). And that causes problems because the Gruntfile shouldn't differ between different installations.

Pass variable to template

Hey, thank you for that.

For some requests, I wanna show my loader, sometimes, it must be hidden.

So I have a boolean global variable in $rootScope that I have to pass trough the title attribute. Which is pretty dirty.

Btw, when my loader is shown, I can see the title as a tooltip (HTML standard) with "true" as a string...

Example:

<!-- Loader template -->
<script type="text/ng-template" id="spinner.tpl.html">
    <div ng-if="title === 'true'">
        <div class="spinner-overlay">
            <div class="spinner-container">
                <div class="loader6"></div>
            </div>
        </div>
    </div>
</script>

<!-- Show loader -->
<div ng-http-loader ttl="0" template="spinner.tpl.html" title="{{ page.loader }}"></div>

{{ page.loader }} is a boolean. Beside, this boolean is casted into a string (see my ng-if).

I suggest to add another attribute to do something like this.

<!-- Loader template -->
<script type="text/ng-template" id="spinner.tpl.html">
    <div ng-if="data === true">
        <div class="spinner-overlay">
            <div class="spinner-container">
                <div class="loader6"></div>
            </div>
        </div>
    </div>
</script>

<!-- Show loader -->
<div ng-http-loader ttl="0" template="spinner.tpl.html" data="page.loader"></div>

I hope this is enough clear.

Bests

nabil-boag / angular-http-loader Goto Github PK

angular-http-loader's People

Contributors

Stargazers

Watchers

Forkers

angular-http-loader's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs