Study Ionic – Select working project make money

Ionic – Select Ionic Select will create a simple menu with select options for the user to choose. This Select Menu will look differently on different platforms, since its styling is handled by the browser. Using Select First, we will create a label and add the item-input and the item-select classes. The second class will add additional styling to the select form and then we will add the input-label class inside that will be used to add a name to our select element. We will also add select with option inside. This is regular HTML5 select element. The following example is showing Ionic Select with three options. <label class = “item item-input item-select”> <div class = “input-label”> Select </div> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> The above code will produce the following screen − Styling Select The following example will show you how to apply styling to select. We are creating a list with nine differently styled select elements using Ionic colors. Since we are using list with items, item will be the prefix to the color classes. <div class = “list”> <label class = “item item-input item-select item-light”> <div class = “input-label”> Select </div> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> <label class = “item item-input item-select item-stable”> <div class = “input-label”> Select </div> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> <label class = “item item-input item-select item-positive”> <div class = “input-label”> Select </div> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> <label class = “item item-input item-select item-calm”> <div class = “input-label”> Select </div> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> <label class = “item item-input item-select item-balanced”> <div class = “input-label”> Select </div> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> <label class = “item item-input item-select item-energized”> <div class = “input-label”> Select </div> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> <label class = “item item-input item-select item-assertive”> <div class = “input-label”> Select </div> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> <label class = “item item-input item-select item-royal”> <div class = “input-label”> Select </div> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> <label class = “item item-input item-select item-dark”> <div class = “input-label”> Select </div> <select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select> </label> </div> The above code will produce the following screen − Learn online work project make money

Study Ionic – Footer working project make money

Ionic – Footer Ionic footer is placed at the bottom of the app screen. Working with footers is almost the same as working with headers. Adding Footer The main class for Ionic footers is bar (the same as header). When you want to add footer to your screens, you need to add bar-footer class to your element after the main bar class. Since we want to use our footer on every screen in the app, we will add it to the body of the index.html file. We will also add title for our footer. <div class = “bar bar-footer”> <h1 class = “title”>Footer</h1> </div> The above code will produce the following screen − Footer Colors If you want to style your footer, you just need to add the appropriate color class to it. When you style your elements, you need to add your main element class as a prefix to your color class. Since we are styling a footer bar, the prefix class will be a bar and the color class that we want to use in this example is assertive (red). <div class = “bar bar-footer bar-assertive”> <h1 class = “title”>Footer</h1> </div> The above code will produce the following screen − You can use any of the following nine classes to give a color of your choice to your app footer − Color Class Description Result bar-light To be used for white color   bar-stable To be used for light grey color   bar-positive To be used for blue color   bar-calm To be used for light blue color   bar-balanced To be used for green color   bar-energized To be used for yellow color   bar-assertive To be used for red color   bar-royal To be used for violet color   bar-dark To be used for black color   Footer Elements Footers can contain elements inside it. Most of the time you will need to add buttons with icons inside a footer. The first button added will always be in the left corner. The last one will be placed on the right. The buttons in between will be grouped next to the first one on the left side of your footer. In following example, you can also notice that we use the icon class to add icons on top of the buttons. <div class = “bar bar-footer bar-assertive”> <button class = “button icon ion-navicon”></button> <button class = “button icon ion-home”></button> <button class = “button icon ion-star”></button> <button class = “button icon ion-checkmark-round”></button> </div> The above code will produce the following screen − If you want to move your button to the right you can add pull-right class. <div class = “bar bar-footer bar-assertive”> <button class = “button icon ion-navicon pull-right”></button> </div> The above code will produce the following screen − Learn online work project make money

Study Ionic – JS Tabs working project make money

