I am currently working on implementing a fullscreen loading page that will be displayed when the app is first loaded. I want to achieve something similar to this simple initial loading page:
To accomplish this, my idea was to use UI-Router (so that I can reuse it during heavy requests). However, no matter how I try to approach this, it doesn't seem to be working as expected.
Here's my app configuration:
Main_App.config( function($stateProvider, $urlRouterProvider) {
var Loading = {
abstract: true,
name: 'Loading',
url: '/',
templateUrl: "Pages/Loading.html"
}
var Home = {
name: 'Home',
url: '/Home',
templateUrl: "Pages/Home.html"
}
$stateProvider.state(Loading);
$stateProvider.state(Home);
$urlRouterProvider.otherwise("/");
})
In the HTML:
<body ng-app="Main_App">
<ui-view name="Loading" ></ui-view> //Shows a blank page
<div ui-view="Loading"></div> //Shows a blank page
<div>
<div>
<div>
<ui-view></ui-view> //The loading page shows up here if I remove 'abstract'.
</div>
</div>
</div>
</body>
Can anyone provide insights on what may be missing or incorrect in my implementation?