记一次AngularJs 路由 $stateChangeStart不起作用（细节决定成败）

var app= angular  .module(‘app‘, [    ‘ngAnimate‘,    ‘ngCookies‘,    ‘ngResource‘,    ‘ngSanitize‘,    ‘ngTouch‘,    ‘ui.router‘,    ‘ui.bootstrap‘,    ‘datatablesDirectives‘,    ‘ngTable‘,    ‘ncy-angular-breadcrumb‘,    ‘ngFileUpload‘,    ‘MessageCenterModule‘,    ‘angular-loading-bar‘,    ‘toggle-switch‘  ])  .run(    [‘$rootScope‘, ‘$state‘, ‘$stateParams‘, ‘AppSession‘,      function ($rootScope, $state, $stateParams, AppSession) {        $rootScope.$state = $state;        $rootScope.$stateParams = $stateParams;        $rootScope.$on(‘$stateChangeStart‘, function (event, toState, toParams, fromState, fromParams) {          $state.previous = fromState;          $state.previousParams = fromParams;          if (toState.data.requiredLogin && !AppSession.getLogin() && !toParams.tokenAndName) {            $state.go(‘login‘, {}, {              reload: true            });            event.preventDefault();          }        });      }    ]  ).config([‘cfpLoadingBarProvider‘, function (cfpLoadingBarProvider) {    cfpLoadingBarProvider.includeSpinner = true;  }])  .config(    [‘$stateProvider‘, ‘$urlRouterProvider‘, ‘$breadcrumbProvider‘, ‘$httpProvider‘,      function ($stateProvider, $urlRouterProvider, $breadcrumbProvider, $httpProvider) {        $httpProvider.interceptors.push(‘TokenInterceptor‘);

$urlRouterProvider.otherwise(‘/‘);        $stateProvider          .state(‘login‘, {            url: ‘/‘,            templateUrl: ‘views/login/login.html‘,            controller: ‘loginCtrl‘,            data: {              requiredLogin: false            }          })          .state(‘main‘, {            url: ‘/main‘,            abstract: true,            templateUrl: ‘main.html‘,            data: {              requiredLogin: true            },            ncyBreadcrumb: {              label: ‘主页‘            }          })          .state(‘main.myWork‘, {            url: ‘/myWork‘,            templateUrl: ‘views/myWork/myWorkList.html‘,            controller: ‘myWorkController‘,            ncyBreadcrumb: {              label: ‘我的工作台‘,              parent: ‘main‘            },            data: {              requiredLogin: true            }          }).......

状态改变事件

$scope.$on(‘$stateChangeStart‘,
function(event, toState, toParams, fromState, fromParams), {
  // 如果需要阻止事件的完成

event.preventDefault();

});

参数：

event：该事件的基本信息

toState:我们可以得到当前路由的信息，比如路由名称，url,视图的控制器，模板路径等等

toParams:我们可以得到当前路由的参数

fromState：我们可以得到上一个路由的信息，比如路由名称，url,视图的控制器，模板路径等等

fromParams：我们可以得到上一个路由的参数

可以触发的事件包括：

stateChangeStart

当状态改变开始的时候被触发

$stateChangeSuccess

当状态改变成功后被触发

$stateChangeError

当状态改变遇到错误时被触发，错误通常是目标无法载入，需要预载入的数据无法被载入等。

按照上面的写法：用户在没有登录的情况下，跳转到路由 main.myWork 时，应该会再跳转到登录页面。但是发现跳转。
几经周折，发现是自己太过大意。没有引入

‘ui.router.state.events‘模块，index.html 页面 也没有引入响应的 stateEvents.js。

原文地址：https://www.cnblogs.com/hui-run/p/8650566.html