api調用完成後的離子隱藏splashscreen

我想保持Splashscreen顯示，直到我的應用程序最終從不同的Api調用中獲取多個數據。隱藏閃屏的代碼是基於一個計時器，我不希望出現這種情況：api調用完成後的離子隱藏splashscreen

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

當前的行爲，我有它的一個啓動畫面顯示5秒鐘，然後來的了第一個視圖中的空白頁，只有幾秒鐘後，數據纔會在我看來可見。

我的問題是：如何在我的app.js中添加邏輯，以便只在API調用完成時才隱藏Splashscreen，這樣用戶才能看到第一個視圖，並且所有數據都可以使用。

來源

2016-02-29 Nizar B.

您可以使用angularjs內置承諾庫來等待所有請求完成$q.all(promises)。在成功功能中，您可以在控制器中調用$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注入到控制器的功能。

來源

2016-03-01 09:25:28 Beat

在運行塊上，我看不到任何函數調用來獲取數據。如果您的API是基於承諾的，您可以在成功或錯誤功能上隱藏啓動畫面。但我不會鼓勵你從跑塊中調用它，因爲它可能會導致難以發現的問題。

我建議使用ui-router並嘗試解析函數。該功能在轉換到視圖之前加載。

來源

2016-02-29 14:02:21 user46772

是的，抱歉，如果它令人困惑，但Api調用是在一個專用於它的外部工廠中進行的，我將此工廠注入到需要顯示數據的控制器中，但我需要整個邏輯（如果可能）在顯示Splashscreen時呼叫我的工廠，然後根據您所建議的成功承諾隱藏它。 –

api調用完成後的離子隱藏splashscreen

回答

相關問題