Generic implementation of progress bar when route change.

[tolemac]

Hi!

Using the old angular-route I have one tiny and funny directive called lobShowOnRouteChange, I use it at end of index.html this way:

    <lob-show-on-route-change>
        <md-progress-linear class="md-warn" md-mode="indeterminate"></md-progress-linear>
    </lob-show-on-route-change>

It shows an angular material progress bar when the router is working, here is the implementation:

    window.LoBModule.directive("lobShowOnRouteChange",() => {
        return {
            restrict: "E",
            transclude: true,
            replace: true,
            scope: true,
            template: "<div ng-show=\"isRouteLoading\"></div>",
            link: (scope: any, element, attrs, ctrl, transclude) => {
                transclude(scope,(clone) => {
                    element.append(clone);
                });

                scope.$root.$on("$routeChangeStart",() => {
                    scope.isRouteLoading = true;
                });
                scope.$root.$on("$routeChangeSuccess",() => {
                    scope.isRouteLoading = false;
                });
                scope.$root.$on("$routeChangeError",() => {
                    scope.isRouteLoading = false;
                });
            }
        };
    });

I would like to implement it with the new component router, I know that I can handle the router lifecycle hooks on each component but I don't want to implement it for each component and I don't want to use component "inheritance" ...

How to implement it with Angular 1.x and component router??

[stnor]

If you want a progress bar when pages are loading I would make an http interceptor instead of listening to route changes. See http://chieffancypants.github.io/angular-loading-bar/

[tolemac]

Thanks @stnor, I knowk angular-loading-bar. I would like to difference between resources loading and route changes. In addition to lobShowOnRouteChange directive I have others like "lobShowOnRouteChangeError" :

window.LoBModule.directive("lobShowOnRouteChangeError", ["$route", "$window", ($route, $window) => {
        return {
            restrict: "E",
            transclude: true,
            replace: true,
            scope: true,
            template: "<div ng-show=\"routeChangeError\"></div>",
            link: (scope: any, element, attrs, ctrl, transclude) => {
                transclude(scope, (clone) => {
                    element.append(clone);
                });
                scope.reloadRoute = () => {
                    $route.reload();
                };
                scope.back = () => {
                    $window.history.back();
                };

                scope.$root.$on("$routeChangeStart",() => {
                    scope.routeChangeError = false;
                });
                scope.$root.$on("$routeChangeSuccess",() => {
                    scope.routeChangeError = false;
                });
                scope.$root.$on("$routeChangeError",() => {
                    scope.routeChangeError = true;
                });
            }
        };
    }]);