Question

我有一个后端，它生成一个json文件，其中包含有关最重要页面的信息。我想加载这个json文件，并根据文件中的数据构建相应的状态。我无法将$ stateProvider注入.run或.controller，我无法将$ http注入.config，所以我感觉有点迷失。

所以问题是。我如何加载json文件，根据这些数据浏览数据和构建状态？

快速编辑：如果我没有提供必要的信息，请告诉我，我会尝试改进这个问题。

Answer 1

我试图解决类似的问题并创建了UI-Router Extras＆＃34; Future States＆＃34;。 Future states尝试解决其他问题，例如使用RequireJS延迟加载，整个卸载模块的占位符，以及通过书签URL路由到卸载的占位符。

这是一个演示如何将Future States用于您的用例的插件：http://plnkr.co/edit/Ny7MQcmy35dKeEjbw57d?p=preview

我尝试使用stackoverflow代码段运行程序，但遇到了问题，所以这里是一个不可运行的代码粘贴。

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>"
  }
]

从json文件/ http创建状态

1 个答案: