AngularJS路由之ui-router（三）

一、为ui-router添加进度条

在使用动态控制器或者ajax，添加数据的时候需要进度条提示，

我们可以使用路由状态的事件添加全局进度条提示

$stateChangeStart: 当状态开始改变时触发

$stateChangeSuccess: 当状态改变结束时触发

二、实例1，创建一个进度条指令

// Route State Load Spinner(used on page or content load)MetronicApp.directive('ngSpinnerBar', ['$rootScope', '$state',    function($rootScope, $state) {        return {            link: function(scope, element, attrs) {                // by defult hide the spinner bar                element.addClass('hide'); // hide spinner bar by default                // display the spinner bar whenever the route changes(the content part started loading)                $rootScope.$on('$stateChangeStart', function() {                    element.removeClass('hide'); // show spinner bar                });                // hide the spinner bar on rounte change success(after the content loaded)                $rootScope.$on('$stateChangeSuccess', function() {                    element.addClass('hide'); // hide spinner bar                    $('body').removeClass('page-on-load'); // remove page loading indicator                    Layout.setAngularJsSidebarMenuActiveLink('match', null, $state); // activate selected link in the sidebar menu                                       // auto scorll to page top                    setTimeout(function () {                        App.scrollTop(); // scroll to the top on content load                    }, $rootScope.settings.layout.pageAutoScrollOnLoad);                     });                // handle errors                $rootScope.$on('$stateNotFound', function() {                    element.addClass('hide'); // hide spinner bar                });                // handle errors                $rootScope.$on('$stateChangeError', function() {                    element.addClass('hide'); // hide spinner bar                });            }        };    }])

更多：

AngularJS路由之ui-router（二）

AngularJS路由之ui-router（一）