How to config the route using ui-router 'Dynamically' in my Angular Js application

Question

I have a main view and a submain view. In submain, I agian have some subviews but these are suppose to be loaded dynamically i.e Round1,Round2,Round3.... is coming from dynamic value It may have 5 rounds or 4 or 3... How can I load those states dynamically ?

    angular
        .module('myApp', ['ngResource', 'ngRoute', 'ui.router'])
        .config(function($stateProvider, $urlRouterProvider) {
            $stateProvider
                .state('main', {
                    url: '/main',
                    templateUrl: 'views/mainView.html',
                    controller: 'mainCtrl'
                })
                .state('main.submain', {
                    url: '/sub_main',
                    templateUrl: 'views/subMainView.html',
                    controller: 'subMainCtrl'
                })
                .state('main.submain.Round1', {
                    url: '/Round_One',
                    templateUrl: 'views/subView.html',
                })
                .state('main.submain.Round2', {
                    url: '/Round_Two',
                    templateUrl: 'views/subView.html'
                })
                .state('main.submain.Round3', {
                    url: '/Round_Three',
                    templateUrl: 'views/subView.html'
                })
                .state('main.submain.Round4', {
                    url: '/Round_Four',
                    templateUrl: 'views/subView.html'
                })
                .state('main.submain.Round5', {
                    url: '/Overall_Feedback',
                    templateUrl: 'views/Round5View.html'
                })
            $urlRouterProvider.otherwise('/login');
        });

If you want to go by dynamic way , then instead of sub routes,add subroute as a route param to main route like `/main/:subroute`.Then access it in controller and based on that parameter load particular partial based on your need. — Sarju, Jun 16 '16 at 07:47

score 1 · Answer 1 · edited May 23 '17 at 12:24

1

Please refer to the this Stack overflow question. This way you can add state to your $stateprovider dynamically

edited May 23 '17 at 12:24

Community

1
1

answered Jun 16 '16 at 07:55

John

465
2
8

How to config the route using ui-router 'Dynamically' in my Angular Js application

1 Answers1