Hi there, I've developed a simple app with multiple views.
Here are the different views in my app:
1. Settings - Main View.
2. Profile - Sub view, nested under Settings View.
3. Account - Sub View, also nested under Settings View.
I want the app to start from the profile page, so I included this code:
$urlRouterProvider.otherwise('/profile');
However, when I try to run the app, I'm getting a blank screen instead of seeing the proper view (settings.profile).
To make it easier for other developers to help me troubleshoot, I've shared my code on Plunker: https://plnkr.co/edit/RFP5dUNV876cy8vRDuvL?p=preview
The main portion of my code looks 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');
});