Ui-Router语言 - Angularjs使用多个视图获得简单的加载屏幕



我正在努力实现一个全屏加载页面,该页面将在首次加载应用程序时显示。 基本上,我正在尝试完成这样简单的事情(初始加载页面(: http://fuse-angular-material.withinpixels.com/

为此,我想到了使用 UI-Router 的想法(这样我就可以在繁忙的请求中重复使用(。所以我尝试了以下内容,但无论我如何责备,似乎都有效。

应用配置:

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("/");
})

.HTML:

<body ng-app="Main_App">
<ui-view name="Loading" ></ui-view> //Get a blank page
<div ui-view="Loading"></div> //Get a blank page
<div> 
<div>
<div>
<ui-view></ui-view> //loading page shows up here if i remove abstract.
</div>
</div>
</div>
</body>

有人知道我错过了什么吗?

我不认为你按照它想要的方式使用抽象。

https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#abstract

在我看来,对于您的用例,加载不必是抽象状态。 它可以是一个正常状态,它将发出必要的 API 请求来获取数据以正确引导您的应用程序,并且完成此操作会将状态转换为/home,这是您的应用程序的实际起点。

希望这为您指明了正确的方向。 干杯!

最新更新