web-dev-qa-db-ja.com

$ transitionsの使い方

現在、私は使用しています：

  • "angular-ui-router"： "^ 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

javascriptangularjswebpackangular-ui-router
13
alphapilgrim

新しいバージョン（> = 1.0.0）では、$ state変更イベントは非推奨になり、代わりに$transitionsを使用する必要があります...

$ transitions for new versions（> = 1.0.0）（ PLUNKER DEMO ）

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){...});

各イベントメソッドの詳細を参照してください： $ transition service docs
またいくつかの例： .4.2から1.0.0までの公式ドキュメントの移行の例

$ stateは古いバージョンのイベントを変更します（<= 0.4.2）（ PLUNKER DEMO ）：

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){...});
}

$ state changeイベントの詳細については、 angular-ui-router docs を確認してください

20
The.Bear