victorb / ngprogress Goto Github PK

ngProgress.color(); --> ngProgress.setColor();

ngProgress.height(); --> ngProgress.setHeight();

I woulf like to put the progress bar on the top of the window. Currently the div is the last child of the body element.
Please could you Advise ?

Hi !!

Great work but i had an issue with karma unit test. When i start test with grunt i have an error like

Error: No module: ngProgress

An idea ??

So we can use something like http://www.explainjs.com/ or the grunt plugin https://github.com/collinforrester/grunt-explainjs.

Example on how it looks right now, http://www.explainjs.com/explain?src=https%3A%2F%2Fraw.github.com%2FVictorBjelkholm%2FngProgress%2Fmaster%2Fbuild%2FngProgress.js

https://github.com/VictorBjelkholm/ngProgress/blob/master/ngProgress.css#L6

What's the point of this if it's just being set directly on the element?

Something like this.
I think that is very much more effective.

I'm using ui-router module

app.run(['$rootScope', '$state', 'ngProgress', function($rootScope, $state, $timeout, ngProgress) {
  $rootScope.$on('$stateChangeStart', function(){
    ngProgress.start();
  });

  $rootScope.$on('$stateChangeSuccess', function(){
    ngProgress.complete();
  });

  $rootScope.$on('$stateChangeError',  function(){
    ngProgress.complete();
    console.log("Error to load the route.")
  });
}])

I'm using 'ngbp' (https://github.com/ngbp/ngbp) angular boilerplate to build my project and I'm trying to make ngProgress work to show the loader when changing from section to section.

I've installed ngProgress through bower. I have css and js in place.

In my app.js I have this:

(function(app) {

    app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/');
    }]);

    app.run(function () {});

    app.controller('AppController', ['$scope', function ($scope) {
    }]);

}(angular.module("grinFood", [
    'grinFood.home',
    'grinFood.about',
    'grinFood.menu',
    'grinFood.catering',
    'grinFood.takeithome',
    'grinFood.contact',
    'templates-app',
    'templates-common',
    'ui.router.state',
    'ui.router',
    'ngProgress',
])));

Then for example my catering.js looks like this:

(function(app) {

    app.config(['$stateProvider', function ($stateProvider) {
        $stateProvider.state('catering', {
            url: '/catering',
            views: {
                "main": {
                    controller: 'CateringController',
                    templateUrl: 'catering/catering.tpl.html'
                }
            },
            data:{ pageTitle: 'Catering' }
        });
    }]);

    app.controller('CateringController', ['$scope', function ($scope, ngProgress) {

        var init = function() {
            // A definitive place to put everything that needs to run when the controller starts. Avoid
            //  writing any code outside of this function that executes immediately.
            ngProgress.start();
        };

        init();
    }]);

}(angular.module("grinFood.catering", [
    'ui.router'
])));

That is when I get TypeError: Cannot read property 'start' of undefined
Also tried to put the ngprogress in the controller in app.js but I can't make it work.

You can watch the error here: http://ticketcomunicacion.com/grinfood/#/menu

Any help would be appreciate. Thanks

I always get this error: "Error: [$injector:unpr] Unknown provider: aProvider <- a <- ngProgressFactory".
I followed the tutorial: http://victorbjelkholm.github.io/ngProgress
Thanks.

angular.module("testProgressApp", [
"ngRoute",
"ngProgress"
]).controller("AppController", ["$scope", "ngProgressFactory", function ($scope, ngProgressFactory) {
$scope.progressbar = ngProgressFactory.createInstance();
$scope.progressbar.start();
}]);

I was able to reproduce issue #24 (related) using ngProgress' own demo page at [1].

Click "Start progress bar" then immediately click Start again. Alternatively, quickly click Start -> Complete -> Start again.

The progress bar slowly fills and as it gets closer to the end it slows down to a halt. There is no way to actually get it to complete once it gets like that, unless you refresh the page.

[Update] This was tested under Chrome 37.

[1] https://victorbjelkholm.github.io/ngProgress/

I have a situation in my unit test where the ngProgress plugin is making http calls, which is messing up my unit tests as I am getting unexpected get errors:

Uncaught Error: Unexpected request: GET http://upda...

here is the stack grace

