基于API数据生成组件的正确方法

Question

我的项目中有一个结构，如下所示：

页脚和标题是嵌套视图。

index.html： <div data-ui-view="header"></div> <div data-ui-view="main"></div> <div data-ui-view="footer"></div>

路由：

$stateProvider
        .state('index', {
            abstract: true,
            views: {
                'header': {
                    component: 'headerComponent'
                },
                'footer': {
                    component: 'footerComponent'
                }
            }
        })

        .state('index.home', {
            url: '/',
            views: {
                'main@': {
                    templateUrl: 'boxesTemplate.html'
                }
            }
        });

主要部分应该包括框（可能是组件？），如截图所示。但是框的数量及其内容（如框标题）应该由使用$ http从后端提取的数据生成。我想使用组件与API通信。 我可以以某种方式实现这一目标吗？

由于

Answer 1

最简单的解决方案 - ng-repeat和ng-include

<custom-component 
    ng-repeat="config in $ctrl.components" 
    service="$ctrl.service"
    config="config">
</custom-component>

其中组件类似于：

component（'customComponent'，{    ....    模板：'' }

以及任何适当的api-service实现，它将由包含的模板使用。