Category: ionic

Ionic – JavaScript Slide Box A Slide box contains pages that can be changed by swiping the content screen. Using Slide Box The usage of the slide box is simple. You just need to add ion-slide-box as a container and ion-slide with box class inside that container. We will add height and border to our boxes for better visibility. HTML Code <ion-slide-box> <ion-slide> <div class = “box box1”> <h1>Box 1</h1> </div> </ion-slide> <ion-slide> <div class = “box box2”> <h1>Box 2</h1> </div> </ion-slide> <ion-slide> <div class = “box box3″> <h1>Box 3</h1> </div> </ion-slide> </ion-slide-box> .box1, box2, box3 { height: 300px; border: 2px solid blue; } The Output will look as shown in the following screenshot − We can change the box by dragging the content to the right. We can also drag to the left to show the previous box. A few attributes that can be used for controlling slide box behavior are mentioned in the following table. Delegate Methods Attribute Type Details does-continue Boolean Should slide box loop when first or last box is reached. auto-play Boolean Should slide box automatically slide. slide-interval number Time value between auto slide changes in milliseconds. Default value is 4000. show-pager Boolean Should pager be visible. pager-click expression Called when a pager is tapped (if pager is visible). $index is used to match with different slides. on-slide-changed expression Called when slide is changed. $index is used to match with different slides. active-slide expression Used as a model to bind the current slide index to. delegate-handle string Used for slide box identification with $ionicSlideBoxDelegate. Slide Box Delegate The $ionicSlideBoxDelegate is a service used for controlling all slide boxes. We need to inject it to the controller. Controller Code .controller(”MyCtrl”, function($scope, $ionicSlideBoxDelegate) { $scope.nextSlide = function() { $ionicSlideBoxDelegate.next(); } }) HTML Code <button class = “button button-icon icon ion-navicon” ng-click = “nextSlide()”></button> The following table shows $ionicSlideBoxDelegate methods. Delegate Methods Method Parameters Type Details slide(parameter1, parameter2) to, speed number, number Parameter to represents the index to slide to. speed determines how fast is the change in milliseconds. enableSlide(parameter1) shouldEnable boolean Used for enambling or disabling sliding. previous(parameter1) speed number The value in miliseconds the change should take. stop() / / Used to stop the sliding. start() / / Used to start the sliding. currentIndex() / number Returns index of the curent slide. slidesCount() / number Returns total number of the slides. $getByHandle(parameter1) handle string Used to connect methods to the particular slide box with the same handle. $ionicSlideBoxDelegate. $getByHandle(”my-handle”).start(); Learn online work project make money

Ionic – Cordova Integration Cordova offers ngCordova, which is set of wrappers specifically designed to work with AngularJS. Installing ngCordova When you the start Ionic app, you will notice that it is using bower. It can be used for managing ngCordova plugins. If you have bower installed skip this step, if you do not have it, then you can install it in the command prompt window. C:UsersUsernameDesktopMyApp> npm install -g bower Now we need to install ngCordova. Open your app in the command prompt window. The following example is used for the app that is located on the desktop and is named MyApp. C:UsersUsernameDesktopMyApp> bower install ngCordova Next, we need to include ngCordova to our app. Open index.html file and add the following scripts. It is important to add these scripts before cordova.js and after ionic scripts. <script src = “lib/ngCordova/dist/ng-cordova.js”></script> Now, we need to inject ngCordova as angular dependency. Open your app.js file and add the ngCordova to angular module. If you have used one of the Ionic template apps, you will notice that there is injected ionic, controllers and services. In that case, you will just add ngCordova at the end of the array. angular.module(”myApp”, [”ngCordova”]) You can always check the plugins that are already installed by typing the following command. C:UsersUsernameDesktopMyApp> cordova plugins ls Now, we can use the Cordova plugins. You can check all the other plugins . Learn online work project make money

