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
– Sarju, Commented Jun 16, 2016 at 7:47

Community · Accepted Answer · 2017-05-23 12:24:05Z

1

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

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Jun 16, 2016 at 7:55

John

4652 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related