AngularJS – UI路由器 – 如何配置动态视图

我已经很难找到任何关于通过数据库动态使用ui路由器的文档。 Par为课程，一切都是硬编码。

我的Json：

[
   {
       "name": "root","url": "/","parent": "","abstract": true,"views": [
            {"name": "header","templateUrl": "/app/views/header.html"},{"name" :"footer","templateUrl": "/app/views/footer.html" }
       ]
   },{
        "name": "home","url": "","abstract" : false,"parent": "root","views": [
            {"name": "container@","templateUrl": "/app/views/content1.html"},{"name" :"left@","templateUrl": "/app/views/left1.html" }
       ]
    },{
        "name": "about","url": "/about","abstract": false,"views": [
             {"name": "container@","templateUrl": "/app/views/content2.html"},"templateUrl": "/app/views/left2.html" }
            ]
    }
]

我的应用程序：

'use Strict';

var $stateProviderRef = null;
var $urlRouterProviderRef = null;

var app = angular.module('app',['ngRoute','ui.router']);


 app.factory('menuItems',function ($http) {
    return {
      all: function () {
        return $http({
            url: '/app/jsonData/efstates.js',method: 'GET'
        });
    }
  };
 });


  app.config(function ($LOCATIOnProvider,$urlRouterProvider,$stateProvider) {
    $urlRouterProviderRef = $urlRouterProvider;
    $stateProviderRef = $stateProvider;
    $LOCATIOnProvider.html5Mode(false);
    $urlRouterProviderRef.otherwise("/");
  });


  app.run(['$q','$rootScope','$state','menuItems',function ($q,$rootScope,$state,menuItems) {
      menuItems.all().success(function (data) {
          angular.forEach(data,function (value,key) {                
              $stateProviderRef.state(name = value.name,{
                  "url": value.url,"parent" : value.parent,"abstract": value.abstract,"views": {
                     // do not want the below hard coded,I want to loop
                     // through the respective json array objects and populate state & views 
                     // I can do this with everything but views.

                     // first loop
                     'header': { 'templateUrl': '/app/views/header.html' },'footer': { 'templateUrl': '/app/views/footer.html' },// second loop
                     'left@':  { 'templateUrl': '/app/views/left1.html' },'container@': { 'templateUrl': '/app/views/container1.html' },// third loop
                     'left@':  { 'templateUrl': '/app/views/left2.html' },'container@': { 'templateUrl': '/app/views/container2.html' },}
            });
        });
        $state.go("home");
    });
 }]);

我动态地配置我的视图。有任何想法吗？

更新：

我为RadimKöhler的答案为任何感兴趣的人做了一个Plunker。我感谢帮助。

我认为ui路由器是角度的事实路由器，通过动态，它将使一个大型的应用程序@R_801_11222@管理。

app.run(['$q','$http',$http) 
  {
    $http.get("myJson.json")
    .success(function(data)
    {
      angular.forEach(data,key) 
      { 
          var state = {
            "url": value.url,"views": {}
          };

          // here we configure the views
          angular.forEach(value.views,function (view) 
          {
            state.views[view.name] = {
              templateUrl : view.templateUrl,};
          });

          $stateProviderRef.state(value.name,statE);
      });
      $state.go("home");    
    });
}]);