> request(), app.js:35 deferred.promise.then.wrappedCallback(),
> angular.js:10597 deferred.promise.then.wrappedCallback(),
> angular.js:10597 anonymous(), angular.js:10683 $get.Scope.$eval(),
> angular.js:11576 $get.Scope.$digest(), angular.js:11421
> $get.Scope.$apply(), angular.js:11682 updateCount(),
> ngProgress.min.js:8 anonymous(), ngProgress.min.js:8

You could fire an event or something similar on start() to start the watchers again when need it.

Hello,

I'm using ngprogress 1.0.4 and latest Chrome v35.
ngprogress is working quite well.
Sometimes I minimize Chrome (with the page that contains ngprogress opened) or switch between the chrome tabs.
LATER when I get back to the page that contains ngprogress
the progress bar starts and never ends.
The 'start' is not executed by any piece of my source code.

Sometimes I'm experiencing the same issue at the official page: http://victorbjelkholm.github.io/ngProgress/#demo
What I do:

1. Open http://victorbjelkholm.github.io/ngProgress/#demo
2. Leave it opened and do my other work in different browser tabs. Later I click on the tab where http://victorbjelkholm.github.io/ngProgress/#demo is opened
   and the progress bar starts filling but it never ends. It stucks at about 90%-95%
   If I do any action that starts again or ends the progress bar it will get working normally.

BR,
Stanislav

When trying to install ngprogress through bower via "bower install ngprogress --save" it adds the correct version 1.0.6 to bower.json, but the source files are version 1.0.5

I've included the progress bar in my app by calling setLoading() on the event '$routeChangeStart'. Then, on the events '$routeChangeSuccess' or '$routeChangeError' I will call complete().

But I've noticed if I click around on my site a few times the loading bar will get stuck and wont go away even after calling complete().

I can replicate this behavior on http://victorbjelkholm.github.io/ngProgress by repeatedly clicking on 'Start progressbar' then 'Complete progressbar'. After a few clicks the bar gets stuck.

It still shows 1.0.3 in the comments.

The changes introduced in 1.1, related to providing a factory ngProgressFactory instead of a service (I presume) ngProgress provided in previous versions are not backward compatible and breaks every single usage of ngProgress.
I understand that this change was necessary in order to be able to provide multiple instances of ngProgress and maybe there were other reasons for it I'm not aware of, but would you consider providing ngProgress service along with ngProgressFactory for backward compatibility?

I wonder if this one should be a directive or provider ?

thanks for cool module!

but i don't really like (and do not see any obvious reasons here) to keep styles inside source code, especially to clog my app that will use this module with dynamically created <style> blocks :(

original plugin contains nice styles file, that can be improved and ported here.

as a solution, inlining style can be an option (turned on or turned off by default as you wish).

I can't set the color of the progressbar. I tried assigning it:

ngProgress.color = 'green';

Calling it (like the docs say):

ngProgress.color('green');

And calling setColor():

ngProgress.setColor('green');

None of them seem to work. How do I set the color?

I believe there is a use case for a function that increments the progress bar in some manner, without knowing explicitly what percentage to set it at. Here's an example:

async.parallel([
    function(callback) {
    do_something();
    ngProgress.increment();
    },
    function(callback) {
       do_something_else();
       ngProgress.increment();
    }], //end of paralell calls
    function() {
     //we're done!
     ngProgress.complete()
    }
);

Either of those two parallel calls could complete before the other, and they should have no knowledge of what the current percentage of the statusbar is. All they know is that they are done with their portion of the work.

I have a necessity the blocking fields of form when progress bar is actived. My form contains fields of registers which can not be editable after clicked in button save.

Any suggestion?

Previous versions used to follow camel-case naming convention for the files, e.g. ngProgress/build/ngProgress.js, and now it's
ngprogress/build/ngprogress.js.

It gets rather confusing/broken if upgraded via bower on a case-sensitive file system, since it'll keep the old camel-case-named files next to new lowercase ones and you might assume you've got a new version while your website will be actually using an old one.

Hi,

I am very new to angular and like progress bar a lot.

When I try this in my application (in layout.chtml [master page]). It always shows up the progress bar at the bottom of page.

How can I put this just below the header like Youtube ?

Any help is appreciated.

Thanks,
Abhisek

So you don't have to worry about that.

I got this error when using the .min version.

Error: Unknown provider: aProvider <- a <- ngProgressDirective <- ngProgress
    at Error (<anonymous>)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:30:24
    at Object.c [as get]

