CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Zahidur Rahman
Zahidur Rahman

Reputation: 1718

URL not updating when change state

For the below code, when I am going from "/login" page to "/quiz" page the state is changing with content but the URL is not changing. I also noted that when I go from "/login" page to "/newsfeed" page then URL and state both are changing. Why this happening, I need the URL to change with the state.

    X.config(['$httpProvider', '$stateProvider', '$urlRouterProvider', '$locationProvider',
        function($httpProvider, $stateProvider, $urlRouterProvider, $locationProvider) {
            $urlRouterProvider.otherwise('/login');

            $stateProvider
                .state('app', {
                    template: '<div ui-view=""></diiv>'
                })
                .state('app.login', {
                    templateUrl: '../views/login/login.html',
                    controller:'LoginController'
                })
                .state('app.login.main', {
                    url: '/login',
                    templateUrl: '../views/login/login-main.html',
                    controller: 'LoginController'
                })
                .state('app.login.quiz_list', {
                    templateUrl: '../views/quiz/quiz_list.html',
                    controller: 'QuizListController',
                    url: '/quiz'
                })

               .state('app.front', {
                    templateUrl: '../views/user_utility/app.html',
                    controller: 'HeaderController'
                })
                .state('app.front.newsfeed', {
                    url: '/newsfeed',
                    templateUrl: '../views/user_utility/newsfeed.html',
                    controller: 'UserFeedController'
                });


        $httpProvider.interceptors.push('AuthInterceptor');
        $httpProvider.defaults.useXDomain = true;


    }
])

Upvotes: 1

Views: 93

Answers (1)

Pratik Bhattacharya
Pratik Bhattacharya

Reputation: 3746

This is happening because the parent state for both your logn.main and login.quiz_list has the same parent. This is the way UI-Routter works in Angular.js.

If you have 2 states - S1 and S2, and S2 is the child state for S1, when you go to S2, the URL will be S1/S2.

Your 'app' and 'app.login' state doesn't have any URL specified, 'app.login.main' state has the URL specified as "/login", so when you are in this page you URL should be "domain/#/login". The quiz page's state in 'app.login.quiz_list' whose URL is 'quiz'. Since your login main page and the quiz page has the same parent state (app.login is the parent for both main and quiz_list), the URL won't completely change when you move to this state, only 'quiz' will be appended to the URL. So your URL in the quiz page should be "domain/#/login/quiz".

However your newsfeeed page has a different parent - 'app.front.newfeed' which has a URL of '/newsfeed'. Now it can be seen that app nor front state has any URL so when you come to this state your URL should be "domain/#/newsfeed".

To prevent this I would suggest move quiz_list to a different level. You state hierarchy should be something like this:

  • App
    • Login
      • Main
    • Front
      • Newsfeed
      • Quiz_list

In terms of code it should be

app.state('app', ...)
app.state('app.login', ...)
app.state('app.login.main', ...)  //URL - /login
app.state('app.front', ...)
app.state('app.front.quiz_list', ...)  //URL - /newsfeed
app.state('app.front.newsfeed', ...)  //URL - /quiz

Upvotes: 1

Related Questions