app.config + stateProvider

Question

我正在使用ui.router来处理我的应用程序路由，目前我的应用程序是小型在线几条路线。截至目前他们进入app.config，我想根据功能发布每个路由配置，例如这个功能是一个“促销”SPA，我怎么能这样做所以我不会杂乱我的初始app.config js文件？

$stateProvider
            .state('promotion', {
                controller: 'PromotionsController',
                url: '',
                views: {
                    "list": {
                        controller: 'PromotionsController',
                        templateUrl: templatesRoot + 'Promotion/promotion-list.html'
                    },
                    "editor": { template: "Welcome" }
                }
            })
            .state('promotion-edit',
                {
                    url: '/edit/{id}',
                    views: {
                        "list": {
                            controller: 'PromotionsController', 
                            templateUrl: templatesRoot + 'Promotion/promotion-list.html'
                        },
                        "editor": {
                            controller: ['$scope', '$stateParams', 'promotionService', function ($scope, $stateParams, promotionService) {
                                $scope.promotion = promotionService.getPromotion($stateParams.id)
                                $scope.savePromotion = function () {
                                    // save the promotion
                                    promotionService.savePromotion($scope.promotion, function (data, responseHeaders) {
                                        if (!data.Success) {
                                            toaster.pop({
                                                type: 'error',
                                                title: 'Error',
                                                body: data.Message,
                                                showCloseButton: true
                                            });
                                        } else {
                                            toaster.pop({
                                                type: 'success',
                                                title: "Success",
                                                body: "Successfully saved the promotion",
                                                showCloseButton: true
                                            });
                                        }
                                    });
                                };
                            }],
                            templateUrl: templatesRoot + 'Promotion/promotion-edit.html'
                        }
                    }
                }
            )
            .state('promotion-create',
                {
                    url: '/create',
                    views: {
                        "list": {
                            controller: 'PromotionsController',
                            templateUrl: templatesRoot + 'Promotion/promotion-list.html'
                        },
                        "editor": {
                            controller: 'PromotionsController',
                            templateUrl: templatesRoot + 'Promotion/promotion-create.html'
                        }
                    }
                }
            )

Answer 1

将您的路线分成文件。例如：

promotion.js

angular.module('AppName').config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('promotion', {
            controller: 'PromotionsController',
            url: '',
            views: {
                "list": {
                    controller: 'PromotionsController',
                    templateUrl: templatesRoot + 'Promotion/promotion-list.html'
                },
                "editor": { template: "Welcome" }
            }
        })
}]);

然后在index.html中引用此文件：

<script src="pathToRoutes/promotion.js"></script>

之后你应该好好去。

Answer 2

只需将其放在仅包含配置块的单独文件中。

例如，您可以：

app/scripts/app.js # not router configuration
app/scripts/routes/promotions.js # pomotions configuration
app/scripts/routes/featureN.js # n-th feature
app/scripts/routes/custom-states-provider.js

如果您注意到功能之间存在大量代码重复，并且您希望围绕具有实用程序功能的ui路由器$ stateProvider创建自定义包装器，那么您需要的最后一个。当然，还有其他解决方案可以解决这个问题。