Ionic – Javascript Forms In this chapter, we will understand what JavaScript forms are and will learn what a JavaScript checkbox, radio buttons and toggle are. Using ion-checkbox Let us see how to use the Ionic JavaScript checkbox. Firstly, we need to create an ion-checkbox element in the HTML file. Inside this, we will assign an ng-model attribute that will be connected to the angular $scope. You will notice that we are using a dot when defining the value of a model even though it would work without it. This will allow us to keep the link between the child and the parent scopes at all times. This is very important as it helps to avoid some issues that could happen in the future. After we create the element, we will bind its value using angular expressions. <ion-checkbox ng-model = “checkboxModel.value1”>Checkbox 1</ion-checkbox> <ion-checkbox ng-model = “checkboxModel.value2”>Checkbox 2</ion-checkbox> <p>Checkbox 1 value is: <b>{{checkboxModel.value1}}</b></p> <p>Checkbox 2 value is: <b>{{checkboxModel.value2}}</b></p> Next, we need to assign values to our model inside the controller. The values we will use are false, since we want to start with unchecked checkboxes. $scope.checkboxModel = { value1 : false, value2 : false }; The above code will produce the following screen − Now, when we tap the checkbox elements, it will automatically change their model value to “true” as shown in the following screenshot. Using ion-radio To start with, we should create three ion-radio elements in our HTML and assign the ng-model and the ng-value to it. After that, we will display the chosen value with angular expression. We will start by unchecking all the three radioelements, so the value will not be assigned to our screen. <ion-radio ng-model = “radioModel.value” ng-value = “1”>Radio 1</ion-radio> <ion-radio ng-model = “radioModel.value” ng-value = “2”>Radio 2</ion-radio> <ion-radio ng-model = “radioModel.value” ng-value = “3”>Radio 3</ion-radio> <p>Radio value is: <b>{{radioModel.value}}</b></p> The above code will produce the following screen − When we tap on the second checkbox element, the value will change accordingly. Using ion-toggle You will notice that toggle is similar to checkbox. We will follow the same steps as we did with our checkbox. In the HTML file, first we will create ion-toggle elements, then assign the ng-model value and then bind expression values of to our view. <ion-toggle ng-model = “toggleModel.value1”>Toggle 1</ion-toggle> <ion-toggle ng-model = “toggleModel.value2”>Toggle 2</ion-toggle> <ion-toggle ng-model = “toggleModel.value3”>Toggle 3</ion-toggle> <p>Toggle value 1 is: <b>{{toggleModel.value1}}</b></p> <p>Toggle value 2 is: <b>{{toggleModel.value2}}</b></p> <p>Toggle value 3 is: <b>{{toggleModel.value3}}</b></p> Next, we will assign values to $scope.toggleModel in our controller. Since, toggle uses Boolean values, we will assign true to the first element and false to the other two. $scope.toggleModel = { value1 : true, value2 : false, value3 : false }; The above code will produce the following screen − Now we will tap on second and third toggle to show you how the values change from false to true. Learn online work project make money

