如何使用$transitions？

Question

目前，我正在使用：

• “角-ui-路由器”："^0.4.2“
• “角”："^1.6.3“
• webpack："^2.4.1“

我知道我当前的实现可能是已弃用，只是寻找新方法的实现(一个示例或文档)。任何帮助都是非常感谢的，谢谢提前！

目前的执行情况：

'use strict';

module.exports = angular
  .module('common', [
    'ui.router',
    'angular-loading-bar',
    require('./header').name,
    require('./sideBar').name,
    require('./footer').name
  ])
  .run(function($transitions, cfpLoadingBar) {
    $transitions.onStart({}, cfpLoadingBar.start);
    $transitions.onSuccess({}, cfpLoadingBar.complete);
  });

当前错误：

未知错误：$injector:unpr未知提供者：$transitionsProvider <- $transitions

Answer 1

在新版本(>=1.0.0)中，不推荐使用$state更改事件，现在必须使用$transitions .

新版本的$transitions (>= 1.0.0) (柱塞演示)

MyCtrl.$inject = ['$transitions'];

function MyCtrl($transitions) {
    $transitions.onSuccess({}, function($transition){
        console.log($transition.$from());
        console.log($transition.$to());
        console.log($transition.params());
    });
}

按调用顺序排列的可用事件：

$transitions.onStart({}, function($transition){...});

$transitions.onExit({exiting: "stateName"}, function($transition){...});

$transitions.onRetain({}, function($transition){...});

$transitions.onEnter({entering: "stateName"}, function($transition){...});

$transitions.onFinish({}, function($transition){...});

$transitions.onSuccess({}, function($transition){...});

详细查看每个事件方法：https://ui-router.github.io/ng1/docs/latest/classes/transition.transitionservice.html

还有一些例子：https://ui-router.github.io/guide/ng1/migrate-to-1_0#state-change-events

$state更改旧版本的事件(<= 0.4.2) (柱塞演示)：

MyCtrl.$inject = ['$scope'];

function MyCtrl($scope) {
    $scope.$on('$stateChangeStart', 
        function(event, toState, toParams, fromState, fromParams, options) {...});

    $scope.$on('$stateChangeSuccess', 
        function(event, toState, toParams, fromState, fromParams, options){...});
}

查看https://github.com/angular-ui/ui-router/wiki#state-change-events以获得更多$state更改事件