Angular UI路由器：我應該在哪里更改狀態？ 控制器？ 服務？ 事件監聽器？

Question

這是最佳實踐的問題。

我有一個帶有一些嵌套狀態和視圖的角度應用程序。

當我的用戶單擊“注銷”按鈕時，該按鈕已附加到控制器功能，然后控制器功能會調用身份驗證服務中的功能。 然后，身份驗證服務會調用服務器，然后需要將用戶重定向到登錄頁面。

我對實際的“ state.go（'login'）”應該在哪里有一些思路。

（1）服務向服務器發出呼叫，當該呼叫結束時，服務將狀態更改為登錄。

這感覺很糟糕，因為在我看來，服務應該是一些靜態實體，該實體提供數據或功能，並與應用程序的其余部分分開。

（2）調用認證服務后，控制器將狀態更改為登錄。

這似乎更好。 控制器已經附加了應用程序和標記。

（3）服務發出一個自定義動作，該動作是在諸如EVENTS.LOGOUT_SUCCESSFUL之類的應用程序常量中定義的，然后在根作用域上偵聽該事件並在事件偵聽器中執行state.go。

不確定這一點，它會使事情變得更復雜，但看起來還算干凈。

有什么想法嗎？

Answer 1

    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>

Answer 2

我同意您的想法，如果這是唯一要注銷的流程，則希望2勝於3。

如果有不同的注銷方式（例如，強制注銷），則選項3對我來說更有意義。