I am trying to code a cross-platform app using cordova and firebase while using the Phonegap-Cookies-Plugin to clear my cookies from my InAppBrowser but when I am using the given example :
window.cookies.clear(function() {
console.log('Cookies cleared!');
});
My console is saying : Cannot read property 'clear' of undefined.
I wanted to know if you had any ideas ?
Details : I already reinstalled the platforms and plugins to be sure it's well installed. As you will see in my extract, I am also using AngularJS, Ionic and Ui Router.
Ref : https://github.com/bez4pieci/Phonegap-Cookies-Plugin
https://github.com/apache/cordova-plugin-inappbrowser
Extract from my code :
angular.module('starter')
.controller('ProfileCtrl', function($rootScope,$scope,$state, UserSrv, $ionicViewSwitcher, $ionicModal)
{
$scope.deconnectFB = function(){
$rootScope.loggedInUser='false';
window.cookies.clear(function() {
console.log('Cookies cleared!');
});
$rootScope.ref.unauth();
$state.go("welcome");
};
Related
In my app, I want to use native datepicker and tried to use this plugin, but failed to make it work. I just recently started working with Onsen UI 2 and haven't experience with using the plugins, so I might be missing something.
I followed the steps of installing and usage of the plugin. My code so far.
index.html:
<ons-list-item ng-click="ctrl.showPicker();">
Set the time
</ons-list-item>
where 'ctrl' is my controller.
index.js
this.showPicker = function() {
var options = {
date: new Date(),
mode: 'date'
};
function onSuccess(date) {
alert('Selected date: ' + date);
}
function onError(error) { // Android only
alert('Error: ' + error);
}
var datePicker = new DatePicker();
datePicker.show(options, onSuccess, onError);
}
Unfortunetely, clicking the list item shows me this error:
ReferenceError: DatePicker is not defined
As I said, I don't have experience using the plugins in Onsen UI 2, so far I was using Cordova framework (javascript and jquery). Can anyone tell me, what can I do to make the plugin work? Thanks in advance.
Your angular code looks ok. The only problem is that you don't have a DatePicker variable.
Looking at docs of the plugin which you're using it seems that it doesn't export a DatePicker function.
In the docs they are using just datePicker.show, so maybe they are just exporting datePicker.
So basically all you need to do is remove the following line:
var datePicker = new DatePicker();
And you should be fine (if you installed your plugin correctly).
I am developing a mobile app using angular js, cordova , ionic and using intel xdk to build. Here my problem is whenever i click the back button in mobile device, app get closed itself instead of redirecting to previous page.Is that ionic problem?
Also tried addEventListener
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
alert();
$location.path('/sandhyavMor');
}
Here, still the app getting closed after firing the alert. Also i am using intel xdk media plugin.
so what may be the problem.
Try using this code.Use it in app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function ($ionicPlatform,$state,$log, $rootScope,$ionicHistory) {
$ionicPlatform.registerBackButtonAction(function (e) {
if ($ionicHistory.backView()) {
$ionicHistory.goBack();
} else {
$state.go($rootScope.previousState);
}
e.preventDefault();
return false;
}, 101);
});
Are you sure there is a previous view to go back to? Are there tabs in your app?
I am extremely new to the world of mobile development and I am working with ionic framework.
All I am trying to do is to display a toast message to the user by following this tutorial and so far I am just going crazy trying to implement it.
The error I get is as following
Cannot read property 'toast' of undefined
I have installed cordova
I have installed the Toast plugin
inside my index.html I have added the script of ng-cordova.min.js
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
Do i need to add the Toast.js file in index.html too? If yes then that does not help either and leads to another error.
This is my controller
.controller('UsersController', ['$scope', '$http', '$cordovaToast', function ($scope, $http, $cordovaToast) {
$scope.showToast = function() {
$cordovaToast
.show("Here's a message", 'short', 'center')
.then(function(success) {
console.log('Success');
}, function (error) {
console.log('Error');
});
};
}
]);
What am i missing here?
I will really appreciate any help.
UPDATE
After making changes, suggested by #Del, the following error appears
ionic.bundle.js:25642 Error: [$injector:unpr] Unknown provider: $cordovaToastProvider <- $cordovaToast <- UsersController
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24cordovaToastProvider%20%3C-%20%24cordovaToast%20%3C-%20UsersController
at ionic.bundle.js:13380
at ionic.bundle.js:17574
at Object.getService [as get] (ionic.bundle.js:17721)
at ionic.bundle.js:17579
at getService (ionic.bundle.js:17721)
at invoke (ionic.bundle.js:17753)
at Object.instantiate (ionic.bundle.js:17770)
at ionic.bundle.js:22326
at self.appendViewElement (ionic.bundle.js:56883)
at Object.switcher.render (ionic.bundle.js:54995)
If the plugin is correctly installed, I have used it without using $cordovaToast
.controller('UsersController', ['$scope', '$http', function ($scope, $http) {
$scope.showToast = function() {
window.plugins.toast
.show("Here's a message", 'short', 'center')
.then(function(success) {
console.log('Success');
}, function (error) {
console.log('Error');
});
};
}
]);
You dont have to add the ng-cordova or toast.js.
If you add the plugin (ionic plugin add ...), remove the platform, add again, and build, it should work
You are trying to run $cordovaToast on browser. It will not work because it is a native plugin. Please use it on a real device or emulator.
I am also new in ionic but I have little knowledge about android so then I found the way how to use android functions in ionic means I found the way to create own plugins from here.
so after following steps from the given link I have created an own plugin
you can see it ionic plug # github.
you need to follow simple 4 steps mentioned at git link.
hopefully, it will help you to sort out the same problem.
This error will not go away on the real device as well unless you inject the dependency for $cordovaToast. You may use or may remove $cordovaToast in the controller and it will not affect the working. It is good practice to keep dependencies. The crucial step which is missing in all the responses is to introduce DI for ngCordova in the module to which UsersControllers belongs.
The example highlighted by JSalaat has this controller
foodShop.controller('cartController', function($scope, cartFactory,
$cordovaToast)
and the foodshop module has injected ngCordova.
var foodShop = angular.module('foodShop',
['ionic','firebase','ngCordova'])
As the plug-in belong to ngCordova it does not need to be introduced separately in the controller. This explains why there is no error in that application.
in your case try the app instance creation could look like
var app = angular.module('app', ['ionic','ngCordova'])
if not you will continue to have the Unknown provider: $cordovaToastProvider error
For the record: For Ionic v2/v3
Install dependencies
Include it in ionic project
How to use it.
1. Install dependencies
Within CLI run below commands:
$ ionic cordova plugin add cordova-plugin-x-toast
$ npm install --save #ionic-native/toast
2. Include it in ionic project
1.Add below to app.module.ts
import { Toast } from '#ionic-native/toast';
....and to #NgModule section providers:[ HERE,]
2.Each page where you want to use Toast you need to add:
import { Toast } from '#ionic-native/toast';
....also add to constructor
constructor(private toast: Toast, ...){}
...now you can use it as below example:
this.toast.show('message', 'duration', 'position').subscribe();
...or sending message to console:
this.toast.show('message', 'duration', 'position').subscribe(
toast=>{
console.log(toast);
}
);
I'm newbie in testing of Cordova app, so could you please give an advice about what is "best practice" in my situation?
Situation: I have a module factory:
angular
.module('app.services')
.factory('UtilsService', UtilsService);
function UtilsService() {
var service = {
isWindows: isWindows,
isAndroid: isAndroid
};
return service;
function isWindows() {
return /windows/i.test(device.platform);
}
function isAndroid() {
return /android/i.test(device.platform);
}
}
and a simple test for isWindows method:
describe('Util Service Tests', function() {
var utilSvc;
beforeEach(function() {
module('app');
});
beforeEach(function () {
inject(function($injector) {
utilSvc = $injector.get('UtilsService');
});
});
it('should detect windows', function () {
expect(utilSvc.isWindows).toBe(true);
});
});
I run tests with Chitzpah runner and get an error:
'device' is undefined
I've found the possible solution like chrome-cordova extension, but it doesn't work in my case (or I'm doing something wrong with it). So what should I do here? Mock calls to device method? If yes, how to do that?
Thanks in advance!
Have you tried using the Cordova browser platform, that can be added with the CLI:
cordova platform add browser
This provides some support for using Cordova APIs / plugins in the browser, but the plugins you're using need to support that platform usually with a JavaScript fallback to whatever their native functionality would do on an actual mobile platform such as iOS or Android. There's a good blog post covering the browser platform here. I'm not clear on how well maintained this platform is but it might be what you're looking for.
I try to show a dialog error when the a web api fails. I am using bootbox for this purpose.
The code is:
OrderService.get(function(response) {
$scope.newOrder = response;
}, function(error) {
$bootbox.alert(error.statusText);
});
OrderService is a service:
app.factory('OrderService', [
'$resource', function($resource) {
return $resource('http://myweb/api/orders/neworder', {});
}]);
The first time that I open the web page, it works fine and the error message is displayed.
If I refresh the page, then the bootbox disable the entire screen and I cannot close the bootbox popup dialog.
If I replace $bootbox.alert(error.statusText); by alert(error.statusText);, then everything works fine.
If you are using some module to implement bootbox, 'cos $bootbox must injected
If not then, you can simple use without $:
OrderService.get(function(response) {
$scope.newOrder = response;
}, function(error) {
bootbox.alert(error.statusText);
});
from bootboxjs page:
Once you’ve got your dependencies sorted, usage is fairly
straightforward and much like any other JavaScript library you’ve ever
used. The library creates a single global instance of a bootbox object