Home > Developer > Web Develop
$ionicLoading is a ionic default load interaction effect. Inside the content can also be modified in the template.
Usage
Angular.module (' Loadingapp ', [' Ionic ']). Controller (function($scope, $ionicLoading) { function() { $ionicLoading. Show ({ ' Loading ... ' }); }; function () { $ionicLoading. Hide (); };});Method
Displays a load effect.
Show (opts)
?
Hides a load effect.
Hide ()
?
InstanceHTML Code
<HTMLNg-app= "Ionicapp"> <Head> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "initial-scale=1, maximum-scale=1, User-scalable=no, Width=device-width"> <title>Ionic Modal</title> <Linkhref= "Http://www.runoob.com/static/ionic/css/ionic.min.css"rel= "stylesheet"> <Scriptsrc= "Http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></Script> </Head> <BodyNg-controller= "Appctrl"> <Ion-viewtitle= "Home"> <Ion-header-bar> <H1class= "title">The Stooges</H1> </Ion-header-bar> <ion-contentHas-header= "true"> <ion-list> <Ion-itemng-repeat= "stooge in Stooges"href="#">{{Stooge.name}}</Ion-item> </ion-list> </ion-content> </Ion-view> </Body></HTML>
JavaScript Code
Angular.module (' Ionicapp ', [' Ionic ']). Controller (' Appctrl ',function($scope, $timeout, $ionicLoading) {//Setup the loader$ionicLoading. Show ({content:' Loading ', Animation:' Fade-in ', Showbackdrop:true, MaxWidth:200, Showdelay:0 }); //Set a timeout to clear loader, however you would actually call the $ionicLoading. Hide (); method whenever everything I s ready or loaded.$timeout (function() {$ionicLoading. Hide (); $scope. Stooges= [{name: ' Moe '}, {name: ' Larry '}, {name: ' Curly '}]; }, 2000); });
?
?
?
Ionic JS 10: Load Action
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
