With these tutorials we are going through basics of ionic programming. Last week we learnt from Ionic Action Sheet, Backdrop, Js Content, Ion-refresher, Ionic Events and Keyboard. This week are going to complete your basic Ionic Tutorials with Loading, Modal, Popup, Pop Over, Scroll and with Side-Menus. Let us begin with Ionic Loading which is the first appeared screen itself in the form of loader.
IONIC LOADING
This futuristic app technology also has separate Ionic Loading feature where one can easily apply the loader thereof. There is show and hide functionality which is to be programmed as per the requirements using JavaScript only. Our Ionic Loading example shows the correct syntax with demo as well try it editor so you can test you code entirely there. Loading service is to be imported in the controller for using this functionality effectively.
IONIC MODAL
Ionic modal is part of the area which is used with popup and can be programmed to work for multiple rich functionalities. There is default Ionic Modal present in this language which can be easily customized to meet your application demands. <ion-modal-view> is the default area where HTML portion of the modal content is placed. Once put inside all the values than found in the real time app working. Here is one basic ionic modal example where complete controller code for opening and closing code as well as HTML portion of this amazing modal functionality.
IONIC NAVIGATION
Navigation is one of the primary attractions of every modern app. Using AngularUI Router for navigation; Ionic distributes them into various states. With each state have their unique name and respective URL’s. Ion Nav View, Ion View and Ion Nav Bar collectively form the three basic components of the Ionic Navigation being represented as ion-nav-view, ion-view, ion-nav-bar respectively. Find one complete ionic navigation example with complete controller code and HTML code with it.
IONIC POPOVER
With ionic popover functionality one can easily give additional information on element hovers, click with content that user should know. All the elements are placed inside <ion-popover-view> tag for Ionic Popover. You can also add icons, give different colors to highlight the main agenda of the information as you please. Get a comprehensive ionic popover example with HTML & Controller part
IONIC POPUP
For working there are basic three options of Ionic Popup provided in default which are than customized as per your requirements. Ionic Alert Box, Ionic Confirm box, Ionic Show Popup. $ionicPopup service is used for creating all these popup within Ionic. Check-out our basic Ionic Popup Example with complete HTML and controller part easily.
IONIC SCROLL
This Ionic functionality is used to create a scrollable container which when applied creates simple scroll with content inside it. Everything is placed between these basic Ionic elements i.e. <ion-scroll> </ion-scroll>. A lot of API’s are there with multiple options to choose the right scroll, paging, zooming, direction for helping the user with respect to reading content more easily.
IONIC INFINITE SCROLL
Whenever user starts reading the content and scrolls down to the bottom of the page than with using Ionic Infinite Scroll you can keep the content on that screen only rather than on multiple pages. This helps in users engagement throughout the mobile app. We have created ionic infinite scroll example where you can check out the complete controller & HTML part.
IONIC SIDE MENUS
For adding specific menus on particular left or right side this Ionic side menus functionality is of great help. These menus give user to control to switch their view from part of the app to another with just click. Find one complete ionic side menu example with controller JS part and HTML part as well as multiple components.
This marks the finish line of your basic ionic tutorials. With more practice and time you will learn Ionic features are robust, easy to build with and make new interesting apps for future driven functionalities. Get FAQ’s, interview questions and a lot more only on Tutorialsplane.
Source:- STEP BY STEP IONIC TUTORIALS PART V
