Using Mobiscroll with Ionic 1
Installing Mobiscroll in your Ionic app takes a couple of minutes. Let's see how you can start with a simple app. This guide is strictly written for Ionic 1. If you are interested in usage with Ionic 2 and above, including Ionic 3 read it here.
Start a trial
First, start a free trial by entering your email address on the Mobiscroll homepage and create your account.
This is how the free trial works:
- You can try Mobiscroll for free.
-
The trial needs an active connection to Mobiscroll servers for validation. Don't worry, the licensed product will work offline with downloadable resource files.
Read about the differences between trial and licensed products. - You can upgrade to the licensed product at any time during or after your trial.
Enter your first name, set a password and you're ready to go!
Select ANGULARJS. Then hit the big blue button.
Including Mobiscroll in your Ionic app
Step 1: Create an app
Assuming you have node and ionic already installed (if not, you can read about it in the Ionic docs), use the CLI to create a new app.
If you already have an app at hand, you can skip this step.
$ ionic start myStarterApp tabs --type=ionic1
$ cd myStarterApp
Step 2: Copy Mobiscroll into your app
The next step is to unpack the downloaded mobiscroll package and copy the css
and js
folders to the www/lib/mobiscroll
folder of the myStarterApp
At the end you should have the mobiscroll js file under the myStarterApp/www/lib/mobiscroll/js/
folder.
The same is true for the css file: myStarterApp/www/lib/mobiscroll/css/
.
Step 3: Include the CSS and JS resources
Open the index.html
file and include the mobiscroll js and the css files in the header sections.
mobiscroll.angularjs.min.js
is included after the ionic.bundle.js
!<!-- mobiscroll css -->
<link href="lib/mobiscroll/css/mobiscroll.angularjs.min.css" rel="stylesheet" />
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- mobiscroll js -->
<script src="lib/mobiscroll/js/mobiscroll.angularjs.min.js"></script>
Step 4: Set up the module dependencies
You have to set up the dependencies to use the mobiscroll components. For example if you want to use the Date & time
and Select
components, then the dependencies will be the mobiscroll-datetime
and the mobiscroll-select
modules.
You should add these module dependencies in the controllers.js
file like:
angular.module('starter.controllers', ['mobiscroll-datetime', 'mobiscroll-select'])
At this point the app should be ready for the development!
Step 5: Let's see if Mobiscroll was installed correctly
To test it let's add a simple input to the tab-dash.html
:
<div class="list">
<label class="item item-input">
<input ng-model="bDay" mobiscroll-date="{ theme: 'ios'}" type="text" placeholder="Select Date">
</label>
</div>
To build the app just run the serve command in the CLI:
$ ionic serve
Other ways to get started
To see how mobiscroll is installed in an Ionic 1 project you can download the Starter for Ionic.