Question

我正在构建一个大的角度应用程序，ui路由器开始给我一些问题。我希望有人能够帮助我解决这个问题。

应用程序尽可能模块化构建。我开始使用John Papa的模块化示例，您可以在他的github存储库中找到它。要构建路由，我使用下面的代码。该提供程序构建了所有不同的路由文件，并使我能够为每个模块设置内容。

问题是我在应用程序的根目录中有一些带有参数的路由。

url：＆＃39; / {slug：[a-zA-Z0-9 - ] +}＆＃39;

url：＆＃39; / {slug：[a-zA-Z0-9 _-] +} / store＆＃39;

...诸如此类

现在，当我为示例/仪表板定义另一条路线时，它采用上述路线。

我已经看了一段时间，并且知道ui路由器按照状态的特定顺序查看以解决它们。所以是/ dashboard url应该在/ {slug：[a-zA-Z0-9 - ] +} url之前。但是，由于我正在创建不同的模块而不是一个路由文件，因此这是不可能的。

我尝试了一些代码，我在其中检查url是否在root上有一个参数来跳过它并在循环结束时添加它。然而，这似乎不起作用。加载所有路径后，它仍然在$ state.get（）

中给出错误的顺序

所以这是配置路由的代码

(function() {
    'use strict';

    angular
        .module('components.router')
        .provider('routerHelper', routerHelperProvider);

    routerHelperProvider.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider'];
    /* @ngInject */
    function routerHelperProvider($stateProvider, $urlRouterProvider, $locationProvider) {
        /* jshint validthis:true */
        var config = {
            docTitle: undefined,
            resolveAlways: {}
        };

        $locationProvider.html5Mode(false);

        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>
                    }
                );
            }
        }
    }
})();

以下是具有过滤功能的configureStates函数

//具有可选参数的州必须是最后一个，所以让我们检查

    function configureStates(states, otherwisePath) {
        var savedStateForLast;
        states.forEach(function(state) {
            // Check if the root has an optional parameter
            if (state.config.url.match(/^\/\{([a-z_-]+):\[([a-zA-Z0-9-])+\]\+\}/)) {
                console.log('last state: ', state);
                savedStateForLast = state;
            } else {
                console.log('state: ', state);
                state.config.resolve =
                    angular.extend(state.config.resolve || {}, config.resolveAlways);
                $stateProvider.state(state.state, state.config);
            }
        });
        if (angular.isDefined(savedStateForLast)) {
            savedStateForLast.config.resolve =
                angular.extend(savedStateForLast.config.resolve || {}, config.resolveAlways);
            $stateProvider.state(savedStateForLast.state, savedStateForLast.config);   
        }
        if (otherwisePath && !hasOtherwise) {
            hasOtherwise = true;
            $urlRouterProvider.otherwise(otherwisePath);
        }
    }

我真的希望有人可以帮助我。我真的不想在我的所有路线上使用一个文件。

模块化app中的角度ui.router路由参数冲突

0 个答案: