How can i store and use the json data inside route provider

Question

$routeProvider

          .when('/accordion', {(need to get the name from json)

       templateUrl: 'Samples/accordion.html',(need to get the urlfrom json)
controller: "AccordionCtrl",

          })

How to store the name and template url in json and how to get the name and template url from json

Answer 1

Please check below code which will take input as templates.json file and it will help create dynamic routes

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

var $routeProviderReference;
var currentRoute;
app.config(function($routeProvider){
    $routeProviderReference = $routeProvider;
});
app.service('shareData', function(){
    app.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();
    });
    }]);
    app.controller(currentRoute.controller, function($scope){
        $scope.pageClass = 'page-' + currentRoute.name;
    });
});

Also find the json file demo as below:

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

Hope this would help you out.!