Angular.Js dynamic states

<!DOCTYPE html>
<html ng-app="App" ng-strict-di>

  <head>
    <title>my app</title>
    <style>ul { padding-left: 0; } li { list-style: none; }</style>
    <script data-require="angular.js@*"
            src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
    <script data-require="ui-router@*" 
            src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
    <script>
      document.write('<base href="'+ document.location.pathname +'" />')
    </script>
    <script src="script.js"></script>
  </head> 

  <body>
    <ul>
      <li><a href="#/home">home</a>
      <li><a href="#/login">login</a>
      <li><a href="#/serviceAgreement">serviceAgreement</a>
      <li><a href="#/templates/applications1">applications1</a>
    </ul>
    
    <div ui-view=""></div>
    
<script type="text/ng-template" id="tpl.html"> 
 <div ui-view>
  <h3>current state name: <var>{{$state.current.name}}</var></h3>
  
  
  <h5>params</h5>
  <pre>{{$stateParams | json}}</pre>
  <h5>state</h5>
  <pre>{{$state.current | json}}</pre>
  
 </div>
</script>

  </body> 

</html>

var myApp = angular.module('App', [
  'ui.router'
]);
myApp.constant('uiRouter', {
  "$stateProviderRef": "$stateProviderRef",
  "$urlRouterProviderRef": "$stateProviderRef"
})
myApp.run(['$rootScope', '$state', '$stateParams',
    function($rootScope, $state, $stateParams) {
      $rootScope.$state = $state;
      $rootScope.$stateParams = $stateParams;
    }
  ])
  .controller('AController', ['$scope', function($scope) {}])
  .controller('SController', ['$scope', function($scope) {}])

myApp.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', '$httpProvider', 'uiRouter',
  function($locationProvider, $stateProvider, $urlRouterProvider, $httpProvider, uiRouter) {

    // XSRF token naming
    $httpProvider.defaults.xsrfHeaderName = 'x-dt-csrf-header';
    $httpProvider.defaults.xsrfCookieName = 'X-CSRF-TOKEN';

    $stateProvider
      .state('home', {
        url: "/home",
        templateUrl: 'tpl.html',
      })
    $stateProvider
      .state('authenticated', {
        template: '<ui-view />',
      })
    $stateProvider
      .state('login', {
        url: '/login',
        templateUrl: 'html/XXX/loginForm.html',
        controller: 'AController'
      })
      .state('sAgree', {
        url: '/serviceAgreement',
        templateUrl: 'html/xxx/s.html',
        controller: 'SController'
      });
    $urlRouterProvider.deferIntercept();

    $urlRouterProvider.otherwise('/login');

    $locationProvider.html5Mode({
      enabled: false
    });
    uiRouter.$stateProviderRef = $stateProvider;
    uiRouter.$urlRouterProviderRef = $urlRouterProvider;

  }
]);
myApp.factory('routeCreator', ['$q', '$rootScope', '$http', '$urlRouter', 'uiRouter',
  function($q, $rootScope, $http, $urlRouter, uiRouter) {
    var $state = $rootScope.$state;
    return {
      getModulesDatas: function() {
        return $http
          .get("modules.json")
          .success(function(data) {
            routeCreator.data = data;
          });
      },
      createRoute: function(data) {
        angular.forEach(data, function(value, key) {
          var getExistingState = $state.get(value.name),
              state = {
                "url": value.url,
                "parent": value.parent,
                "abstract": value.abstract,
                "views": {}
              };
          if (getExistingState !== null) {
            return;
          }
          angular.forEach(value.views, function(view) {
            state.views[view.name] = {
              templateUrl: view.templateUrl,
            };
          });
          uiRouter.$stateProviderRef.state(value.name, state);
        });
        $urlRouter.sync();
        $urlRouter.listen();
      },
    }
  }
]);
myApp.run(['routeCreator',
  function(routeCreator) {
    routeCreator
      .getModulesDatas()
      .then(function(modules) {
        routeCreator.createRoute(modules.data);
      });
  }
]);

/* Styles go here */

[{
   "name": "applications1",
    "url": "^/templates/applications1",
    "parent": "authenticated",
    "abstract": false,
     "views": [{
     "name": "",
     "templateUrl": "html/templates/basicLayout.html"
   }, 
   {
      "name": "header@applications1",
      "templateUrl": "html/templates/header.html"
  }
  ]},
   {
   "name": "login",
   "url": "/login",
   "abstract": false,
   "views": [{
     "name": "",
     "templateUrl": "html/admin/loginForm.html"
   }]
 }]

<div>
  
  content of the 
  
  html/templates/basicLayout.html
  
  <div ui-view="header"></div>
</div>

<div>
  
  content of the 
  
  html/templates/header.html
</div>

<div>
  
  content of the 
  
  html/admin/loginForm.html
</div>

<div>
  
  content of the 
  
  html/XXX/loginForm.html
</div>

<div>
  
  content of the 
  
  html/xxx/s.html
</div>