1

I am developing a mobile application using Ionic framework. I get a JSON file containing the template and it's controller. The server will push data once there's data in JSON format. The problem is adding the states dynamically, and I have read that it's only possible at the config time.

Please tell me if there's a way to do this through a controller which will only be responsible of receiving and setting the new state and that will also receive the JSON and from it create the new state.

The help is highly appreciated!

Edit

I have found ui-router-extras (http://christopherthielen.github.io/ui-router-extras/#/future), but I don't know how to make it work for my application.

Suppose a controller gets the JSON using $http where the JSON looks like:

{
  'name':'preview',
  'template':'<h1>Hello</h2>'
}

How to add this state in this controller?

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
coding4fun
  • 3,485
  • 1
  • 16
  • 28

1 Answers1

0

There are some simliar Q & A:

Which shows, that UI-Router is shipped with a great feature:

$urlRouterProvider.deferIntercept(defer)

Disables (or enables) deferring location change interception.

If you wish to customize the behavior of syncing the URL (for example, if you wish to defer a transition but maintain the current URL), call this method at configuration time. Then, at run time, call $urlRouter.listen() after you have configured your own $locationChangeSuccess event handler.

There are some working plunkers here or here,

showing that in .config() phase we will stop url router:

.config(['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {

        // States, which we know about from beginning
        // could be declared "statically"
        $stateProvider
          ... 
        // here we say STOP
        $urlRouterProvider.deferIntercept();
    }
])

Later, in .run() phase, we will 1) configure states via $http 2) enable url routing

.run(['$urlRouter', '$timeout', '$state',
  function($urlRouter, $timeout, $state) {

    $http
      .get("modules.json")
      .success(function(data) {
        // here we can use some JSON to configure $stateProvider

    // in example we can use $timeout to simulate that 
    $timeout(function(){

      // here we turn all on again...
      $urlRouter.sync();
      $urlRouter.listen();

      // there could be some decision, driven by $http load
      // we just use some state as default target
      $state.go("parent.child");
    }, 1000)
    ...

Check it in action here or there

Community
  • 1
  • 1
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • This solution assumes that I will update the states on startup of the app because you're using "run" function. I want the solution to be just like a $http service, for example, that I can use in the controller whenever I want to retrieve the new states and add them to the available states. – coding4fun Jun 14 '15 at 18:50
  • That is part of the examples I showed you, check this answer and its plunker http://stackoverflow.com/a/24730459/1679310... Anytime you can add new states. It will work fully - as shown in plunker. The only difference (when not using $urlRouter.sync()) is that on refresh, that won't work... because that was not called yet – Radim Köhler Jun 15 '15 at 06:50