In my Single Page Application (SPA), I have structured the views in the following scheme:
Main Page > View > Subview > Sub-Subview.
The main page loads the View which includes the main navigation. The Subview displays different lists of items based on the selected link from the main navigation.
These items are links that lead to detailed information, shown in the Sub-subview where there are 3 tabs available. I am currently exploring a solution to automatically display the details of the first tab when a link is clicked in the Subview list. Additionally, the link in the Subview list passes a parameter to retrieve an object from the database.
Initially, I attempted to include the first tab directly in the HTML so it would be visible upon clicking a link, but this method is not dynamic enough as I'm segmenting all the controllers. Below is my route configuration:
$stateProvider
.state('main.application', {
abstract: true,
url: '/application',
template: '<ui-view/>'
})
.state('main.application.index', {
url: '',
templateUrl: 'app/application/application.html',
controller: 'ApplicationController as applicationCtrl',
resolve: resolve.index
)
.state('main.application.settings', {
url: '/settings/:id',
templateUrl: 'app/application/settings/application.settings.html',
controller: 'ApplicationSettingsController as appSettingsCtrl',
resolve: resolve.settings
})
.state('main.application.settings.info', {
url: '/info',
templateUrl: 'app/application/settings/info/application.settings.info.html',
controller: 'ApplicationSetInfoController as appInfoCtrl',
resolve: resolve.settings
})
.state('main.application.settings.platforms', {
url: '/platforms',
templateUrl: 'app/application/settings/platforms/application.settings.platforms.html',
controller: 'ApplicationSettingsController as appSettingsCtrl',
resolve: resolve.settings
})
.state('main.application.settings.keys', {
url: '/keys',
templateUrl: 'app/application/settings/keys/application.settings.keys.html',
controller: 'ApplicationSetKeysController as appKeysCtrl',
resolve: resolve.settings
});