这是一个最佳实践问题。
我有一个带有一些嵌套状态和 View 的 Angular 应用程序。
当我的用户点击“注销”按钮时,它会附加到 Controller 函数,然后 Controller 函数调用身份验证服务中的函数。然后,身份验证服务会调用服务器,并且需要将用户重定向到登录页面。
对于实际的“state.go('login')”应该在哪里,我有过一些思考。
(1) 服务向服务器发出调用,当该调用完成时,服务将状态更改为登录。
这感觉很糟糕,因为在我看来,服务应该是提供数据或功能的静态实体,并与应用程序的其余部分分开。
(2) Controller 在调用认证服务后将状态更改为登录。
这似乎更好。无论如何, Controller 已经附加了应用程序和标记。
(3) 该服务发出一个自定义操作,我在应用程序常量(如 EVENTS.LOGOUT_SUCCESSFUL)中定义该操作,然后在根范围上监听该事件并在事件监听器中执行 state.go。
不确定这个,它使事情变得更复杂,但看起来相当干净。
有什么想法吗?
最佳答案
Change your State in the Controllers. Refer to following example ...
----------------------------------------------------------------------------
# config.js
(function() {
'use strict';
angular
.module('app.foo.authentication')
.config(moduleConfig);
/* @ngInject */
function moduleConfig($translatePartialLoaderProvider, $stateProvider) {
$translatePartialLoaderProvider.addPart('app/foo/authentication');
$stateProvider
.state('authentication.logout', {
url: '/logout',
templateUrl: 'app/foo/authentication/logout/logout.tmpl.html',
controller: 'LogoutController',
controllerAs: 'vm'
});
}
})();
-------------------------------------------------------------------------
# logout.controller.js
(function() {
'use strict';
angular
.module('app.foo.authentication')
.controller('LogoutController', LogoutController);
/* @ngInject */
function LogoutController(
$scope,
$state,
$mdToast,
$filter,
$http,
$window,
triSettings,
session) {
var vm = this;
vm.triSettings = triSettings;
vm.backToLogin = backToLogin;
vm.loading = false;
function backToLogin () {
vm.loading = true;
session.end();
$window.location.reload();
$state.go('authentication.login');
}
}
})();
----------------------------------------------------------------------------
# logout.html
<div layout="row" flex layout-padding layout-fill layout-align="center center">
<div class="logout-card" flex="40" flex-lg="50" flex-md="70" flex-xs="100">
<md-card>
<md-toolbar class="padding-20 logout-card-header">
<div layout="row" layout-align="center center">
<img ng-src="{{::vm.logo}}" alt="{{vm.name}}">
</div>
<div layout="row" layout-align="center center">
<h1 class="md-headline" translate>LOGOUT.TITLE</h1>
</div>
</md-toolbar>
<md-content class="md-padding">
<p translate>LOGOUT.MESSAGES.SUCCESS</p>
<div layout="row" layout-align="center center">
<md-progress-circular ng-show="vm.loading" md-mode="indeterminate"></md-progress-circular>
</div>
<form name="logout">
<md-button
class="md-raised md-primary full-width margin-left-0 margin-right-0 margin-top-10 margin-bottom-10"
ng-click="vm.backToLogin()"
translate="LOGOUT"
aria-label="{{'LOGOUT' | translate}}">
</md-button>
</form>
</md-content>
</md-card>
</div>
</div>
关于javascript - Angular UI 路由器 : where should I be changing state? Controller ?服务?事件监听器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38881822/