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"
    ]
    }
    }
  • 相关阅读:
    20175310 《Java程序设计》第3周学习总结
    IDEA学生免费申请教程
    20175310 《Java程序设计》第2周学习总结
    在虚拟机中使用中文输入法
    VMware虚拟机将英文改成中文的方法
    20175310 《Java程序设计》第1周学习总结(1)安装虚拟机
    20175310 《Java程序设计》第1周学习总结(2)
    Java 开源 CMS :magnolia
    开源网络监控管理系统:OpenNMS
    开源摄影机:Axiom Camera
  • 原文地址:https://www.cnblogs.com/hui-run/p/8650566.html
Copyright © 2011-2022 走看看