Ionic – Javascript Modal When Ionic modal is activated, the content pane will appear on top of the regular content. Modal is basically larger popup with more functionalities. Modal will cover entire screen by default but it can be optimized the way you want. Using Modal There are a two ways of implementing modal in Ionic. One way is to add separate template and the other is to add it on top of the regular HTML file, inside the script tags. The first thing we need to do is to connect our modal to our controller using angular dependency injection. Then we need to create a modal. We will pass in scope and add animation to our modal. After that, we will create functions for opening, closing, destroying modal. The last two functions are placed where we can write the code that will be triggered if a modal is hidden or removed. If you do not want to trigger any functionality, when the modal is removed or hidden, you can delete the last two functions. Controller Code .controller(”MyController”, function($scope, $ionicModal) { $ionicModal.fromTemplateUrl(”my-modal.html”, { scope: $scope, animation: ”slide-in-up” }).then(function(modal) { $scope.modal = modal; }); $scope.openModal = function() { $scope.modal.show(); }; $scope.closeModal = function() { $scope.modal.hide(); }; //Cleanup the modal when we”re done with it! $scope.$on(”$destroy”, function() { $scope.modal.remove(); }); // Execute action on hide modal $scope.$on(”modal.hidden”, function() { // Execute action }); // Execute action on remove modal $scope.$on(”modal.removed”, function() { // Execute action }); }); HTML Code <script id = “my-modal.html” type = “text/ng-template”> <ion-modal-view> <ion-header-bar> <h1 class = “title”>Modal Title</h1> </ion-header-bar> <ion-content> <button class = “button icon icon-left ion-ios-close-outline” ng-click = “closeModal()”>Close Modal</button> </ion-content> </ion-modal-view> </script> The way we showed in the last example is when the script tag is used as a container to our modal inside some existing HTML file. The second way is to create a new template file inside the templates folder. We will use the same code as in our last example, but we will remove the script tags and we also need to change fromTemplateUrl in controller to connect modal with new created template. Controller Code .controller(”MyController”, function($scope, $ionicModal) { $ionicModal.fromTemplateUrl(”templates/modal-template.html”, { scope: $scope, animation: ”slide-in-up”, }).then(function(modal) { $scope.modal = modal; }); $scope.openModal = function() { $scope.modal.show(); }; $scope.closeModal = function() { $scope.modal.hide(); }; //Cleanup the modal when we”re done with it! $scope.$on(”$destroy”, function() { $scope.modal.remove(); }); // Execute action on hide modal $scope.$on(”modal.hidden”, function() { // Execute action }); // Execute action on remove modal $scope.$on(”modal.removed”, function() { // Execute action }); }); HTML Code <ion-modal-view> <ion-header-bar> <h1 class = “title”>Modal Title</h1> </ion-header-bar> <ion-content> <button class = “button icon icon-left ion-ios-close-outline” ng-click = “closeModal()”>Close Modal</button> </ion-content> </ion-modal-view> The third way of using Ionic modal is by inserting HTML inline. We will use the fromTemplate function instead of the fromTemplateUrl. Controller Code .controller(”MyController”, function($scope, $ionicModal) { $scope.modal = $ionicModal.fromTemplate( ”<ion-modal-view>” + ” <ion-header-bar>” + ”<h1 class = “title”>Modal Title</h1>” + ”</ion-header-bar>” + ”<ion-content>”+ ”<button class = “button icon icon-left ion-ios-close-outline” ng-click = “closeModal()”>Close Modal</button>” + ”</ion-content>” + ”</ion-modal-view>”, { scope: $scope, animation: ”slide-in-up” }) $scope.openModal = function() { $scope.modal.show(); }; $scope.closeModal = function() { $scope.modal.hide(); }; //Cleanup the modal when we”re done with it! $scope.$on(”$destroy”, function() { $scope.modal.remove(); }); // Execute action on hide modal $scope.$on(”modal.hidden”, function() { // Execute action }); // Execute action on remove modal $scope.$on(”modal.removed”, function() { // Execute action }); }); All three examples will have the same effect. We will create a button to trigger the $ionicModal.show() to open modal. HTML Code <button class = “button” ng-click = “openModal()”></button> When we open modal, it will contain a button that will be used for closing it. We created this button in a HTML template. There are also other options for modal optimization. We already showed how to use scope and animation. The following table shows other options. Option Type Detail focusFirstInput boolean It will auto focus first input of the modal. backdropClickToClose boolean It will enable closing the modal when backdrop is tapped. Default value is true. hardwareBackButtonClose boolean It will enable closing the modal when hardware back button is clicked. Default value is true. Learn online work project make money

Ionic – Javascript Keyboard Keyboard is one of the automated features in Ionic. This means that Ionic can recognize when there is a need to open the keyboard. Using Keyboard There are some functionalities, which the developers can adjust while working with the Ionic keyboard. When you want to hide some elements while the keyboard is open, you can use the hide-on-keyboard-open class. To show you how this works we created input and button that needs to be hidden when the keyboard is open. <label class = “item item-input”> <input type = “text” placeholder = “Input 1”> </label> <button class = “button button-block hide-on-keyboard-open”> button </button> The above code will produce the following screen − Now, when we tap on the input field, the keyboard will open automatically and the button will become hidden. A nice feature of Ionic is that it will adjust elements on screen, so the focused element is always visible when the keyboard is open. The following image below shows ten Input forms and the last one is blue. When we tap the blue form, Ionic will adjust our screen, so the blue form is always visible. Note − This will work only if the screen is within a directive that has a Scroll View. If you start with one of the Ionic templates, you will notice that all templates use ion-content directive as a container to other screen elements, so the Scroll View is always applied. Learn online work project make money

Ionic – Cordova Native Audio ”; Previous Next This plugin is used for adding native audio sounds to the Ionic app. Using Native Audio To be able to use this plugin, we first need to install it. Open the command prompt window and add the Cordova plugin. C:UsersUsernameDesktopMyApp>cordova plugin add cordova-plugin-nativeaudio Before we start using this plugin, we will need audio file. For simplicity, we will save our click.mp3 file inside the js folder, but you can place it wherever you want. The next step is to preload the audio file. There are two options available, which are − preloadSimple − It is used for simple sounds that will be played once. preloadComplex − It is for sounds that will be played as looping sounds or background audio. Add the following code to your controller to preload an audio file. We need to be sure that the Ionic platform is loaded before we can preload the audio file. Controller Code $ionicPlatform.ready(function() { $cordovaNativeAudio .preloadSimple(”click”, ”js/click.mp3”) .then(function (msg) { console.log(msg); }, function (error) { console.log(error); }); $cordovaNativeAudio.preloadComplex(”click”, ”js/click.mp3”, 1, 1) .then(function (msg) { console.log(msg); }, function (error) { console.error(error); }); }); In the same controller, we will add code for playing audio. Our $timeout function will stop and unload looping audio after five seconds. $scope.playAudio = function () { $cordovaNativeAudio.play(”click”); }; $scope.loopAudio = function () { $cordovaNativeAudio.loop(”click”); $timeout(function () { $cordovaNativeAudio.stop(”click”); $cordovaNativeAudio.unload(”click”); }, 5000); } The last thing we need is to create buttons for playing and looping audio. HTML Code <button class = “button” ng-click = “playAudio()”>PLAY</button> <button class = “button” ng-click = “loopAudio()”>LOOP</button> When we tap on play button, we will hear the sound once and when we tap on the loop button, the sound will loop for five seconds and then stop. This plugin works only on an emulator or a mobile device. Print Page Previous Next Advertisements ”;

Ionic – Cordova AdMob ”; Previous Next The Cordova AdMob plugin is used for integrating ads natively. We will use the admobpro plugin in this chapter, since the admob is deprecated. Using AdMob To be able to use ads in your app, you need to sign up to admob and create a banner. When you do this, you will get an Ad Publisher ID. Since these steps are not a part of the Ionic framework, we will not explain it here. You can follow the steps by Google support team here. You will also need to have android or iOS platform installed, since the cordova plugins work only on native platforms. We have already discussed how to do this in our environment setup chapter. The AdMob plugin can be installed in the command prompt window. C:UsersUsernameDesktopMyApp> cordova plugin add cordova-plugin-admobpro Now that we have installed the plugin, we need to check if the device is ready before we are able to use it. This is why we need to add the following code in the $ionicPlatform.ready function inside the app.js. if( ionic.Platform.isAndroid() ) { admobid = { // for Android banner: ”ca-app-pub-xxx/xxx” // Change this to your Ad Unit Id for banner… }; if(AdMob) AdMob.createBanner( { adId:admobid.banner, position:AdMob.AD_POSITION.BOTTOM_CENTER, autoShow:true } ); } The output will look as shown in the following screenshot. The same code can be applied for iOS or a Windows Phone. You will only use a different id for these platforms. Instead of a banner, you can use interstitial ads that will cover entire screen. AdMob Methods The following table shows methods that can be used with admob. Method Parameters Details createBanner(parameter1, parameter2, parameter3) adId/options, success, fail Used for creating the banner. removeBanner() / Used for removing the banner. showBanner(parameter1) position Used for showing the banner. showBannerAtXY(parameter1, parameter2) x, y Used for showing the banner at specified location. hideBanner(); / Used for hiding the banner. prepareInterstitial(parameter1, parameter2, parameter3) adId/options, success, fail Used for preparing interstitial. showInterstitial(); / Used for showing interstitial. setOptions(parameter1, parameter2, parameter3) options, success, fail Used for setting the default value for other methods. AdMob Events The following table shows the events that can be used with admob. Event Details onAdLoaded Called when the ad is loaded. onAdFailLoad Called when the ad is failed to load. onAdPresent Called when the ad will be showed on screen. onAdDismiss Called when the ad is dismissed. onAdLeaveApp Called when the user leaves the app by clicking the ad. You can handle these events by following the example below. document.addEventListener(”onAdLoaded”, function(e){ // Handle the event… }); Print Page Previous Next Advertisements ”;

Ionic – Javascript Action Sheet ”; Previous Next The Action Sheet is an Ionic service that will trigger a slide up pane on the bottom of the screen, which you can use for various purposes. Using Action Sheet In the following example, we will show you how to use the Ionic action sheet. First we will inject $ionicActionSheet service as a dependency to our controller, then we will create $scope.showActionSheet() function, and lastly we will create a button in our HTML template to call the function we created. Controller Code .controller(”myCtrl”, function($scope, $ionicActionSheet) { $scope.triggerActionSheet = function() { // Show the action sheet var showActionSheet = $ionicActionSheet.show({ buttons: [ { text: ”Edit 1” }, { text: ”Edit 2” } ], destructiveText: ”Delete”, titleText: ”Action Sheet”, cancelText: ”Cancel”, cancel: function() { // add cancel code… }, buttonClicked: function(index) { if(index === 0) { // add edit 1 code } if(index === 1) { // add edit 2 code } }, destructiveButtonClicked: function() { // add delete code.. } }); }; }) HTML Code <button class = “button”>Action Sheet Button</button> Code Explained When we tap the button, it will trigger the $ionicActionSheet.show function and the Action Sheet will appear. You can create your own functions that will be called when one of the options is taped. The cancel function will close the pane, but you can add some other behavior, which will be called when the cancel option is tapped before the pane is closed. The buttonClicked function is the place where you can write the code that will be called when one of the edit options is tapped. We can keep track of multiple buttons by using the index parameter. The destructiveButtonCLicked is a function that will be triggered when the delete option is tapped. This option is red by default. The $ionicActionSheet.show() method has some other useful parameters. You can check all of them in the following table. Show Method Options Properties Type Details buttons object Creates button object with a text field. titleText string The title of the action sheet. cancelText string The text for cancel button. destructiveText string The text for a destructive button. cancel function Called when cancel button, backdrop or hardware back button is pressed. buttonClicked function Called when one of the buttons is tapped. Index is used for keeping track of which button is tapped. Return true will close the action sheet. destructiveButtonClicked function Called when destructive button is clicked. Return true will close the action sheet. cancelOnStateChange boolean If true (default) it will cancel the action sheet when navigation state is changed. Print Page Previous Next Advertisements ”;

Ionic – Checkbox ”; Previous Next Ionic checkbox is almost the same as toggle. These two are styled differently but are used for the same purposes. Adding Checkbox When creating a checkbox form, you need to add the checkbox class name to both label and the input elements. The following example shows two simple checkboxes, one is checked and the other is not. <label class = “checkbox”> <input type = “checkbox”> </label> <label class = “checkbox”> <input type = “checkbox”> </label> The above code will produce the following screen − Multiple Checkboxes As we already showed, the list will be used for multiple elements. Now we will use the item-checkbox class for each list item. <ul class = “list”> <li class = “item item-checkbox”> Checkbox 1 <label class = “checkbox”> <input type = “checkbox” /> </label> </li> <li class = “item item-checkbox”> Checkbox 2 <label class = “checkbox”> <input type = “checkbox” /> </label> </li> <li class = “item item-checkbox”> Checkbox e <label class = “checkbox”> <input type = “checkbox” /> </label> </li> <li class = “item item-checkbox”> Checkbox 4 <label class = “checkbox”> <input type = “checkbox” /> </label> </li> </ul> The above code will produce the following screen − Styling Checkbox When you want to style a checkbox, you need to apply any Ionic color class with the checkbox prefix. Check the following example to see how it looks like. We will use the list of checkboxes for this example. <ul class = “list”> <li class = “item item-checkbox checkbox-light”> Checkbox 1 <label class = “checkbox”> <input type = “checkbox” /> </label> </li> <li class = “item item-checkbox checkbox-stable”> Checkbox 2 <label class = “checkbox”> <input type = “checkbox” /> </label> </li> <li class = “item item-checkbox checkbox-positive”> Checkbox 3 <label class = “checkbox”> <input type = “checkbox” /> </label> </li> <li class = “item item-checkbox checkbox-calm”> Checkbox 4 <label class = “checkbox”> <input type = “checkbox” /> </label> </li> <li class = “item item-checkbox checkbox-balanced”> Checkbox 5 <label class = “checkbox”> <input type = “checkbox” /> </label> </li> <li class = “item item-checkbox checkbox-energized”> Checkbox 6 <label class = “checkbox”> <input type = “checkbox” /> </label> </li> <li class = “item item-checkbox checkbox-assertive”> Checkbox 7 <label class = “checkbox”> <input type = “checkbox” /> </label> </li> <li class = “item item-checkbox checkbox-royal”> Checkbox 8 <label class = “checkbox”> <input type = “checkbox” /> </label> </li> <li class = “item item-checkbox checkbox-dark”> Checkbox 9 <label class = “checkbox”> <input type = “checkbox” /> </label> </li> </ul> The above code will produce the following screen − Print Page Previous Next Advertisements ”;

Ionic – Useful Resources ”; Previous Next The following resources contain additional information on Ionic. Please use them to get more in-depth knowledge on this topic. Useful Video Courses Ionic & Angular JS Course: Principles Of Mobile and Web Development 17 Lectures 2.5 hours Frahaan Hussain More Detail The Organic Chemistry Course 54 Lectures 4 hours Gilad James, PhD More Detail Ionic 5+ from Beginner to Advanced – Build Food Delivery App Featured 185 Lectures 46.5 hours Nikhil Agarwal More Detail Learn Ionic React by Building a WhatsApp clone 28 Lectures 5.5 hours Fikayo Adepoju More Detail Ionic & Angular JS: Principles Of Mobile and Web Development 16 Lectures 2.5 hours Frahaan Hussain More Detail ChatGPT AI Powered Reusable Programming Technique (CPT) Training 9 Lectures 2.5 hours Maqbool Commu Syed More Detail Print Page Previous Next Advertisements ”;