how to make ui-view to load a page on startup angularjs - angularjs

Question

When I run my application it directs to localhost:8080/#/ and the header and footer which I setup in the app.html is called:
<div id="wrap">
<main id="main" class="container-fluid clear-top">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
//content here
</div>
</div>
</nav>
<div ui-view id='content-container'></div>
</main>
</div>
<footer class="footer">
//content here
</footer>
I have created two HTML pages and I want one of the html page to be shown when the app first loads.
Code in A.html:
<input type="text" class="form-control" data-ng-model="searchAll">
<a class="clear" data-ng-click="clearSearch()">X</a>
Code in B.html:
<input type="text" class="form-control" data-ng-model="search">
I have the following code in my router.js:
export default ['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) => {
$stateProvider
.state('app', {
url: '/',
template: require('./app.html'),
controller: 'AppCtrl',
controllerAs: 'app'
})
.state('app.A', {
url: 'A',
template: require('./A/index.html'),
controller: 'ACtrl',
controllerAs: 'a'
})
.state('app.B', {
url: B
template: require('./B/index.html'),
controller: 'B',
controllerAs: 'B'
});
$urlRouterProvider.otherwise('/');
}];
The header and footer should be in all the pages and the page A.html should be loaded when the app starts. Could anyone let me know how I could achieve this.

Answer 1

I think that you should set your 'app' state as abstracted.
using :
//...
abstract:true
//...
and removing the url property.
This way, the next app child state with root url "/" will be the first displayed on the screen :
.state('app.a', {
url: '/',
template: require('./A/index.html'),
controller: 'ACtrl',
controllerAs: 'a'
})

Answer 2

I think better you call A.html URL in otherwise and keep the header and footer in the index.html instead of creating a separate state for this.
export default ['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) => {
$stateProvider
.state('app.A', {
url: '/A',
template: require('./A/index.html'),
controller: 'ACtrl',
controllerAs: 'a'
})
.state('app.B', {
url: '/B',
template: require('./B/index.html'),
controller: 'B',
controllerAs: 'B'
});
$urlRouterProvider.otherwise('/A');
}];