Ionic – Javascript Tabs Tabs are a useful pattern for any navigation type or selecting different pages inside your app. The same tabs will appear at the top of the screen for Android devices and at the bottom for IOS devices. Using Tabs Tabs can be added to the app by using ion-tabs as a container element and ion-tab as a content element. We will add it to the index.html, but you can add it to any HTML file inside your app. Just be sure not to add it inside the ion-content to avoid CSS issues that comes with it. index.html Code <ion-tabs class = “tabs-icon-only”> <ion-tab title = “Home” icon-on = “ion-ios-filing” icon-off = “ion-ios-filing-outline”></ion-tab> <ion-tab title = “About” icon-on = “ion-ios-home” icon-off = “ion-ios-home-outline”></ion-tab> <ion-tab title = “Settings” icon-on = “ion-ios-star” icon-off = “ion-ios-star-outline”></ion-tab> </ion-tabs> The output will look as shown in the following screenshot. There is API available for ion-tab elements. You can add it as attributes as showed in example above where we used title, icon-on and icon-off. The last two are used to differentiate selected tab from the rest of it. If you look at the image above, you can see that first tab is selected. You can check the rest of the attributes in the following table. Tab Attributes Attribute Type Details title string The title of the tab. href string The link used for tab navigation. icon string The icon of the tab. icon-on string The icon of the tab when selected. icon-off string The icon of the tab when not selected. badge expression The badge for the tab. badge-style expression The badge style for the tab. on-select expression Called when tab is selected on-deselect expression Called when tab is deselected hidden expression Used to hide the tab. disabled expression Used to disable the tab. Tabs also have its own delegate service for easier control of all the tabs inside the app. It can be injected in the controller and has several methods, which are shown in the following table. Delegate Methods Method Parameters Type Details selectedIndex() / number Returns the index of the selected tab. $getByHandle(parameter1) handle string Used to connect methods to the particular tab view with the same handle. Handle can be added to ion-tabs by using delegate-handle = “my-handle” attribute. $ionicTabsDelegate.$getByHandle(”my-handle”).selectedIndex(); Learn online work project make money

Study Ionic – Grid working project make money

Ionic – Grid Working with the Ionic Grid System is straightforward. There are two main classes – row for working with rows and col for columns. You can choose as many columns or rows you want. All of them will adjust its size to accommodate the available space, although you can change this behavior to suit your needs. NOTE − All examples in this tutorial will have borders applied to our grid to be able to display it in a way that is easy to understand. Simple Grid The following example shows how to use the col and the row classes. We will create two rows. The first row will have five columns and the second one will have only three. Notice how the width of the columns is different in the first and second row. <div class = “row”> <div class = “col”>col 1</div> <div class = “col”>col 2</div> <div class = “col”>col 3</div> <div class = “col”>col 4</div> <div class = “col”>col 5</div> </div> <div class = “row”> <div class = “col”>col 1</div> <div class = “col”>col 2</div> <div class = “col”>col 3</div> </div> The above code will produce the following screen − Column Sizes Sometimes you do not want to leave the column sizes automatically assigned. If this is the case, you can choose the col prefix followed by a number that will represent a percentage of the row width. This will apply only to the column with a specific size applied. The other columns will adjust to the available space that is left. In the following example, the first column will use 50 percent of the full width and the others will adjust accordingly. <div class = “row”> <div class = “col col-50”>col 1</div> <div class = “col”>col 2</div> <div class = “col”>col 3</div> <div class = “col”>col 4</div> <div class = “col”>col 5</div> </div> <div class = “row”> <div class = “col col-50”>col 1</div> <div class = “col”>col 2</div> <div class = “col”>col 3</div> </div> The above code will produce following screen − The following table shows the available percentage options that Ionic grid system provides − Column Percentage Classnames Class Name Percentage Used col-10 10% col-20 20% col-25 25% col-33 33.3333% col-50 50% col-67 66.6666% col-75 75% col-80 80% col-90 90% Horizontal and Vertical Positioning The columns can be offset from the left. It works the same for the specific size of the columns. This time the prefix will be col-offset and then we will use the same percentage numbers showed in the table above. The following example shows how can we offset the second column of both the rows by 25 percent. <div class = “row”> <div class = “col”>col 1</div> <div class = “col col-offset-25”>col 2</div> <div class = “col”>col 3</div> <div class = “col”>col 4</div> <div class = “col”>col 5</div> </div> <div class = “row”> <div class = “col”>col 1</div> <div class = “col col-offset-25”>col 2</div> <div class = “col”>col 3</div> </div> The above code will produce the following screen − You can also vertically align the columns inside a row. There are three classes, which can be used, namely – top, center and the bottom class with the col prefix. The following code shows how to place vertically the first three columns of both rows. NOTE − In the example that follows we added “.col {height: 120px}” to our CSS to show you the vertical placing of the columns. <div class = “row”> <div class = “col col-top”>col 1</div> <div class = “col col-center”>col 2</div> <div class = “col col-bottom”>col 3</div> <div class = “col”>col 4</div> <div class = “col”>col 5</div> </div> <div class = “row”> <div class = “col col-top”>col 1</div> <div class = “col col-center”>col 2</div> <div class = “col col-bottom”>col 3</div> </div> The above code will produce the following screen − Responsive Grid The Ionic Grid can also be used for a responsive layout. There are three classes available. The responsive-sm class will collapse columns into a single row when the viewport is smaller than a landscape phone. The responsive-md class will be applied when viewport is smaller than a portrait tablet. The responsive-lg class will be applied when viewport is smaller than a landscape tablet. The first image after the following example shows how the responsive-sm class looks on a Mobile device and the second one shows how the same responsive grid looks differently on a Tablet device. <div class = “row responsive-sm”> <div class = “col col-25”>col 1</div> <div class = “col”>col 2</div> <div class = “col”>col 3</div> <div class = “col”>col 4</div> <div class = “col”>col 5</div> </div> <div class = “row responsive-sm”> <div class = “col”>col 1</div> <div class = “col”>col 2</div> <div class = “col”>col 3</div> </div> Mobile Grid View Tablet Grid View Learn online work project make money

