app.config + stateProvider答案

【问题标题】：app.config + stateProviderapp.config + stateProvider
【发布时间】：2017-08-14 19:26:56
【问题描述】：

我正在使用 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'
                        }
                    }
                }
            )

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案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>

在那之后你应该很高兴了。

【讨论】：

【解决方案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 制作自定义包装器，您将需要最后一个。当然，这个问题还有其他解决方案。

【讨论】：