javascript - api调用完成后 ionic 隐藏启动画面

标签 javascript angularjs api ionic-framework splash-screen

我想一直显示 Splashscreen,直到我的应用程序结束以从不同的 Api 调用获取多个数据。隐藏 Splashscreen 的代码基于 Timer,我不希望这样:

 app.run(function($cordovaSplashscreen) {
    setTimeout(function() {
    $cordovaSplashscreen.hide()
  }, 5000)
 })

我目前的行为是启动画面显示 5 秒,然后出现空白页面中的第一个 View ,仅几秒钟后,数据将在我的 View 中可见。

我的问题是:如何在我的 app.js 中添加逻辑以仅在 API 调用完成时隐藏启动画面,这样用户将看到第一个 View ,其中包含所有可用数据。

最佳答案

你可以做的是等待所有请求完成 $q.all(promises) 使用 angularjs 内置的 promise 库。在成功函数中,您可以在 Controller 中调用 $cordovaSplashscreen.hide() 来隐藏闪屏,如 user46772已经提到了。示例代码:

index.html

<body ng-controller="AppController"></body>

app.js

var module = angular.module( "app", [ "ngCordova", "yourServices" ] )

module.config( ... );
module.run( ... );
module.controller( "ApplicationController", ApplicationController );

function ApplicationController( $cordovaSplashscreen, $q, apiCallService ) {

    loadData();

    function loadData() {

        $q.all( apiCallService.loadFoo1, apiCallService.loadFoo2, apiCallService.loadFoo3)
             .then( onSuccess, onError );

        function onSuccess() {
            $cordovaSplashscreen.hide()
        }

        function onError() {
            // do something useful else
        }
    }
}

yourServices.js

angular
    .module( "yourServices", [ "$http" ] )
    .factory( "apiCallService", apiCallService );

function apiCallService( "$http" ) {
    return {
        loadFoo1: loadFoo1,
        loadFoo2: loadFoo2,
        loadFoo3: loadFoo3
    }

    function loadFoo1() {
        return $http.get( "yourAPI" );
    }

    ...
}

请注意,此代码不是工作示例。但它应该解释你如何继续解决你的问题。此外,您还必须考虑如果您的一个请求在 onError() 函数中失败时会发生什么情况。

此外,您应该将代码包装到 onDeviceReady 中事件。假设您正在使用 ionic,您可以使用这段代码:

$ionicPlatform.ready( loadData );

不要忘记将 $ionicPlatform 注入(inject)到 Controller 函数中。

关于javascript - api调用完成后 ionic 隐藏启动画面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35701370/

相关文章:

javascript - ng-重复 : sort by time portion of the date only

javascript - 错误 : [ng:areq] Argument 'DoughnutCtrl' is not a function, 未定义

javascript - 从内联脚本调用 CoffeeScript 中的函数

javascript - JPA ng-repeat 过滤器 - 多个 id 作为一个

rest - 在端到端测试中处理第三方 API 请求

api - 如何批量更新TFS中的多个工作项

java - 使用 HttpURLConnection 将 Json 数据发布到 REST API 服务器

javascript - Webpack:通过文件加载器复制 JSON 文件

javascript - 如何将文本转换为有用数据的数组?

javascript - 在 ASP.NET 中使用 Javascript 删除添加的控件