114 Ionic1 IonicLoading
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOv3kk7N2veAGh1hbdK_6jFx7cJQHaWMssXn4Ljv28yz4EMk07kKOtS12i_YZs7Cs6_oxYreEsLr61Bf0aWOak_FE3DgcBYZvywFQF_sNWADpz7uzj7OSIcL7pQ_1GEnQDjHEH_gPteIM/s200/309-ionicv1-ionicloading.gif)
.
ionicv1 tutorial
114 Ionic1 IonicLoading
Note
$ionicLoading
An overlay that can be used to indicate activity while blocking user interaction.
Codes
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width"> <title></title> <!--local lib--> <!--<script src="lib/ionic/js/ionic.bundle.js"></script>--> <!--cloud lib--> <script src="http://code.ionicframework.com/1.3.2/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <!--<script src="cordova.js"></script> --> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above--> <!--<link href="css/ionic.app.css" rel="stylesheet">--> <!--local lib--> <!--<link href="lib/ionic/css/ionic.css" rel="stylesheet">--> <!--cloud lib--> <link href="http://code.ionicframework.com/1.3.2/css/ionic.css" rel="stylesheet"> <!--ionic custom styling--> <style> .platform-ios .manual-ios-statusbar-padding{padding-top:20px}.manual-remove-top-padding{padding-top:0}.manual-remove-top-padding .scroll{padding-top:0!important}.list.card.manual-card-fullwidth,ion-list.manual-list-fullwidth div.list{margin-left:-10px;margin-right:-10px}.list.card.manual-card-fullwidth>.item,ion-list.manual-list-fullwidth div.list>.item{border-radius:0;border-left:0;border-right:0}.show-list-numbers-and-dots ul{list-style-type:disc;padding-left:40px}.show-list-numbers-and-dots ol{list-style-type:decimal;padding-left:40px} </style> </head> <body ng-app="app" animation="slide-left-right-ios7" > <div> <div> <ion-nav-bar class="bar-stable"> <ion-nav-back-button></ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view> </div> </div> <script id="home.html" type="text/ng-template"> <ion-view title="Home" id="page1"> <ion-content padding="true" class="has-header"> <ion-list> <ion-item ng-repeat="stooge in stooges" href="#">{{stooge.name}}</ion-item> </ion-list> </ion-content> </ion-view> </script> <script> /*create js object app, bind to html app, use ionic framework*/ var app=angular.module(app,[ionic]); /******************************/ /*define CONTROLLERS & CONFIGS*/ /******************************/ /*define app.controller methods*/ app.controller(homeCtrl,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 is ready or loaded. $timeout(function () { $ionicLoading.hide(); $scope.stooges = [{name: Moe}, {name: Larry}, {name: Curly}]; }, 2000); }); /*define app.config method*/ app.config(function($stateProvider,$urlRouterProvider){ $stateProvider.state(home,{url:/page1,templateUrl:home.html,controller:homeCtrl}); $urlRouterProvider.otherwise(/page1) }); /************************/ /*define SYSTEM SETTINGS*/ /************************/ app.config(function($ionicConfigProvider, $sceDelegateProvider){ $sceDelegateProvider.resourceUrlWhitelist([ self,*://www.youtube.com/**, *://player.vimeo.com/video/**]); }) app.run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); cordova.plugins.Keyboard.disableScroll(true); } if (window.StatusBar) { // org.apache.cordova.statusbar required StatusBar.styleDefault(); } }); }); /* This directive is used to disable the "drag to open" functionality of the Side-Menu when you are dragging a Slider component. */ app.directive(disableSideMenuDrag, [$ionicSideMenuDelegate, $rootScope, function($ionicSideMenuDelegate, $rootScope) { return { restrict: "A", controller: [$scope, $element, $attrs, function ($scope, $element, $attrs) { function stopDrag(){ $ionicSideMenuDelegate.canDragContent(false); } function allowDrag(){ $ionicSideMenuDelegate.canDragContent(true); } $rootScope.$on($ionicSlides.slideChangeEnd, allowDrag); $element.on(touchstart, stopDrag); $element.on(touchend, allowDrag); $element.on(mousedown, stopDrag); $element.on(mouseup, allowDrag); }] }; }]); /* This directive is used to open regular and dynamic href links inside of inappbrowser. */ app.directive(hrefInappbrowser, funct
Subscribe to:
Post Comments (Atom)
|
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.