Search code examples
javascriptangularjsangular-ui-routerurl-routingangularjs-routing

add angular ionic views and routes after app has initialized


I'm slightly new to Angular JS. I'm using it with Ionic and Phonegap to create a mobile application. This application has views injected into the application by a web server.

I would therefore need to inject the ionic html markup views and compile them with Angular somehow, as well as link these newly added views to the routes definition. This is what I've done so far [inside app.config] :

app.stateProvider = $stateProvider; 

and then [inside app.run] :

app.stateProvider.state('side-menu8', {
  url: '/menu2',
  templateUrl: 'side-menu8.html'
});
$state.go('side-menu8');

The side-menu8.html template script markup is inserted into the index.html page. I did this to test if the state registers outside the config process. The application currently does register the additional state and re-directs to the template successfully. My question is, how would i go about adding a dynamic service that would fetch the views and data, inject it into the index.html view and register the additional states?


Solution

  • Configuration setting should always be done in configuration phase only you couldn't register route from app.run, you have to do it inside app.config, As you want to implement dynamic paging you could do add one parameter to you state url and on basis of that you could render your template dynamically

    Code

    app.config(["$stateProvider", function($stateProvider) {
        $stateProvider.state('side-menu', {
            url: '/menu/:id',
            templateUrl: function($stateParams){
               return 'side-menu'+ $stateParams.id +'.html'; //this will fetch template dynamically
            }
        });
        //you could also add state here
    }]);