javascript - 将带有解析的 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 方法调用 Controller 来处理解析对象，这样当我尝试上述状态实例化时，它会出错，因为 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 注入(inject)器调用。注入(inject)器需要显式的注释形式。一种方法是使用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'
     )
)

内联数组注释是注释应用程序组件的首选方式。使用此类注释时，请注意使注释数组与函数声明中的参数保持同步。