将具有解析的angular ui路由器状态抽象为构造函数的方法

Question

我有这个构造函数：

function State(url, templateUrl, controller, controllerAs, factory, resolveProp){
  this.url = url
  this.templateUrl = templateUrl
  this.controller = controller
  this.controllerAs = controllerAs
}

在我的路由器回调中，我有这样的结果：

$stateProvider
  .state('archetypes', new State('/admin/archetypes', './resources/features/admin/archetypes/index.html', 'archetypes', 'aaVM'))

这可以很好地工作。然而，我还有另一条路径，它包含了获取一些后端数据的解决方案。

我想我也许可以为我的构造函数做一些类似的事情：

function State(url, templateUrl, controller, controllerAs, factory, resolveProp){
  this.url = url
  this.templateUrl = templateUrl
  this.controller = controller
  this.controllerAs = controllerAs
  if(factory){
    this.resolve = {}
    this.resolve[resolveProp] = function(factory){
      return factory.getAll()
    }
  }
}

然后以这种方式实例化一个状态：

.state(
    'archetypes',
     new State(
         '/admin/archetypes',
         './resources/features/admin/archetypes/index.html', 
         'archetypes',
         'aaVM',
         ArchetypesFactory,
         'archetypes'
     )
)

但我认为.state方法调用控制器是为了处理resolve对象，因此当我尝试上面的状态实例化时，它会出错，因为ArchetypesFactory显然是未定义的。

请注意，当我以这种方式编写状态时：

.state('archetypes', {
  url: '/admin/archetypes',
  templateUrl: './resources/features/admin/archetypes/index.html',
  controller: 'archetypes',
  controllerAs: 'aaVM',
  resolve: {
    archetypes: function(ArchetypesFactory){
      return archetypesFactory.getAll()
    }
  }
})

它工作得很好。

有没有什么方法可以通过解析将状态配置对象抽象为构造函数或ES6类？

Answer 1

解析器函数由AngularJS注入器调用。注入器需要一种显式形式的注释。一种方法是使用Inline Array Annotation

function State(url, templateUrl, controller, controllerAs, factory, resolveProp){
  this.url = url;
  this.templateUrl = templateUrl;
  this.controller = controller;
  this.controllerAs = controllerAs;
  if(factory){
    this.resolve = {}
    this.resolve[resolveProp] = [factory, function(factory){
      return factory.getAll();
    }];
  };
}

然后为工厂参数指定一个字符串：

.state(
    'archetypes',
     new State(
         '/admin/archetypes',
         './resources/features/admin/archetypes/index.html', 
         'archetypes',
         'aaVM',
         //ArchetypesFactory,
         //USE string
         'ArchetypesFactory',
         'archetypes'
     )
)

内联数组注释是注释应用程序组件的首选方法。在使用这种类型的注释时，要注意使注释数组与函数声明中的参数保持同步。