Angular UI 切换到使用 Browserify 后路由器的 $stateChangeSuccess 没有发出
Angular UI Router's $stateChangeSuccess not being emitted after switching to using Browserify
我有一个 Angular 1.5.x 应用程序，它使用 Angular UI 路由器的 $stateChangeSuccess 事件来注册一个侦听器，以验证用户是否登录每个状态更改以保护应用程序的某些视图。通过 Browserify 将应用程序移植到 CommonJS 环境后，已注册的事件处理程序不再执行，但 UI Router 像以前一样不断更改状态。我需要帮助弄清楚 UI 路由器是否以及为什么不发出事件，或者问题是否是由 Angular 范围在 CommonJS 环境中工作时表现不同引起的。非常感谢任何帮助，谢谢！
编辑
我通过 npm 安装了 angular-ui-router 1.0.0-alpha.1。我检查了 angular ui 路由器 github 根据 Chris 的评论发布文档，并决定通过恢复到 0.2.18 来查看它是否有效，但没有。
app.js
唯一相关的 require 语句是路由、核心和服务模块。
'use strict';
var angular = require('angular');
var routes = require('./app.routes.js');
// Sub-module Dependencies
var core = require('./app.core.js');
var services = require('./services');
var layout = require('./layout');
var auth = require('./authentication');
var landing = require('./landing');
var dashboard = require('./dashboard');
var userManual = require('./user-manual');
// Define Angular Module
var app = angular.module('app', [
core,
services,
layout,
auth,
landing,
dashboard,
userManual
])
.config(html5ModeTrue)
.config(routes)
.run(runBlock);
////////////////
html5ModeTrue.$inject = ['$locationProvider'];
runBlock.$inject = ['authService'];
////////////////
function html5ModeTrue ($locationProvider) {
$locationProvider.html5Mode(true);
}
function runBlock(authService) {
authService.initialize();
}
app.routes.js
'use strict';
routes.$inject = ['$stateProvider', '$urlRouterProvider'];
function routes($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$urlRouterProvider.when('/dashboard', '/dashboard/analysis');
$stateProvider
.state('home', {
url: "/",
templateUrl: "app/landing/home.html"
})
.state('about', {
url: "/about",
templateUrl: "app/landing/about.html"
})
.state('atlas', {
url: "/atlas",
templateUrl: "app/landing/atlas.html"
})
.state('login', {
url: "/login",
templateUrl: "app/authentication/login.html",
controller: "LoginController",
controllerAs: "login"
})
.state('dashboard', {
abstract: true,
// url: "/dashboard",
templateUrl: "app/dashboard/dashboard.html",
controller: "DashboardController",
controllerAs: "dash",
restricted: true,
})
.state('dashboard.analysis', {
url: "/dashboard/analysis",
templateUrl: "app/dashboard/dashboard.analysis.html"
})
.state('dashboard.vmod', {
url: "/dashboard/vmod",
templateUrl: "app/dashboard/dashboard.vmod.html"
})
.state('dashboard.datasets', {
url: "/dashboard/datasets",
templateUrl: "app/dashboard/dashboard.datasets.html"
})
.state('dashboard.defaults', {
url: "/dashboard/defaults",
templateUrl: "app/dashboard/dashboard.defaults.html"
})
.state('dashboard.user-management', {
url: "/dashboard/user-management",
templateUrl: "app/dashboard/dashboard.user-management.html"
})
.state('user-manual', {
url: "/user-manual",
templateUrl: "app/user-manual/user-manual.html",
restricted: true
})
.state('user-manual.analysis', {})
.state('user-manual.vmod', {})
.state('user-manual.datasets', {});
}
module.exports = routes;
app.core.js
如下所示，通过npm安装的angular-ui-router被required到应用程序的核心依赖子模块中
'use strict';
// Module Dependencies
require('angular-animate'); // ngAnimate
require('angular-ui-bootstrap'); // ui.bootstrap
require('angular-ui-router'); // ui.router
require('ui-leaflet'); // ui-leaflet
require('leaflet'); // Dependency for ui-leaflet
require('angular-simple-logger'); // Dependency for ui-leaflet
// Define Angular Module
var name = 'app.core';
require('angular').module(name, [
'ui.bootstrap',
'ui.router',
'ngAnimate',
'ui-leaflet',
]);
// Expose Angular Module Name For Easy Injection
module.exports = name;
services/index.js
此文件仅作为请求ui环应用程序Angular服务的入口点。
'use strict';
// Module Dependencies
var authService = require('./auth.service.js');
var userManagementService = require('./user-management.service.js');
// Define Angular Module
var name = 'app.services';
require('angular')
.module(name, [])
.factory('authService', authService)
.factory('userManagementService', userManagementService);
module.exports = name;
services/auth.service.js
此服务中的初始化函数向 $stateChangeSuccess 事件注册一个侦听器，该事件永远不会被调用。
'use strict';
authService.$inject = ['$q', '$window', '$http', '$rootScope', '$location'];
function authService ($q, $window, $http, $rootScope, $location) {
var userSession = null;
var service = {
initialize: initialize,
isLoggedIn: isLoggedIn,
getUserSession: getUserSession,
login: login,
logout: logout
};
return service;
////////////////
function initialize() {
var accessToken = $window.sessionStorage["fa-session"];
userSession = accessToken ? JSON.parse(accessToken) : null;
$rootScope.$on('$stateChangeSuccess', onStateChangeSuccess);
function onStateChangeSuccess(event, toState, fromState, fromParams) {
if (toState.restricted && isLoggedIn() === false) {
$location.path('/login');
}
}
}
function isLoggedIn() {
return userSession || false;
}
function getUserSession() {
return userSession;
}
function login(username, password) {
var deferred = $q.defer();
$http.post('/api/login', {username: username, password: password})
.then(loginComplete)
.catch(loginFailed);
return deferred.promise;
function loginComplete(response) {
userSession = {
accessToken: response.data.access_token,
username: response.data.username
};
$window.sessionStorage["fa-session"] = JSON.stringify(userSession);
deferred.resolve(userSession);
}
function loginFailed(error) {
deferred.reject(error);
}
}
function logout() {
var deferred = $q.defer();
$http.post('/api/logout', {headers: {access_token: userSession.accessToken}})
.then(logoutCompleted)
.catch(logoutFailed);
return deferred.promise;
function logoutCompleted(response) {
userSession = null;
$window.sessionStorage["fa-session"] = null;
deferred.resolve(response);
}
function logoutFailed(error) {
deferred.reject(error);
}
}
}
module.exports = authService;
所以我设法通过使用 Chris T 在他的评论中提到的 $transition.on* 钩子让它工作。我还调查了这个 $rootScope 问题是否发生在状态更改事件之外。从我能够验证的情况来看，$scope 和 $rootScope 事件发射器和处理程序与我的控制器完美配合。
我改变了这个：
.state('user-manual', {
url: "/user-manual",
templateUrl: "app/user-manual/user-manual.html",
restricted: true
})
其中，受限的 属性 被 authService 内部的偶数侦听器使用：
.state('user-manual', {
url: "/user-manual",
templateUrl: "app/user-manual/user-manual.html",
// restricted: true
onEnter: function (authService, $location) {
if (!authService.isLoggedIn()) {
$location.path('/login');
}
}
})
我有一个 Angular 1.5.x 应用程序，它使用 Angular UI 路由器的 $stateChangeSuccess 事件来注册一个侦听器，以验证用户是否登录每个状态更改以保护应用程序的某些视图。通过 Browserify 将应用程序移植到 CommonJS 环境后，已注册的事件处理程序不再执行，但 UI Router 像以前一样不断更改状态。我需要帮助弄清楚 UI 路由器是否以及为什么不发出事件，或者问题是否是由 Angular 范围在 CommonJS 环境中工作时表现不同引起的。非常感谢任何帮助，谢谢！
编辑
我通过 npm 安装了 angular-ui-router 1.0.0-alpha.1。我检查了 angular ui 路由器 github 根据 Chris 的评论发布文档，并决定通过恢复到 0.2.18 来查看它是否有效，但没有。
app.js
唯一相关的 require 语句是路由、核心和服务模块。
'use strict';
var angular = require('angular');
var routes = require('./app.routes.js');
// Sub-module Dependencies
var core = require('./app.core.js');
var services = require('./services');
var layout = require('./layout');
var auth = require('./authentication');
var landing = require('./landing');
var dashboard = require('./dashboard');
var userManual = require('./user-manual');
// Define Angular Module
var app = angular.module('app', [
core,
services,
layout,
auth,
landing,
dashboard,
userManual
])
.config(html5ModeTrue)
.config(routes)
.run(runBlock);
////////////////
html5ModeTrue.$inject = ['$locationProvider'];
runBlock.$inject = ['authService'];
////////////////
function html5ModeTrue ($locationProvider) {
$locationProvider.html5Mode(true);
}
function runBlock(authService) {
authService.initialize();
}
app.routes.js
'use strict';
routes.$inject = ['$stateProvider', '$urlRouterProvider'];
function routes($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$urlRouterProvider.when('/dashboard', '/dashboard/analysis');
$stateProvider
.state('home', {
url: "/",
templateUrl: "app/landing/home.html"
})
.state('about', {
url: "/about",
templateUrl: "app/landing/about.html"
})
.state('atlas', {
url: "/atlas",
templateUrl: "app/landing/atlas.html"
})
.state('login', {
url: "/login",
templateUrl: "app/authentication/login.html",
controller: "LoginController",
controllerAs: "login"
})
.state('dashboard', {
abstract: true,
// url: "/dashboard",
templateUrl: "app/dashboard/dashboard.html",
controller: "DashboardController",
controllerAs: "dash",
restricted: true,
})
.state('dashboard.analysis', {
url: "/dashboard/analysis",
templateUrl: "app/dashboard/dashboard.analysis.html"
})
.state('dashboard.vmod', {
url: "/dashboard/vmod",
templateUrl: "app/dashboard/dashboard.vmod.html"
})
.state('dashboard.datasets', {
url: "/dashboard/datasets",
templateUrl: "app/dashboard/dashboard.datasets.html"
})
.state('dashboard.defaults', {
url: "/dashboard/defaults",
templateUrl: "app/dashboard/dashboard.defaults.html"
})
.state('dashboard.user-management', {
url: "/dashboard/user-management",
templateUrl: "app/dashboard/dashboard.user-management.html"
})
.state('user-manual', {
url: "/user-manual",
templateUrl: "app/user-manual/user-manual.html",
restricted: true
})
.state('user-manual.analysis', {})
.state('user-manual.vmod', {})
.state('user-manual.datasets', {});
}
module.exports = routes;
app.core.js
如下所示，通过npm安装的angular-ui-router被required到应用程序的核心依赖子模块中
'use strict';
// Module Dependencies
require('angular-animate'); // ngAnimate
require('angular-ui-bootstrap'); // ui.bootstrap
require('angular-ui-router'); // ui.router
require('ui-leaflet'); // ui-leaflet
require('leaflet'); // Dependency for ui-leaflet
require('angular-simple-logger'); // Dependency for ui-leaflet
// Define Angular Module
var name = 'app.core';
require('angular').module(name, [
'ui.bootstrap',
'ui.router',
'ngAnimate',
'ui-leaflet',
]);
// Expose Angular Module Name For Easy Injection
module.exports = name;
services/index.js
此文件仅作为请求ui环应用程序Angular服务的入口点。
'use strict';
// Module Dependencies
var authService = require('./auth.service.js');
var userManagementService = require('./user-management.service.js');
// Define Angular Module
var name = 'app.services';
require('angular')
.module(name, [])
.factory('authService', authService)
.factory('userManagementService', userManagementService);
module.exports = name;
services/auth.service.js
此服务中的初始化函数向 $stateChangeSuccess 事件注册一个侦听器，该事件永远不会被调用。
'use strict';
authService.$inject = ['$q', '$window', '$http', '$rootScope', '$location'];
function authService ($q, $window, $http, $rootScope, $location) {
var userSession = null;
var service = {
initialize: initialize,
isLoggedIn: isLoggedIn,
getUserSession: getUserSession,
login: login,
logout: logout
};
return service;
////////////////
function initialize() {
var accessToken = $window.sessionStorage["fa-session"];
userSession = accessToken ? JSON.parse(accessToken) : null;
$rootScope.$on('$stateChangeSuccess', onStateChangeSuccess);
function onStateChangeSuccess(event, toState, fromState, fromParams) {
if (toState.restricted && isLoggedIn() === false) {
$location.path('/login');
}
}
}
function isLoggedIn() {
return userSession || false;
}
function getUserSession() {
return userSession;
}
function login(username, password) {
var deferred = $q.defer();
$http.post('/api/login', {username: username, password: password})
.then(loginComplete)
.catch(loginFailed);
return deferred.promise;
function loginComplete(response) {
userSession = {
accessToken: response.data.access_token,
username: response.data.username
};
$window.sessionStorage["fa-session"] = JSON.stringify(userSession);
deferred.resolve(userSession);
}
function loginFailed(error) {
deferred.reject(error);
}
}
function logout() {
var deferred = $q.defer();
$http.post('/api/logout', {headers: {access_token: userSession.accessToken}})
.then(logoutCompleted)
.catch(logoutFailed);
return deferred.promise;
function logoutCompleted(response) {
userSession = null;
$window.sessionStorage["fa-session"] = null;
deferred.resolve(response);
}
function logoutFailed(error) {
deferred.reject(error);
}
}
}
module.exports = authService;
所以我设法通过使用 Chris T 在他的评论中提到的 $transition.on* 钩子让它工作。我还调查了这个 $rootScope 问题是否发生在状态更改事件之外。从我能够验证的情况来看，$scope 和 $rootScope 事件发射器和处理程序与我的控制器完美配合。
我改变了这个：
.state('user-manual', {
url: "/user-manual",
templateUrl: "app/user-manual/user-manual.html",
restricted: true
})
其中，受限的 属性 被 authService 内部的偶数侦听器使用：
.state('user-manual', {
url: "/user-manual",
templateUrl: "app/user-manual/user-manual.html",
// restricted: true
onEnter: function (authService, $location) {
if (!authService.isLoggedIn()) {
$location.path('/login');
}
}
})