AngularJS：使用指令的 UI 路由器设置配置

Question

我了解 UI-router 的配置设置，它工作正常。现在我正在尝试将以下配置移动到指令中。这样，js文件中的代码长度就会减少。可能是，这是糟糕的设计，但我想实现这一点:)

当前配置（根据 UI 路由器设计）

//Router Configuration
angular.module('myApp', ['ui.router']).config(function($stateProvider) {
  $stateProvider.state('addCustomer', {
    url: "/addCustomer",
    templateUrl: 'views/customer/add_customer.html',
    controller: 'addCustomerController'
  });

  ...No of configuration, list is very big...
});  

//In Template
<a ui-sref="addCustomer">Add Customer</a>

我想改变什么

//Router Configuration
angular.module('myApp', ['ui.router']).config(function($stateProvider) {

});  

//In Template
<a ui-sref="addCustomer" router-info="{'url':'/addCustomer', 'templateUrl':'views/customer/add_customer.html', 'controller':'addCustomerController'}">Add Customer</a>

//Directive- Dynamic routing
angular.module('myApp').directive('routerInfo', function(){
    var directive = {};
    directive.restrict = 'A';

    directive.compile = function(element, attributes) {

        var linkFunction = function($scope, element, attributes) {
            //Here I understand, I can not inject stateprovider. So kindly suggest any other way to do this
            //$stateProvider.state(attributes.uiSref, attributes.routerInfo);
        }

        return linkFunction;
    }

    return directive;
});

如何从指令中添加 UI-router 配置？有可以设置的API吗？或任何其他更好的方法来处理这个......我的目的是减少配置块中的代码。

Answer 1

如果您想避免使用一个巨大的配置块，只需使用多个配置块并将每个配置块放在自己的文件中。没有理由不将配置代码放在配置块中，听起来您需要以更好的方式处理它，因此将其拆分为更小的块。

例子：

// config/routes/user.routes.js

angular.module('yourModule')
.config([
  '$stateProvider',
  function($stateProvider) {

    $stateProvider
    .state('user', {
      url: '/users/:userName',
      abstract: true,
      // etc
    })
    .state('user.main', {
      url: '',
      //etc
    })
    .state('user.stuff', {
      url: '/stuff',
      // etc
    })
    ;

  }
])
;

并为每组路线重复：

// config/routes/more.routes.js

angular.module('yourModule')
.config([
  '$stateProvider',
  function($stateProvider) {

    $stateProvider
    .state('more', {
      url: '/more-routes',
      //etc
    })
    ;

  }
])
;