Configuring UI Router Statuses Based on Configuration

Question

Is there a way to configure the states of the interface router based on the server side JSON file. I would not avoid hard coding the states inside mine module.config(..).

At first I thought about having a controller that has state map data available that you can simply call $stateProvider. However, I believe controllers cannot enter providers into them.

Another option that I thought was a Javascript file outside of angular that puts state configuration data in some kind of global variable, referring to the module configuration function.

But is there a better approach?

Answer 1

I would say that there are two ways to use SERVER (JSON) data to create states.

First , we can use $httpJSON to load:

AngularJS - UI-router - How to configure dynamic views

The point here is that we will be able to store the repository on and use it in phase as soon as JSON can be loaded through .config()$stateProvider .run()$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);
      });

But there are some disadvantages. The main thing is that direct url navigation (copy-paste) will not work. The URL will not complete fast enough ...

Secondly, my preferred way is to create JSON as a variable on the server, load it as a script.

So, the server somehow generates a response via / api / stateData, for example:

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

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

.config() URL .