UI路由器-AngularJS使用多个视图获得简单的加载屏幕

Question

我正在努力实现一个全屏加载页面，该页面将在首次加载应用程序时显示。 基本上，我正在尝试完成类似以下的简单操作（初始加载页面）： http : //fuse-angular-material.withinpixels.com/

为此，我有使用UI-Router的想法（这样我就可以在大量请求期间重用）。 因此，我尝试了以下方法，但是不管我如何进行此操作，pantant似乎都可以工作。

应用配置：

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路由器-AngularJS使用多个视图获得简单的加载屏幕

问题描述

1 个解决方案

解决方案1
0 2018-06-07 05:47:26

UI路由器-AngularJS使用多个视图获得简单的加载屏幕

问题描述

1 个解决方案

解决方案1 0 2018-06-07 05:47:26

解决方案1
0 2018-06-07 05:47:26