Unable to show Toast message using Ionicframework - angularjs

Question

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)

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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);
}
);