zoukankan      html  css  js  c++  java
  • 记一次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。

    bower.json 里加上如下内容:

    "overrides": {
    "angular-ui-router": {
    "main": [
    "./release/angular-ui-router.js",
    "./release/stateEvents.js"
    ]
    }
    }
  • 相关阅读:
    poj 2479
    纯CSS实现小圆点和三角形图案
    HDOJ1084 What Is Your Grade?
    4星|《一世富贵》:穿越到宋朝去抢了狄青、范仲淹的风头
    世界不是平的,发达国家在本地生产越来越合算。观点宏大,证据薄弱:3星|《后全球化时代》
    饥饿疗法是目前唯一确信能够延缓衰老的办法:4星|《三联生活周刊》2018年3期
    4星|《重塑》:消费者的信息能力是一个重要的经济变量。新颖的、有见地的国人原创经济理论
    3星|《高情商谈判》:谈判中控制情绪非常重要
    中间商赚差价让世界更美好:3.5星|《中间人经济》
    3.5星|《新零售的未来》:中美两国零售业的现状的分析和未来的展望
  • 原文地址:https://www.cnblogs.com/hui-run/p/8650566.html
Copyright © 2011-2022 走看看