Study Ionic – Colors working project make money

Ionic – Colors Before we start with actual elements available in the Ionic framework, let us have a little understanding on how Ionic makes use of colors for different elements. Ionic Color Classes Ionic framework gives us a set of nine predefined color classes. You can use these colors or you can override it with your own styling. The following table shows the default set of nine colors provided by Ionic. We will use these colors for styling different Ionic elements in this tutorial. For now, you can check all the colors as shown below − Class Description Result light To be used for white color   stable To be used for light grey color   positive To be used for blue color   calm To be used for light blue color   balanced To be used for green color   energized To be used for yellow color   assertive To be used for red color   royal To be used for violet color   dark To be used for black color   Ionic Color Usage Ionic makes use of different classes for each element. For example, a header element will have bar class and a button will have a button class. To simplify the usage, we use different colors by prefixing element class in a color name. For example, to create a blue color header, we will use a bar-calm as follows − <div class = “bar bar-header bar-calm”> … </div> Similarly, to create a grey color button, we will use button-stable class as follows. <div class = “button button-stable”> … </div> You can also use Ionic color class like any other CSS class. We will now style two paragraphs with a balanced (green) and an energized (yellow) color. <p class = “balanced”>Paragraph 1…</p> <p class = “energized”>Paragraph 2…</p> The above code will produce the following screen − We will discuss in detail in the subsequent chapters, when we create different elements using different classes. Customizing Colors with CSS When you want to change some of the Ionic default colors using CSS, you can do it by editing the lib/css/ionic.css file. In some cases, this approach is not very productive because every element (header, button, footer…) uses its own classes for styling. Therefore, if you want to change the color of the “light” class to orange, you would need to search through all the elements that use this class and change it. This is useful when you want to change the color of a single element, but not very practical for changing color of all elements because it would use too much time. Customizing colors using SASS SASS (which is the short form of – Syntactically Awesome Style Sheet) provides an easier way to change the color for all the elements at once. If you want to use SASS, open your project in the command window and type − C:UsersUsernameDesktoptutorialApp> ionic setup sass This will set up SASS for your project. Now you can the change default colors by opening the scss/ionic.app.scss file and then typing in the following code before this line – @import “www/lib/ionic/scss/ionic”; We will change the balanced color to dark blue and the energized color to orange. The two paragraphs that we used above are now dark blue and orange. $balanced: #000066 !default; $energized: #FFA500 !default; Now, if you use the following example − <p class = “balanced”>Paragraph 1…</p> <p class = “energized”>Paragraph 2…</p> The above code will produce the following screen − All the Ionic elements that are using these classes will change to dark blue and orange. Take into consideration that you do not need to use Ionic default color classes. You can always style elements the way you want. Important Note The www/css/style.css file will be removed from the header of the index.html after you install SASS. You will need to link it manually if you still want to use it. Open index.html and then add the following code inside the header. <link href = “css/style.css” rel = “stylesheet”> Learn online work project make money

Study Ionic – Home working project make money

Ionic Tutorial Job Search Ionic is open source framework used for developing mobile applications. It provides tools and services for building Mobile UI with native look and feel. Ionic framework needs native wrapper to be able to run on mobile devices. This is an introductory tutorial, which covers the basics of the Ionic Open Source Framework and explains how to deal with its various components and sub-components. Audience This tutorial is created for JavaScript developers that are new to mobile development. It provides simple, easy to understand explanations with useful working examples. We will go through most of the Ionic Framework so you can also use this as a reference for your projects. This tutorial is intended to make you comfortable in getting started with the Ionic Open Source Framework and its various functions. Prerequisites Since Ionic is built on top of AngularJS and Apache Cordova, you will need to have basic knowledge about these technologies. You also need to be familiar with HTML, CSS and JavaScript, if you want to understand all the information provided. Learn online work project make money

