Creating states from json file / http

I have a backend that generates a json file containing information about the most important pages. I would like to load this json file and plot the corresponding states based on the data in the file. I cannot inject $ stateProvider in .run or .controller and I cannot nest $ http in .config, so I feel a little lost.

So the question is. How can I load a json file, view data, and build states based on that data?

Quick edit: if I'm missing the information I need, please tell me and I'll try to improve the question.


source to share

1 answer

I tried to solve a similar problem and created additional features of the Future States UI-Router. Future states are trying to address additional issues like lazy loading using RequireJS, placeholders for all offloaded modules, and bookmarked URL routing for offloaded placeholders.

Here is a plunger demonstrating how to use Future States for your use case:

I tried using the snippet runner for stackoverflow but had problems so here is a non-runnable paste of code.


// Code goes here

var app = angular.module("jsonstates", ["ct.ui.router.extras"]);

app.config([ '$stateProvider', '$futureStateProvider', 
function($sp, $fsp ) { 
  var futureStateResolve = function($http) { 
    return $http.get("states.json").then(function(response) {
      angular.forEach(, function(state) { 

app.controller("someCtrl", function() { })



<!DOCTYPE html>

    <script data-require="angular.js@1.2.25" data-semver="1.2.25" src=""></script>
    <script src=""></script>
    <script src=""></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>

  <body ng-app="jsonstates">
    <h1>Hello Plunker!</h1>
    <a href="#/top">Top state</a> <a href="#/top/nested">Nested state</a>
    <div ui-view></div>




    "name": "top",
    "url": "/top",
    "controller": "someCtrl",
    "template": "<h1>top state</h1><div ui-view></div>"
    "name": "nested",
    "parent": "top",
    "url": "/nested",
    "controller": "someCtrl",
    "template": "<h1>nested state</h1><div ui-view></div>"




All Articles