title: AngularJS - UI-router - How to configure dynamic views
body: <p>I have had difficultly finding any documentation on utilizing the ui-router dynamically via a database. Par for the course, everything is hard coded. </p>
  
  <p><strong>My Json:</strong></p>
  
  <pre><code>[
     {
         "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,
          "parent": "root",
          "views": [
               {"name": "container@", "templateUrl": "/app/views/content2.html"},            
               {"name" :"left@", "templateUrl": "/app/views/left2.html" }
              ]
      }
  ]
  </code></pre>
  
  <p>My App:</p>
  
  <pre><code>'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 &amp; 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");
      });
   }]);
  </code></pre>
  
  <p>I am having difficultly configuring my views dynamically. Any ideas?</p>
  
  <hr>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I made a <a href="http://plnkr.co/edit/dvrszuj7atv90KvNqQgd?p=preview">Plunker</a>  per Radim Köhler's answer for anyone interested. I appreciate the help.</p>
  
  <p>I think ui-router is the defacto router for angular and by being dynamic it will make a large app much easier to manage.</p>