Study Ionic – Overview working project make money

Ionic – Overview Ionic is a front-end HTML framework built on top of AngularJS and Cordova. As per their official document, the definition of this Ionic Open Source Framework is as follows − Ionic is an HTML5 Mobile App Development Framework targeted at building hybrid mobile apps. Think of Ionic as the front-end UI framework that handles all the look and feel and UI interactions your app needs to be compelling. Kind of like “Bootstrap for Native”, but with the support for a broad range of common native mobile components, slick animations and a beautiful design. Ionic Framework Features Following are the most important features of Ionic − AngularJS − Ionic is using AngularJS MVC architecture for building rich single page applications optimized for mobile devices. CSS components − With the native look and feel, these components offer almost all elements that a mobile application needs. The components’ default styling can be easily overridden to accommodate your own designs. JavaScript components − These components are extending CSS components with JavaScript functionalities to cover all mobile elements that cannot be done only with HTML and CSS. Cordova Plugins − Apache Cordova plugins offer API needed for using native device functions with JavaScript code. Ionic CLI − This is NodeJS utility powered with commands for starting, building, running and emulating Ionic applications. Ionic View − Very useful platform for uploading, sharing and testing your application on native devices. Licence − Ionic is released under MIT license. Ionic Framework Advantages Following are some of the most commonly known Ionic Framework Advantages − Ionic is used for Hybrid App Development. This means that you can package your applications for IOS, Android, Windows Phone and Firefox OS, which can save you a lot of working time. Starting your app is very easy since Ionic provides useful pre-generated app setup with simple layouts. The apps are built in a very clean and modular way, so it is very maintainable and easy to update. Ionic Developers Team have a very good relationship with the Google Developers Team and they are working together to improve the framework. The updates are coming out regularly and Ionic support group is always willing to help when needed. Ionic Framework Limitations Following are some of the most important Ionic Framework Limitations − Testing can be tricky since the browser does not always give you the right information about the phone environment. There are so many different devices as well as platforms and you usually need to cover most of them. It can be hard to combine different native functionalities. There will be many instances where you would run into plugin compatibility issues, which leads to build errors that are hard to debug. Hybrid apps tend to be slower than the native ones. However, since the mobile technologies are improving fast this will not be an issue in the future. In the next chapter, we will understand the environment setup of the Ionic Open Source Framework. Learn online work project make money

Study Ionic – Environment Setup working project make money

