Giter VIP home page Giter VIP logo

angular-poller's Introduction

Angular Poller

Build Status devDependency Status

Lightweight AngularJS poller service which can be easily injected into controllers. It uses a timer and sends requests every few seconds to keep the client synced with the server. If you need the data to be exact real-time such as in a chat box, you should use long polling or WebSocket instead.

Demo site: http://emmaguo.github.io/angular-poller/

Install

Install with bower:

bower install angular-poller

Add a <script> to your index.html:

<script src="/bower_components/angular-poller/angular-poller.js"></script>

Basic Usage

// Inject angular poller service.
var myModule = angular.module('myApp', ['emguo.poller']);

myModule.controller('myController', function($scope, $resource, poller) {

    // Define your resource object.
    var myResource = $resource(url[, paramDefaults]);

    // Get poller. This also starts/restarts poller.
    var myPoller = poller.get(myResource);

    // Update view. Since a promise can only be resolved or rejected once but we want
    // to keep track of all requests, poller service uses the notifyCallback. By default
    // poller only gets notified of success responses.
    myPoller.promise.then(null, null, callback);

    // Stop poller.
    myPoller.stop();

    // Restart poller.
    myPoller.restart();
});

Advanced Usage

Customization

// Inject angular poller service.
var myModule = angular.module('myApp', ['emguo.poller']);

myModule.controller('myController', function($scope, $resource, poller) {

    // Define your resource object.
    var myResource = $resource(url[, paramDefaults], {
        myQuery: {
            method: 'GET',
            isArray: true,
            headers: ...
        },
        ...
    });

    // Get poller.
    var myPoller = poller.get(myResource, {
        action: 'myQuery',
        delay: 6000,
        params: {
            verb: 'greet',
            salutation: 'Hello'
        },
        // Smart flag is set to false by default. If it is set to true then poller
        // will only send new request after the previous one is resolved.
        smart: true
    });

    myPoller.promise.then(null, null, callback);
});

Error Handling

One way to capture error responses is to use the catchError option. It indicates whether poller should get notified of error responses.

var myPoller = poller.get(myResource, {
    catchError: true
});

myPoller.promise.then(null, null, function (result) {

    // If catchError is set to true, this notifyCallback can contain either
    // a success or an error response.
    if (result.$resolved) {

        // Success handler
        $scope.bla = result.bla;

    } else {

        // Error handler: (data, status, headers, config)
        if (result.status === 503) {
            // Stop poller or provide visual feedback to the user etc
            poller.stopAll();
        }
    }
});

Alternatively you can use AngularJS interceptors for global error handling like so:

angular.module('myApp', ['emguo.poller'])
    .config(function ($httpProvider) {
        $httpProvider.interceptors.push(function ($q, poller) {
            return {
                'responseError': function (rejection) {
                    if (rejection.status === 503) {
                        // Stop poller or provide visual feedback to the user etc
                        poller.stopAll();
                    }
                    return $q.reject(rejection);
                }
            };
        });
    });

Multiple Resources

// Inject angular poller service.
var myModule = angular.module('myApp', ['emguo.poller']);

myModule.controller('myController', function($scope, $resource, poller) {

    // Define resource objects and pollers.
    var resource1 = $resource(...),
        resource2 = $resource(...),
        poller1 = poller.get(resource1),
        poller2 = poller.get(resource2);

    poller1.promise.then(null, null, callback);
    poller2.promise.then(null, null, callback);

    // Stop all pollers.
    poller.stopAll();

    // Restart all pollers.
    poller.restartAll();

    // Stop and remove all pollers.
    poller.reset();
});

Multiple Controllers

// Inject angular poller service.
var myModule = angular.module('myApp', ['emguo.poller']);

// Create resource factory.
myModule.factory('myResource', function ($resource) {
    return $resource(...);
});

myModule.controller('controller1', function($scope, poller, myResource) {
    // Register and start poller.
    var myPoller = poller.get(myResource);
    myPoller.promise.then(null, null, callback);
});

myModule.controller('controller2', function($scope, poller, myResource) {
    // Get existing poller and restart it.
    var myPoller = poller.get(myResource);
    myPoller.promise.then(null, null, callback);
});

myModule.controller('controller3', function($scope, poller, myResource) {
    poller.get(myResource).stop();
});

In order to automatically stop all pollers on navigating between views with multiple controllers, you can use pollerConfig.

var myModule = angular.module('myApp', ['emguo.poller']);

myModule.config(function (pollerConfig) {
    pollerConfig.stopOnStateChange = true; // If you use $stateProvider from ui-router.
    pollerConfig.stopOnRouteChange = true; // If you use $routeProvider from ngRoute.
});

angular-poller's People

Contributors

emmaguo avatar

Watchers

Michael Cullen avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.