Category Archives: Ionic Questions
Ionic full screen background image
Ionic full screen background image : In ionic framework full screen background image can be added using css. Here in this tutorial we are going to explain how to add full screen background image in ionic framework with example and demo.
Ionic full screen background image
You can add the full background image in ionic framework simply adding the class .pane in ionic view and add the background image to this class as below-
If you run the above example it will produce the following output –
$http No Access-Control-Allow-Origin problem in Ionic Php
$http No Access-Control-Allow-Origin problem in Ionic Php : If you are working with ionic you may face the cross domain access problem. I wasted more than one our to fix this problem in ionic. Actually in my case this problem was from the REST api which was written in php. I fixed this problem as below-
$http No Access-Control-Allow-Origin problem in Ionic Php
Add the following code of line in .php ie. in Rest php file. I added the below lines in the stating of rest php file and it solved my problem.
:
|
|
The above solution solved my problem.
Ionic Clear Cache And History
Ionic Clear Cache And History: Cache improves system performance but it is also important to delete the cache time to time and create new cache to update the data. Here we are going to explain the syntax to clear the cache in ionic application.
Ionic Clear Cache And History
Here is syntax to delete cache in ionic application-
Ionic Clear Cache And History
$timeout(function() {
$ionicHistory.clearCache();
$ionicHistory.clearHistory();
});
|
Ionic get device current date time
Ionic get device current date time: You can use javascript to get device date time. While working with ionic framework we often need current date time of device simply use javascript date time function it will give the device date time.
Ionic get device current date time
Below is an example of getting current date time in ionic framework using javascript date time function-
Ionic get device current date time
$scope.currDate = new Date(); |
Get Mobile Number in Ionic Framework
Get Mobile Number in Ionic Framework : In ionic framework you can use the DeviceInformation plugin to get the information from device. Install the cordova plugin from – https://github.com/vliesaputra/DeviceInformationPlugin. Here we are going to explain the method to get information from device such as – Get phone number, SIM card serial number etc.
Get Mobile Number in Ionic Framework
Using the https://github.com/vliesaputra/DeviceInformationPlugin plugin you can get the following information –
- Your unique Device ID
- Phone Number (if it is stored in your SIM card)
- Country ISO of your phone network provider
- Network provider name
- SIM Card Serial number
- Country ISO of your SIM card
- Name of your SIM card mobile operator
- E-mail/Phone number used by apps listed in your Settings > Accounts & Sync list
Below is sample code to get device information to get the desired data from the result
Get Phone Number in Ionic Framework
var deviceInformation = cordova.require("cordova/plugin/DeviceInformation");
deviceInformation .get(function(result) {
console.log("result = " + result);
}, function() {
console.log("error");
});
|
The above example will give you the device information such as phone number.
Datepicker in ionic Framework
Datepicker in ionic Framework : Datepicker is common plugin which is used mostly in many applications. You can use Datepicker in ionic by adding cordova-plugin-datepicker available at – https://github.com/VitaliiBlagodir/cordova-plugin-datepicker. We are going to explain the steps to add datepicker in ionic framework.
Installing plugin for Datepicker in ionic Framework
Here are steps to install the datepicker cordova-plugin-datepicker –
First Install Datepicker from Ionic CLI
Install Datepicker from Ionic CLI
cordova plugin add cordova-plugin-datepicker |
Run the above command to install the plugin.
Create function to call datepicker –
Install Datepicker from Ionic CLI
$scope.MyDatePicker = function($event) {
var options = {
date: new Date(),
mode: 'date'
};
datePicker.show(options, function(date){
if(date != 'Invalid Date') {
console.log("Date came" + date);
} else {
console.log(date);
}
});
$event.stopPropagation();
};
|
Ionic state go back
Ionic state go back : If you looking to bind the go back functionality in ionic framework you can use state to go back on previous view . Here we are going to explain the functionality with an example-
Ionic state go back
Here is an example of go back to the state-
Ionic state go back example
var backView = $ionicViewService.getBackView(); backView && backView.go(); |
By using the above method you can go back to the state.
Get App Version in ionic framework
Get App Version in ionic framework : If you are working with ionic framework and looking for App version of current build you can use the following syntax explained below-
Get App Version in ionic framework
Here is example of getting App Version in ionic framework –
Get App Version in ionic framework Syntax
cordova.getAppVersion(function (version) {
alert(version);
});
|
Which will give you current app version.
Get the device UUID in Ionic Framework
Get the device UUID in Ionic Framework : Device UUID can be get using cordova plugin(org.apache.cordova.device) cordova plugin is used to communicate and retrieve the Device UUID. Just Install the cordova plugin org.apache.cordova.device and use the below code to get the device id. We have explained the example below-
Get the device UUID in Ionic Framework
Here is the simple example to get UUID in ionic framework-
Get the device UUID in Ionic Framework
module.controller('MyCtrl', function($scope, $cordovaDevice) {
var device_uuid = $cordovaDevice.getUUID();
});
|
Which Return the device UUID.
