Adding a state to the .config stateprovider dynamically using javascript


#1

Good afternoon,

I have the following state config that creates the views for my app:

  app.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "home.html"
          //controller: 'HomeTabCtrl'
        }
      }
    })
    .state('tabs.welcome', {
      url: "/welcome",
      views: {
        'home-tab': {
          templateUrl: "welcome.html"
        }
      }
    })
	.state('tabs.news', {
      url: "/news",
      views: {
        'home-tab': {
          templateUrl: "news.html"
        }
      }
    })
	.state('tabs.campus', {
      url: "/campus",
      views: {
        'home-tab': {
          templateUrl: "campus.html"
        }
      }
    })
	.state('tabs.facilities', {
      url: "/facilities",
      views: {
        'home-tab': {
          templateUrl: "facilities.html"
        }
      }
    })
	.state('tabs.events', {
      url: "/events",
      views: {
        'home-tab': {
          templateUrl: "events.html"
        }
      }
    })
	.state('tabs.101', {
      url: "/101",
      views: {
        'home-tab': {
          templateUrl: "101.html"
        }
      }
    });



   $urlRouterProvider.otherwise("/tab/home");

})

I’m trying to add further ‘.state’ objects to the config dynamically (based on a json feed containing news articles). I want to create an additional ‘.state’ for each article, but I don’t know how many there will be. How would I go about adding additional ‘.state’ objects to the config once it has been created earlier in the code? Or is there a better solution?

Thanks very much for you help


#2

Heyho,

you can add parameters to state-urls
like
url: ‘/articles/:id’

then you have a state parameter id ($stateParams.id).

Look at that quick reference: