使用名称、url和模板url从数组加载angularjs状态

我有几个状态，我可以使用url和模板url成功加载所有状态，如下所示

app.config(function ($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('app/dashboard-v1');
$stateProvider.state('app', {
    abstract: true,
    url: '/app',
    templateUrl: 'tpl/app.html'
}).state('app.dashboard-v1', {
    url: '/dashboard-v1',
    templateUrl: 'tpl/app_dashboard_v1.html',
    resolve: {
        deps: ['$ocLazyLoad',
            function ($ocLazyLoad) {
                return $ocLazyLoad.load(['controllers/chart.js']);
            }]
    }
}).state('app.ui', {
    url: '/ui',
    template: '<div ui-view class="fade-in-up"></div>'
}).state('app.ui.buttons', {
    url: '/buttons',
    templateUrl: 'tpl/ui_buttons.html'
})
};

app.config（函数（$stateProvider，$urlRouterProvider）{
$urlRouterProvider。否则（'app/dashboard-v1'）；
$stateProvider.state（'app'{
摘要：没错，
url:“/app”，
templateUrl:'tpl/app.html'
}).state（'app.dashboard-v1'{
url:“/dashboard-v1”，
templateUrl:'tpl/app_dashboard_v1.html'，
决心：{
deps:[“$ocLazyLoad”，
函数（$ocLazyLoad）{
返回$ocLazyLoad.load（['controllers/chart.js']）；
}]
}
}).state（'app.ui'{
url:“/ui”，
模板：“”
}).state（'app.ui.buttons'{
url:“/按钮”，
templateUrl:'tpl/ui_buttons.html'
})
};

但是我有一个json数组，我想用它作为这些状态的源

var stateList =
[
    {
        name: 'app',
        val: {
            abstract: true,
            url: '/app',
            templateUrl: 'tpl/app.html'
        }
    }
    , {
        name: 'app.dashboard-v1',
        val: {
            url: '/dashboard-v1',
            templateUrl: 'tpl/app_dashboard_v1.html',
            resolve: {
                deps: ['$ocLazyLoad',
                    function ($ocLazyLoad) {
                        return $ocLazyLoad.load(['controllers/chart.js']);
                    }]
            }
        }
    }
    , {
        name: 'app.ui',
        val: {
            url: '/ui',
            template: '<div ui-view class="fade-in-up"></div>'
        }
    }
    , {
        name: 'app.ui.buttons',
        val: {
            url: '/buttons',
            templateUrl: 'tpl/ui_buttons.html'
        }
    }
];

var状态列表=
[
{
名称：“应用程序”，
瓦尔：{
摘要：没错，
url:“/app”，
templateUrl:'tpl/app.html'
}
}
, {
名称：“app.dashboard-v1”，
瓦尔：{
url:“/dashboard-v1”，
templateUrl:'tpl/app_dashboard_v1.html'，
决心：{
deps:[“$ocLazyLoad”，
函数（$ocLazyLoad）{
返回$ocLazyLoad.load（['controllers/chart.js']）；
}]
}
}
}
, {
名称：“app.ui”，
瓦尔：{
url:“/ui”，
模板：“”
}
}
, {
名称：“app.ui.buttons”，
瓦尔：{
url:“/按钮”，
templateUrl:'tpl/ui_buttons.html'
}
}
];

我看过很多相关的文章，但这篇（）看起来正是我需要的。但我无法成功地使用它，因为它不包含URL。它对我来说没有任何结果

我想要的只是用一个循环替换.state（{}）.state（{}）。 但是目标是从json数组加载所有状态如果支持

resolve

选项也会更好，因为我更喜欢使用延迟加载，但这不是强制性的

这：

$stateProvider.state(...).state(...).state(...)

也可以写成：

$stateProvider.state(...);
$stateProvider.state(...);
$stateProvider.state(...);

i、 e.

$stateProvider.state（）

只返回

$stateProvider

，因此您可以根据需要将它们链接起来，而无需将它们链接起来或进行所有调用

所以只需写一个循环并依次注册每个状态。

这是：

$stateProvider.state(...).state(...).state(...)

也可以写成：

$stateProvider.state(...);
$stateProvider.state(...);
$stateProvider.state(...);

i、 e.

$stateProvider.state（）

只返回

$stateProvider

，因此您可以根据需要将它们链接起来，而无需将它们链接起来或进行所有调用

---

因此，只需编写一个循环并依次注册每个状态。

尝试迭代JSON并分别注册状态：

您不必链接state方法。forEach在数组中迭代，并为每个元素注册一个新状态。第一个参数是名称，第二个参数是config（val）。您应该注意您的config（val）具有stateProvider.state所期望的模式

stateList.forEach(function(item) {
  if (item.name && item.val) {
    $stateProvider.state(item.name, item.val);
  }
});

---

尝试在JSON上迭代并分别注册状态：

您不必链接state方法。forEach在数组中迭代，并为每个元素注册一个新状态。第一个参数是名称，第二个参数是config（val）。您应该注意您的config（val）具有stateProvider.state所期望的模式

stateList.forEach(function(item) {
  if (item.name && item.val) {
    $stateProvider.state(item.name, item.val);
  }
});

---

这两个答案让我明白了这个概念。下面是有效的解决方案

app.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('app/dashboard-v1'); //default url
    //stateList is a json array (in question)
    stateList.forEach(function (item) {
        $stateProvider.state(item.name, item.val);
    });
});

---

这两个答案让我明白了这个概念。下面是有效的解决方案

app.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('app/dashboard-v1'); //default url
    //stateList is a json array (in question)
    stateList.forEach(function (item) {
        $stateProvider.state(item.name, item.val);
    });
});

---

正如Duncan所说，您不必链接state方法。forEach迭代您的数组并为每个元素注册一个新状态。第一个参数是名称，第二个参数是config（val）。您应该注意您的config（val）具有stateProvider所期望的模式。statelike Duncan说，您不必链接state方法。forEach迭代数组并为每个元素注册新状态。第一个参数是名称，第二个参数是配置（val）。您应该注意配置（val）具有stateProvider所需的模式。stateYou应该遵守此操作您应该遵守此操作