Question

我有一些状态，我可以使用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'
})
};

但我有一个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'
        }
    }
];

我看过很多相关的帖子，但是这个（Create states from array object in Angular ui-router）看起来就像我需要的那样。但我无法成功使用它，因为它不包含URL。它对我没有任何帮助。

我想要的只是用循环替换.state（{}）。state（{}）...如果它无效，那么任何替代方法也都可以。但目标是从json数组加载所有状态如果支持resolve选项会更好，因为我更喜欢使用延迟加载但不是必须的

Answer 1

此：

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

也可写：

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

即。 $stateProvider.state()只返回$stateProvider，因此您可以根据需要将其链接起来，没有义务将它们链接起来或一起完成所有通话。

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

Answer 2

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

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

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

Answer 3

这两个答案共同使我明白这个概念。这是工作解决方案。

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);
    });
});

使用name，url和template url从数组加载angularjs状态

3 个答案: