Question

我正在努力实现一个全屏加载页面，该页面将在首次加载应用时显示。 Basicaly我试图完成这样简单的事情（初始加载页面）：http://fuse-angular-material.withinpixels.com/

为此我有想法使用UI-Router（所以我可以在繁重的请求中重复使用）。所以我尝试了以下但是无论我如何处理这个问题，似乎都很有效。

App config：

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>

有人会知道我缺少什么吗？

Answer 1

我认为你没有按照预期的方式使用抽象。

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

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

希望这能指出你正确的方向。干杯！

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

1 个答案: