Question

我理解UI路由器的配置设置，它运行正常。现在我试图将以下配置移动到指令。这样，代码的长度将在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路由器配置？是否有可用的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
    })
    ;

  }
])
;

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

1 个答案: