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

Question

I am working to implement a fullscreen loading page that will show when first loading the app. 我正在努力实现一个全屏加载页面，该页面将在首次加载应用程序时显示。 Basicaly I am trying to accomplish something simple like this (Initial loading page): http://fuse-angular-material.withinpixels.com/ 基本上，我正在尝试完成类似以下的简单操作（初始加载页面）： http : //fuse-angular-material.withinpixels.com/

For this I had the idea to use UI-Router (so i can re-use during heavy requests). 为此，我有使用UI-Router的想法（这样我就可以在大量请求期间重用）。 So I tried the following but dosent seem to working no matter how I aproach this. 因此，我尝试了以下方法，但是不管我如何进行此操作，pantant似乎都可以工作。

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: 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>

Would anyone have any idea what im missing? 有人知道我想念什么吗？

Answer 1

I do not think you are using abstract the way it is intended. 我认为您没有按照预期的方式使用抽象。

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

In my opinion,for your use case loading need not be an abstract state. 我认为，对于您的用例而言，加载不必是抽象状态。 it can be a normal state which will make necessary API request to fetch data to properly bootstrap your application and having done this will transition the state to /home which is the actual starting point of you're application. 它可能是正常状态，将发出必要的API请求以获取数据以正确引导您的应用程序，执行此操作会将状态转换为/ home，这是您应用程序的实际起点。

Hope this points you in the right direction. 希望这能为您指明正确的方向。 Cheers! 干杯!

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