我可以让我的 angular-ui-router stateProvider 定义更短吗？

Question

我正在使用 angular-ui-router，这通常很棒，但是我定义 stateProvider 的代码变得非常重复，例如

.state('home', {
  url: "/home",
  templateUrl: "home.html"
})
.state('products', {
  url: "/products",
  templateUrl: "products.html"
})
.state('suppliers', {
  url: "/suppliers",
  templateUrl: "suppliers.html"
})

有没有办法告诉它每个州都有一个与州名匹配的 URL 和模板？

Answer 1

编写一个函数。

var myState = function($stateProvider, name) {
    $stateProvider.state(name, {
        url: '/' + name,
        templateUrl: name + '.html'
    })
}

那么你可以这样使用它：

myState($stateProvider, 'home');
myState($stateProvider, 'products');
myState($stateProvider, 'suppliers');

如果您愿意，也可以扩展 $stateProvider 对象：

$stateProvider.myState = function(name) {
    return this.state(name, {
        url: '/' + name,
        templateUrl: name + '.html'
    })
}

像这样使用它：

$stateProvider
    .myState('home')
    .myState('products')
    .myState('suppliers');