我有些奇怪的事情,可能错过了一些微不足道的步骤。在控制台中 我有以下......
$stateChangeStart to undefined- fired when the transition begins. toState,toParams :
[object Object] [object Object]
"$stateChangeStart to undefined- fired when the transition begins. toState,toParams :
"
{
[functions]: ,
__proto__: { },
controller: "DashboardController",
controllerAs: "vm",
name: "dashboard",
resolve: { },
settings: { },
templateUrl: "app/dashboard/dashboard.html",
title: "dashboard",
url: "/"
}
{
[functions]: ,
__proto__: { }
}
$viewContentLoading - view begins loading - dom not rendered [object Object]
"$viewContentLoading - view begins loading - dom not rendered"
{
[functions]: ,
__proto__: { },
async: true,
controller: null,
locals: { },
notify: true,
params: { },
template: null,
view: { }
}
$stateChangeSuccess to dashboard- fired once the state transition is complete.
$ stateChangeStart具有视图,但是当它到达$ viewContentLoading时它就消失了。毋庸置疑,通过视图不会被加载。
这是路由加载器的存根
{
state: 'dashboard',
config: {
url: '/',
templateUrl: 'app/dashboard/dashboard.html',
controller: 'DashboardController',
controllerAs: 'vm',
title: 'dashboard',
settings: {
nav: 1,
content: '<i class="fa fa-dashboard"></i> Dashboard'
}
}
}
我使用以下模块进行路由
/* Help configure the state-base ui.router */
(function() {
'use strict';
angular
.module('blocks.router')
.provider('routerHelper', routerHelperProvider);
routerHelperProvider.$inject = ['$locationProvider', '$stateProvider', '$urlRouterProvider'];
/* @ngInject */
function routerHelperProvider($locationProvider, $stateProvider, $urlRouterProvider) {
/* jshint validthis:true */
var config = {
docTitle: undefined,
resolveAlways: {}
};
$locationProvider.html5Mode(true);
this.configure = function(cfg) {
angular.extend(config, cfg);
};
this.$get = RouterHelper;
RouterHelper.$inject = ['$location', '$rootScope', '$state', 'logger'];
/* @ngInject */
function RouterHelper($location, $rootScope, $state, logger) {
var handlingStateChangeError = false;
var hasOtherwise = false;
var stateCounts = {
errors: 0,
changes: 0
};
var service = {
configureStates: configureStates,
getStates: getStates,
stateCounts: stateCounts
};
init();
return service;
///////////////
function configureStates(states, otherwisePath) {
states.forEach(function(state) {
state.config.resolve =
angular.extend(state.config.resolve || {}, config.resolveAlways);
$stateProvider.state(state.state, state.config);
});
if (otherwisePath && !hasOtherwise) {
hasOtherwise = true;
$urlRouterProvider.otherwise(otherwisePath);
}
}
function handleRoutingErrors() {
// Route cancellation:
// On routing error, go to the dashboard.
// Provide an exit clause if it tries to do it twice.
$rootScope.$on('$stateChangeError',
function(event, toState, toParams, fromState, fromParams, error) {
if (handlingStateChangeError) {
return;
}
stateCounts.errors++;
handlingStateChangeError = true;
var destination = (toState &&
(toState.title || toState.name || toState.loadedTemplateUrl)) ||
'unknown target';
var msg = 'Error routing to ' + destination + '. ' +
(error.data || '') + '. <br/>' + (error.statusText || '') +
': ' + (error.status || '');
logger.warning(msg, [toState]);
$location.path('/');
}
);
}
function init() {
handleRoutingErrors();
updateDocTitle();
}
function getStates() { return $state.get(); }
function updateDocTitle() {
$rootScope.$on('$stateChangeSuccess',
function(event, toState, toParams, fromState, fromParams) {
stateCounts.changes++;
handlingStateChangeError = false;
var title = config.docTitle + ' ' + (toState.title || '');
$rootScope.title = title; // data bind to <title>
}
);
}
}
}
})();