적절한 접근 방식은 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 반복 및 NG-포함

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

경우 구성 요소입니다 뭔가 같은 :

구성 요소 ('customComponent', { .... 템플릿 : '' }

및 i가 사용할 적절한 API 서비스 구현 ncluded 템플릿.