Javascript Ui路由器-Angularjs使用多个视图获得一个简单的加载屏幕_Javascript_Angularjs_Angular Ui Router

Javascript Ui路由器-Angularjs使用多个视图获得一个简单的加载屏幕

javascript angularjs

Javascript Ui路由器-Angularjs使用多个视图获得一个简单的加载屏幕,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,我正在努力实现一个全屏加载页面，它将在首次加载应用程序时显示。基本上，我正在尝试完成这样简单的事情（初始加载页面）：为此，我想到了使用UI路由器（这样我可以在大量请求时重复使用）。因此，我尝试了以下方法，但无论我如何尝试，似乎都不起作用应用程序配置： Main_App.config( function($stateProvider, $urlRouterProvider) { var Loading = { abstract: true, name:

我正在努力实现一个全屏加载页面，它将在首次加载应用程序时显示。基本上，我正在尝试完成这样简单的事情（初始加载页面）：

为此，我想到了使用UI路由器（这样我可以在大量请求时重复使用）。因此，我尝试了以下方法，但无论我如何尝试，似乎都不起作用

应用程序配置：

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:


//得到一张空白页
//得到一张空白页
//如果我删除了摘要，加载页面就会显示在这里。

有人知道我遗漏了什么吗？

我不认为你用的是抽象的方式

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

希望这能为你指明正确的方向。

干杯

感谢您的评论，但我尝试了正常状态，如示例中所示，如果我尝试或，它将不起作用

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