title: app.config + stateProvider
body: <p>I am using ui.router to handle my app routing, currently my app is small online a couple routes. As of right now they go into app.config, i'd like to spilt out each route configuration based on feature, for example this feature is a for a "Promotion" SPA, how can I go about doing this so I won't clutter my initial app.config js file?</p>
  
  <pre><code>$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'
                          }
                      }
                  }
              )
  </code></pre>