Ionic – Environment Setup This chapter will show you how to start with Ionic Framework. The following table contains the list of components needed to start with Ionic. Sr.No. Software & Description 1 NodeJS This is the base platform needed to create Mobile Apps using Ionic. You can find detail on the NodeJS installation in our . Make sure you also install npm while installing NodeJS. 2 Android SDK If you are going to work on a Windows platform and are developing your apps for the Android platform, then you should have Android SDK setup on your machine. The following link has detailed information on the . 3 XCode If you are going to work on the Mac platform and are developing your apps for the iOS platform, then you should have XCode setup on your machine. The following link has detailed information on the . 4 cordova and Ionic These are the main SDKs which is needed to start working with Ionic. This chapter explains how to setup Ionic in simple step assuming you already have the required setup as explained in the table above. Installing Cordova and Ionic We will use the Windows command prompt for this tutorial. The same steps can be applied to the OSX terminal. Open your command window to install Cordova and Ionic − C:UsersUsername> npm install -g cordova ionic Creating Apps While creating apps in Ionic, you can choose from the following three options to start with − Tabs App Blank App Side menu app In your command window, open the folder where you want to create the app and try one of the options mentioned below. Tabs App If you want to use the Ionic tabs template, the app will be built with the tab menu, header and a couple of useful screens and functionalities. This is the default Ionic template. Open your command window and choose where you want to create your app. C:UsersUsername> cd Desktop This command will change the working directory. The app will be created on the Desktop. C:UsersUsernameDesktop> ionic start myApp tabs Ionic Start command will create a folder named myApp and setup Ionic files and folders. C:UsersUsernameDesktop> cd myApp Now, we want to access the myApp folder that we just created. This is our root folder. Let us now add the Cordova project for the Android Platform and install the basic Cordova plugins as well. The following code allows us to run the app on the Android emulator or a device. C:UsersUsernameDesktopmyApp> ionic platform add android The next step is to build the app. If you have building errors after running the following command, you probably did not install the Android SDK and its dependencies. C:UsersUsernameDesktopmyApp> ionic build android The last step of the installation process is to run your app, which will start the mobile device, if connected, or the default emulator, if there is no device connected. Android Default Emulator is slow, so I suggest you to install or some other popular Android Emulator. C:UsersUsernameDesktopmyApp> ionic run android This will produce below result, which is an Ionic Tabs App. Blank App If you want to start from the scratch, you can install the Ionic blank template. We will use the same steps that have been explained above with the addition of ionic start myApp blank instead of ionic start myApp tabs as follows. C:UsersUsernameDesktop> ionic start myApp blank The Ionic Start command will create a folder named myApp and setup the Ionic files and folders. C:UsersUsernameDesktop> cd myApp Let us add the Cordova project for the Android Platform and install the basic Cordova plugins as explained above. C:UsersUsernameDesktopmyApp>ionic platform add android The next step is to build our app − C:UsersUsernameDesktopmyApp> ionic build android Finally, we will start the App as with the following code − C:UsersUsernameDesktopmyApp> ionic run android This will produce the following result, which is a Ionic Blank App. Side Menu App The third template that you can use is the Side Menu Template. The steps are the same as the previous two templates; we will just add sidemenu when starting our app as shown in the code below. C:UsersUsernameDesktop> ionic start myApp sidemenu The Ionic Start command will create a folder named myApp and setup the Ionic files and folders. C:UsersUsernameDesktop> cd myApp Let us add the Cordova project for the Android Platform and install the basic Cordova plugins with the code given below. C:UsersUsernameDesktopmyApp> ionic platform add android The next step is to build our app with the following code. C:UsersUsernameDesktopmyApp> ionic build android Finally, we will start the App with the code given below. C:UsersUsernameDesktopmyApp> ionic run android This will produce the following result, which is an Ionic Side Menu App. Test App in Browser Since we are working with the JavaScript, you can serve your app on any web browser. This will speed up your building process, but you should always test your app on native emulators and devices. Type the following code to serve your app on the web browser. C:UsersUsernameDesktopmyApp> ionic serve The above command will open your app in the web browser. Google Chrome provides the device mode functionality for mobile development testing. Press F12 to access the developer console. The top left corner of the console window click has the “Toggle Device Mode” icon. The next step will be to click “Dock to Right” icon in the top right corner. Once the page is refreshed, you should be ready for testing on the web browser. Project Folder Structure Ionic creates the following directory structure for all type of apps. This is important for any Ionic developer to understand the purpose of every directory and the files mentioned below − Let us have a quick understanding of all the folders and files available in the project folder structure shown in the image above. Hooks − Hooks are scripts that can be triggered during the build process. They are usually used for the Cordova commands customization and for building automated processes. We will not

Study Ionic – JS Loading working project make money

Ionic – Javascript Loading Ionic loading will disable any interaction with users when showed and enable it again when it is needed. Using Loading Loading is triggered inside the controller. First, we need to inject $ionicLoading in our controller as dependency. After that, we need to call the $ionicLoading.show() method and loading will appear. For disabling it, there is a $ionicLoading.hide() method. Controller .controller(”myCtrl”, function($scope, $ionicLoading) { $scope.showLoading = function() { $ionicLoading.show({ template: ”Loading…” }); }; $scope.hideLoading = function(){ $ionicLoading.hide(); }; }); HTML Code <button class = “button button-block” ng-click = “showLoading()”></button> When a user taps the button, the loading will appear. You will usually want to hide the loading after some time consuming functionalities are finished. Some other option parameters can be used when working with loading. The explanation is shown in the table below. Loading option parameters Options Type Details templateUrl string Used to load HTML template as loading indicator. scope object Used to pass custom scope to loading. Default is the $rootScope. noBackdrop Boolean Used to hide the backdrop. hideOnStateChange Boolean Used to hide the loading when state is changed. delay number Used to delay showing the indicator in milliseconds. duration number Used to hide the indicator after some time in milliseconds. Can be used instead of hide() method. Loading Config Ionic config is used to configure options you want to be used in all of the $ionicLoading services throughout the app. This can be done by using $ionicLoadingConfig. Since constants should be added to the main app module, open your app.js file and add your constant after module declaration. .constant(”$ionicLoadingConfig”, { template: ”Default Loading Template…” }) The above code will produce the following screen − Learn online work project make money

Study Ionic – JS Slide Box working project make money

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