ui-router nested view doesn't get loaded properly

Question

Hey I have a simple app which I have created.

The app has the following views

1.Settings - Main View.

2.Profile - Sub view, child of Settings View.

3.Account - Sub View, child of Settings View.

I want the application to start from profile page, therefore I wrote the following code:

$urlRouterProvider.otherwise('/profile');

But apparently noting is happen, I got a blank screen and can't see the view properly(settings.profile).

I have added my code to a plunker to make things more convenient and accessible for other developers which can help me solve my problem. https://plnkr.co/edit/RFP5dUNV876cy8vRDuvL?p=preview

Main main code is like this:

/**
*  Module
*
* Description
*/
var app = angular.module('app', ['ui.router'])

app.controller('mainCtrl', ['$scope', function($scope){
    $scope.title="Index Page";
}]);

app.controller('ProfileController', ['$scope', function($scope){
    $scope.title="Profile Page";
}]);

app.controller('AccountController', ['$scope', function($scope){
    $scope.title="Account Page";
}]);

app.controller('SettingsController', ['$scope', function($scope){
    $scope.title="Settings Page";
}]);

app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('settings', {
            url: '/settings',
            templateUrl: 'settings.html',
            controller: 'SettingsController'
        })
        .state('settings.profile', {
            url: '/profile',
            templateUrl: 'profile.html',
            controller: 'ProfileController'
        })
        .state('settings.account', {
            url: '/account',
            templateUrl: 'account.html',
            controller: 'AccountController'
        });
    $urlRouterProvider.otherwise('/profile');
});

Oberon · Accepted Answer · 2016-10-18 15:47:57Z

1

Change the .otherwise function to:

$urlRouterProvider.otherwise('/settings/profile');

Since the other routes are nested within settings state, you can only access the nested views via the <ui-view> in settings.html. The urls are also nested within each other if url parameter is defined in both, so /settings/profile is required.

Updated Plnkr

edited Oct 18, 2016 at 15:47

answered Oct 18, 2016 at 15:44

Oberon

2001 silver badge9 bronze badges

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

2 Comments

Brk Over a year ago

but I don't want to do that, I want it to load the nested view at first.

Oberon Over a year ago

Whoops, noticed my mistake. Updated to account for nested urls. Updated plnkr link as well

Collectives™ on Stack Overflow

ui-router nested view doesn't get loaded properly

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related