Probably the minifer changed the names or something like that. Not sure if you can set some variables name to maintain when minifying.

Anyways, just letting you know.

ngProgress works great if you want one global progress bar at the top of the page. But it'd be nice if you could have multiple progress bars in a page at different locations (think multiple widgets, each with their own progress bar).

Nevermind... this works fine. Please close this.

I would suggest to change the API section's structure a bit. The whole section should not be code, it should be split into headings and code snippets. Also language for other code snippets should be added e.g. javascript for code coloring.

I will gladly do it if you find it reasonable.

The css file has a capital P ngProgress.css
The js files do not ngprogress.js

The bower files build property says that the js file is named ngProgress.js which is incorrect.

Hi.

First of all, awesome job porting this into Angular. Its really easy to use and looks really nice.

Secondly, I wanted to let you know that I found that when you call ngProgress.start() more than once (two concurrent ajax calls for example) the loading bar kind of breaks. Is there something am I doing wrong? Or perhaps a quick fix for this?

Thanks a lot in advance.

The code has several critical design fallacies, wich have to be corrected, primarily being:

• operating on global namespace
• polluting $rootScope
• several misusages of the 'this'-function
• some Angular module weirdness...

We could maybe have the same problem:
voronianski/ngprogress-lite#18

I'd suggest adding to the API a function called setLabel that provides a string describing the current progress stage. This optional label should be rendered inside the progress bar area. The label should be undefined by default resulting in the current ngProgressbar behaviour.

My test code:

.controller("MyCtrl", function($window, $timeout, ngProgress) {
  ngProgress.start();
  $timeout(function() {
    $window.alert("Finished!");
    ngProgress.complete();
  }, 2000);
});

Produces the following error in IE8's console:

Error: Invalid argument

Unfortunately IE doesn't provide a line number or any other info. :(

Commenting out the ngProgress.complete(); line makes the error go away, so I'm fairly certain the blame lies with that function.

Maybe the provided api is not updated after new version. I used bower install and the version is ngprogress 1.1.1.
read the source code and find that ngProgress.color('#fff') should be : ngProgress.setColor('#fff');
also .setHeight() instead of .height()

Can you please add the CSS file to the bower.json so it can compile correctly?

Trying to set the CSS-property "color" in order to change the color of the progressBar does not get applied.

Error message in console:

Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

Happens in Chrome, unknown version or OS.

From: http://www.reddit.com/r/angularjs/comments/1kss50/slim_sitewide_progressbar_as_angular_provider/

A multiple call of start() method causes a multiple call of setInterval(....). Since the timerId returned by the setInterval(...) call is stored always in the same variable, this behavior causes a number of orphan times that cannot be stopped.

I'm new in AngularJS world, please help someone!!
I want to start progress when route starts changing and stop when route ends:

  .run(['$location', '$rootScope', function($location, $rootScope) {
    $rootScope.$on('$routeChangeStart', function(event, current, previous){
      //
    });
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
      //
    });
  }]);

increment, change height and change color are throwing errors in the console and not working.

when clicking on increment

TypeError: ngProgress.status is not a function
    at Object.$scope.count (http://victorbjelkholm.github.io/ngProgress/:369:47)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:6129:19
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:12496:13
    at Object.Scope.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:7770:28)
    at Object.Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:7850:23)
    at HTMLAnchorElement.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:12495:17)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:1930:10
    at Array.forEach (native)
    at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:110:11)
    at HTMLAnchorElement.eventHandler (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:1929:5)

$scope.count = function($event) {
  $event.preventDefault();
  $scope.progressbar.set(ngProgress.status() + 9); // .status() is not a function
}

when clicking on change height

TypeError: Cannot read property 'preventDefault' of undefined
    at Object.$scope.new_height (http://victorbjelkholm.github.io/ngProgress/:378:19)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:6129:19
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:12496:13
    at Object.Scope.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:7770:28)
    at Object.Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:7850:23)
    at HTMLAnchorElement.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:12495:17)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:1930:10
    at Array.forEach (native)
    at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:110:11)
    at HTMLAnchorElement.eventHandler (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:1929:5)

$scope.new_height = function(new_height, $event) {
  $event.preventDefault(); // $event is not defined
  $scope.progressbar.height(new_height);
}

when clicking on change color

