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
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: http://plnkr.co/edit/Ny7MQcmy35dKeEjbw57d?p=preview
I tried using the snippet runner for stackoverflow but had problems so here is a non-runnable paste of code.
JS:
// 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(response.data, function(state) {
$sp.state(state);
})
})
}
$fsp.addResolve(futureStateResolve);
console.log($fsp);
}]);
app.controller("someCtrl", function() { })
Html:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
<script src="https://rawgit.com/angular-ui/ui-router/0.2.11/release/angular-ui-router.js"></script>
<script src="https://rawgit.com/christopherthielen/ui-router-extras/0.0.10/release/ct-ui-router-extras.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<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>
</body>
</html>
Json:
[
{
"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>"
}
]
source to share