angularjs - 应用程序配置+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

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

促销.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>

之后您就可以开始了。