Angular.js create routes from json file

Question

I have an angular.js application with a CMS(on S3). I would like to be able to create an entire page including the route from the CMS without having to push new code and redeploy the application. Is there some way to do this?

From what I can tell the $routeProvider is initialized in the .config block which only allows providers to be injected. Also from what I can tell I cannot use services in the .config block which basically eliminates the possibility to reference a get request in order to generate the routes from an S3 file.

I am new-ish to angular.js but I feel like I am overlooking something. If anyone can point me in the right direction I would be really grateful! Thanks in advance!

you can add states dynamically http://stackoverflow.com/questions/29422780/can-we-add-dynamic-states-to-stateprovider-with-already-existing-states-in-ui-r — Petr Averyanov, Dec 11 '15 at 23:36
Right but I am having trouble reading from the json file because the routes are created with the providers and I need a service to get the Json file AFAIK. — ruby_newbie, Dec 14 '15 at 16:00

score 0 · Answer 1 · answered Dec 14 '15 at 20:48

I am not sure if there is a more "Angular" way to solve this but here is what I did.

1)Rather than store the values as .json, I simply created a .js file where I set a variable equal to the route data.

2) I used a script tag in the layout of my Angular.js application that imports the .js file that I stored on S3.

3) In the config block I created the states required like so:

@newco.config(['$provide', '$locationProvider', '$httpProvider', '$stateProvider', '$urlRouterProvider',
  ($provide, $locationProvider, $httpProvider, $stateProvider, $urlRouterProvider) ->

    $locationProvider.html5Mode(false);
    $locationProvider.hashPrefix('!');
    $urlRouterProvider.otherwise('/404')

    _.each routes.routes, (route) ->

      $stateProvider
      .state(route, {
          url: if route == '/' then route else "/" + route,
          templateUrl: '/pages/home/new_index',
          controller: 'NewHomeController',
          resolve:{
            pageData: (cmsService) ->
              cmsService.pageData route
            basePlan: -> 'default'
            customerCategoryId: -> 'domestic'
          }

        })

    $stateProvider
    .state('/404', {
        templateUrl: '404.html'
      })
])

If there is a better way to do this I would certainly be interested in hearing it because I almost feel like my solution is 'hackey' but I simply can't find a more appropriate solution because the routes are initialized in during the config block which forbids the use of services. If someone has a better idea or a reason why my solution is not ideal I would love to hear it.

Angular.js create routes from json file

1 Answers1