Dynamic route and controller from json

[eldewiny]

I’m try to create dynamic framework with angularjs here is my plan … the user have to add the new templateUrl and controller from json file like this templates.json

{
  "pages" : [
    {
    "name"        : "home",
    "tempUrls"    : "views/home",
    "controller"  : "HomeController"
    },
    {
      "name"        : "about",
      "tempUrls"    : "views/about",
      "controller"  : "AboutController"
    },
    {
      "name"        : "contact",
      "tempUrls"    : "views/contact",
      "controller"  : "ContactController"
    }
  ]
}

from here my job to create for hem the controller and templateUrl with the page name in angularjs like this hours.js

'use strict';
var hours = angular.module('hours', ['ngRoute']);

var $routeProviderReference;
var currentRoute;
hours.config(function($routeProvider){
	$routeProviderReference = $routeProvider;
});
hours.service('shareData', function(){
	hours.run(['$route', '$http', '$rootScope', function($route, $http, $rootScope){
	$http.get("templates.json").success(function(data){
		var loop = 0, currentRoute;
		for(loop = 0; loop < data.pages.length; loop++){
			currentRoute = data.pages[loop];
			var routeName = "/" + currentRoute.name;
			$routeProviderReference.when(routeName, {
				templateUrl: currentRoute.tempUrls,
				controller : currentRoute.controller,
				resolve: {
					param: function()
					{
						return currentRoute.resolve;
					}
				}
			});
		}
			$route.reload();
	});
	}]);
	hours.controller(currentRoute.controller, function($scope){
		$scope.pageClass = 'page-' + currentRoute.name;
	});
});

and here is the** index.html**

<div ng-class="{{pageClass}}" ng-view></div>

and here is the static version from angularJS working perfectly before i converted to dynamic

var hours = angular.module('hours', ['ngRoute']);

hours.config(function($routeProvider){
    $routeProvider
        .when('/', {
            templateUrl: 'views/page-home.html',
            controller: 'homeController'
        })
});

hours.controller('homeController', function($scope){
    $scope.pageClass = 'page-home';
});