TypeError: Cannot read property 'preventDefault' of undefined
    at Object.$scope.new_color (http://victorbjelkholm.github.io/ngProgress/:373:19)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:6129:19
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:12496:13
    at Object.Scope.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:7770:28)
    at Object.Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:7850:23)
    at HTMLAnchorElement.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:12495:17)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:1930:10
    at Array.forEach (native)
    at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:110:11)
    at HTMLAnchorElement.eventHandler (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:1929:5)

$scope.new_color = function(color, $event) {
  $event.preventDefault(); // $event is not defined
  $scope.progressbar.color(color);
}

i could take a deeper look later

Presentation must be separate from business logic.

I suggest to deprecate methods like height and color and replace them with CSS styling completely.

Right now I can't use my SCSS styles and variables to style progress bar and this is really wrong.

I don't know if you take feature requests here, but I think an indeterminate progress bar would be great. Something along the lines of what Android does (http://i.stack.imgur.com/m1aGNm.png - the blue lines at the top are animated to move left to right in an infinite loop).

Here's a sample of run() method

angular
    .module('portal', dependencies)
    .run(['$rootScope', '$http', 'ngProgress', 'NotifyService', function($rootScope, $http, ngProgress, Notify) {
        ngProgress.color('#66afda');
        $rootScope.pendingRequests = $http.pendingRequests;
        $rootScope.$watch('pendingRequests', function(requests) {
            ngProgress[requests.length !== 0 ? 'start' : 'complete']();
        }, true);

        $rootScope.$on('$routeChangeError', function() { Notify.error('An error occured when trying to change the current route!'); })

    }]);

and here's a sample of routes configuration

$routeProvider
    .when('/application-:appId', {})
    .when('/application-:appId/:portalViewId/:viewType-:viewId', {
        controller: 'PortalViewCtrl',
        reloadOnSearch: false,
        templateUrl: function($routeParams) {
            var viewType = $routeParams.viewType;
            return (viewType && portalViewTypes.indexOf(viewType) > -1) && 'portal/portal-views/' + viewType + '/' + viewType + '-view.html';
        }
    })

    .otherwise({redirectTo: '/'});

We're using ngTemplates Grunt plugin to check get all the templates and put them into $templateCache service.

Please note that all the template are included, the paths are correct within this service, everything works ok either by removing the ngProgress.color('#66afda'); line, or commenting out the line where the scope is manually applied (from ngProgress code).

http://victorbjelkholm.github.io/ngProgress/

i get a 404 in ngProgress.js

I am looking for a way to set height property globally? (but not in raw css) i am thinking like

.config(["ngProgress", function(ngProgress) {
  ngProgress.setHeight('10px');
}]);

possible? since written as provider ?

Hi Victor.

I saw your great ngProgress bar and wished to switch to it from my ugly spinner loader.
Usually I use $http interceptor, like in the following code:

app.config ["$httpProvider", "progressbar", ($httpProvider, progressbar)->
    $httpProvider.responseInterceptors.push('progressAnimation')
    spinnerFunction = (data, headersGetter)->
      progressbar.start()
      data;
    $httpProvider.defaults.transformRequest.push(spinnerFunction)


    $ ->
      $(document)
        .ajaxStart ->
          progressbar.start()
        .ajaxStop ->
          progressbar.complete()
  ]

  app.factory 'progressAnimation', ["$q", "progressbar", ($q, progressbar)->
    (promise)->
      return promise.then (response)->
        progressbar.complete()
        response
      , (response)->
        progressbar.complete()
        $q.reject(response)
  ]

Sure, it doesn't work.

• To intercept, I have to use $httpProvider, which is available in config -- no $http object is created yet.
• To use ngProgress, I have to use its singleton object, not a provider, so I should wire it in run.
• How can I get both objects at the same time?

Also it looks like it is the most simple plain case to use ngProgress, probably it worth to add some function to its api.

It is buggy...

Hello,

bower installs the package without the css file: ngProgress.css.
You can fix this problem if you add the ngProgress.css in the main of bower.json.
This fixes the issue:

"main": [ "build/ngProgress.js",
              "ngProgress.css" ],

With best regards
coderDem

I made efficient ngProgress, by placed it in rootScope events:

• I place ngProgress.start() in $rootScope.$on('$routeChangeStart'
• place ngProgress.complete() in $rootScope.$on('$routeChangeSuccess'

Unfortunately, I got strange behavior with the progress. Is this module fit with my approach?