根据配置配置 UI 路由器状态

Question

有没有办法根据服务器端 JSON 文件配置 UI 路由器状态。我不想避免在 module.config(..) 中对各州进行硬编码。

我首先想到的是拥有状态图数据的控制器，它可以直接调用 $stateProvider。但是，我相信，控制器不能将提供程序注入其中。

我想到的另一个选择是在 angular 之外有一个 Javascript 文件，它将状态配置数据放在某个全局变量中，以便从模块配置函数中引用。

但是有更好的方法吗？

Answer 1

我想说的是，通常有两种方法可以使用服务器数据 (JSON) 来建立状态。

首先，我们可以使用$http加载JSON:

AngularJS - UI-router - How to configure dynamic views

这里的重点是，我们将在 .config() 状态存储引用 $stateProvider 并在 [=16 中使用它=] 阶段，一旦 JSON 可以通过 $http

加载

// ref to provider, to be configured later
var $stateProviderRef;

// config phase
app.run(['$stateProvider',
  function ($stateProvider) 
  {
    $stateProviderRef = $stateProvider
  }

// run phase
app.run(['$q', '$rootScope', '$state', '$http',
  function ($q, $rootScope, $state, $http) 
  {
    $http.get("myJson.json")
    .success(function(data)
    {
      angular.forEach(data, function (value, key) 
      { 
          var state = {
            "url": value.url,
            ...
          };
          ...
          // here we still configure provider, but in RUN
          $stateProviderRef.state(value.name, state);
      });

但是也有一些缺点。主要是，直接 url 导航（复制 - 粘贴）将不起作用。 URL 不会尽快解决...

其次，我的首选方式 - 在服务器上创建JSON作为变量，将其作为脚本加载。

所以服务器会通过 /api/stateData 以某种方式生成响应，例如：

var stateData  = [{ stateName : "State1",
  ...
}];

我们会将其作为资源注入到页面中

<script src="/api/stateData" ...

这可以直接在.config()阶段使用，很快就会解决URL配置的问题。

根据配置配置 UI 路由器状态

Configuring UI Router states based on configuration

state

angularjs

angular-ui-router