So I am using this plugin: http://ngcordova.com/docs/plugins/pushNotificationsV5/ Which is cordovaPushV5 and I am trying to get my device token to send to my nodejs server. Here is my code:
angular.module('starter', ['ionic', 'ngCordova'])
.run(function($http, $cordovaPushV5) {
var options = {
android: {
senderID: "12345679"
},
ios: {
alert: "true",
badge: "true",
sound: "true"
},
windows: {}
};
// initialize
$cordovaPushV5.initialize(options).then(function() {
// start listening for new notifications
$cordovaPushV5.onNotification();
// start listening for errors
$cordovaPushV5.onError();
// register to get registrationId
$cordovaPushV5.register().then(function(data) {
// `data.registrationId` save it somewhere;
})
});
// triggered every time notification received
$rootScope.$on('$cordovaPushV5:notificationReceived', function(event, data){
// data.message,
// data.title,
// data.count,
// data.sound,
// data.image,
// data.additionalData
});
// triggered every time error occurs
$rootScope.$on('$cordovaPushV5:errorOcurred', function(event, e){
// e.message
});
});
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
</body>
</html>
When I run it in ionic serve (browser) i get this console error: ReferenceError: Can't find variable: PushNotification
Does anyone know what this means?
Comment above was 100% correct. That error only shows in the browser because this plugin only works on devices
Related
I want to use routing and AngularJS in Ionic V1.
when I compile my program it prints out this error message:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module ionic due to:
[$injector:modulerr] Failed to instantiate module ngSanitize due to:
[$injector:unpr] Unknown provider: $filterProvider
http://errors.angularjs.org/1.2.10/$injector/unpr?p0=%24filterProvider
minErr/<#http://localhost:8100/js/angular/angular.js:78:12
createInjector/providerCache.$injector<#http://localhost:8100/js/angular/angular.js:3544:19
getService#http://localhost:8100/js/angular/angular.js:3671:39
loadModules/<#http://localhost:8100/js/angular/angular.js:3625:45
forEach#http://localhost:8100/js/angular/angular.js:303:11
loadModules#http://localhost:8100/js/angular/angular.js:3614:12
loadModules/<#http://localhost:8100/js/angular/angular.js:3621:40
forEach#http://localhost:8100/js/angular/angular.js:303:11
loadModules#http://localhost:8100/js/angular/angular.js:3614:12
loadModules/<#http://localhost:8100/js/angular/angular.js:3621:40
as well as:
Uncaught TypeError: angular.module(...).info is not a function
The project can be found under: codesandbox.io/s/stupefied-pine-px3iq
my index.html:
<!DOCTYPE html >
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/angular/angular.js"></script>
<script src="js/angular/angular-mocks.js"></script>
<script src="js/angular/angular-route.js"></script>
<script src="js/angular/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/app_module.js"></script>
<script src="js/controller/SensorCtrl.js"></script>
<script src="js/controller/StartCtrl.js"></script>
<script src="js/service/state_route.js"></script>
<script src="js/service/draw.js"></script>
</head>
<body>
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<ion-nav-view></ion-nav-view>
</ion-content>
</ion-pane>
</body>
</html>
my app module:
var app = angular.module('app', ['ionic']);
my roting config:
app.config(function ($stateProvider) {
$stateProvider.state('index', {
url: '/',
templateUrl: 'template_startseite.html'
})
.state('sensoren',{
url:'/sensoren',
templateUrl: 'template_sensorwerte.html'
});
});
when I try the routing, then it only shows http://localhost:8100/ but not http://localhost:8100/index.html
so maybe this is why the routing doesn't work. But the error message shows that ionic isn't instantiated, do you have any ideas what I can do?
edit:
here is a picture of what the app shows on screen
edit2:
tmhao2005 pointed out that <script src="lib/ionic/js/ionic.bundle.js"></script> was missing, it now works perfectly.
For all who might encounter the same problem:
The problem seems to have been the 'ionic' in my app modue var app = angular.module('app', ['ionic']);
So I switched from the <ion-nav-view></ion-nav-view> to <div ng-view></div>
And from $stateProvider.state to $routeProvider.when
now it seems to work again, the routing function works too.
Would be nice to know why the 'ionic' didn't work though.
I have a JSON data array which is the response of the predict(...) call from Clarifai recognition and I am trying to display the array of data in my HTML. I use ng-repeat to display the array but it doesn't work. How can I display the array in the HTML? Below is my code snippet for the JS file and the HTML file.
var app = angular.module("starter",['ionic']);
app.controller("myCtrl", function($scope,$rootScope) {
const app = new Clarifai.App({ apiKey: 'e7f899ec90994aeeae109f6a8a1fafbe' });
$rootScope.records = [];
// predict the contents of an image by passing in a url
app.models.predict("pets",'https://samples.clarifai.com/puppy.jpeg').then(
function(response) {
// The JSON.stringify() method converts a JavaScript value to a
// JSON string optionally replacing values if a replacer function
// is specified, or optionally including only the specified
// properties if a replacer array is specified.
for(var i=0; i < 2; i++) {
$rootScope.records[i] = JSON.stringify(response.outputs[0].data.concepts[i].name);
console.log(`module concept = ${$rootScope.records[i]}`);
alert($rootScope.records[i]);
}
},
function(err) {
console.error(err);
}
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script type="text/javascript" src="https://sdk.clarifai.com/js/clarifai-latest.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter"ng-controller="myCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<h1 ng-repeat="x in records">{{x}}</h1>
</ion-content>
</ion-pane>
</body>
</html>
I suggest manually triggering a digest cycle because your predict call is asynchronous.
// add a reference to $timeout
app.controller("myCtrl", function($scope, $rootScope, $timeout) {
// ...
// predict the contents of an image by passing in a url
app.models.predict("pets",'https://samples.clarifai.com/puppy.jpeg').then(
function(response) {
for(var i=0; i < 2; i++) {
$rootScope.records[i] = JSON.stringify(response.outputs[0].data.concepts[i].name);
console.log(`module concept = ${$rootScope.records[i]}`);
// add the following $timeout call to manually trigger a digest cycle
$timeout(() => {}); /* OR */ $scope.$digest();
}
},
function(err) {
console.error(err);
}
);
});
I just started learning Ionic and recently I have added jquery and angular-ui-router through npm which worked perfectly fine and created in node_modules folder. But when i start my app and tries to include those files they are not included. In console the error is 404 not found. I have checked the path which is fine but its not working at all. May be its because the node_modules folder is outside the www folder. I am sharing an Image please tell me whats wrong.
.
This is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"></meta>
<title></title>
<link rel="manifest" href="manifest.json"></link>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script> -->
<link href="lib/ionic/css/ionic.css" rel="stylesheet"></link>
<link href="asset_files/css/style.css" rel="stylesheet"></link>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet"> -->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
</head>
<body ng-app="starter">
<div class="bar bar-header bar-positive">
<h1 class="title">Cleaners</h1>
</div>
<ion-content class="has-header" ui-view>
</ion-content>
<div class="bar bar-footer bar-balanced"></div>
<script>
document.write("<script type='text/javascript' src='require.js'><\/script>");
</script>
</body>
</html>
and this is my require.js.
document.write("\
<script type='text/javascript' src='../node_modules/jquery/dist/jquery.min.js'><\/script>\
<script type='text/javascript' src='../node_modules/angular-ui-router/release/angular-ui-router.min.js'><\/script>\
<script type='text/javascript' src='app.js'><\/script>\
<script type='text/javascript' src='asset_files/js/routes.js'><\/script>\
");
I am not being able to understand whats wrong. In console , network where the error is coming the path is this http://localhost:8100/node_modules/angular-ui-router/release/angular-ui-router.min.js
I have to develop an app that doas an qr code scan but my code doesn't work. I already installed ngcordova and the plugin and the plugin of camera just for sure. Following error keeps popping.
Error:
?ionicplatform=android:28 ReferenceError: cordova is not defined
at Object.scan (ng-cordova.min.js:7)
at controllers.js:10
at ionic.bundle.js:56230
at Object.ready (ionic.bundle.js:2140)
at Object.ready (ionic.bundle.js:56223)
at Scope.$scope.scan (controllers.js:9)
at fn (eval at compile (ionic.bundle.js:27638), <anonymous>:4:203)
at ionic.bundle.js:65427
at Scope.$eval (ionic.bundle.js:30395)
at Scope.$apply (ionic.bundle.js:30495)
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
controller:
angular.module('starter.controllers', ['ngCordova'])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
})
.controller('PlaylistsCtrl', function($scope, $ionicPlatform,
$cordovaBarcodeScanner) {
$scope.scan = function(){
$ionicPlatform.ready(function() {
$cordovaBarcodeScanner.scan().then(function(barcodeData) {
// Success! Barcode data is here
}, function(error) {
// An error occurred
});
});
};
})
Any help is appreciated!
I am building a demo app using ionic framework. At a point I decided to use this version of angularjs
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.min.js"></script>
Whenever I use the above version of angular I get this error Uncaught Error: [$injector:modulerr]
I have also loaded the angular module in my app.js file
angular.module('starter', ['ionic','ngSanitize','emojiApp'])
===============EDITTED
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!--<link href="lib/ionic/css/ionic.css" rel="stylesheet">-->
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- emoticon rendering -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.min.js"></script>-->
<!--<script src="lib/ionic/js/ionic.bundle.js"></script>-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/emoji.min.js"></script>
<link type="text/stylesheet" rel="stylesheet" href="css/emoji.min.css" />
<!-- end of emoticon rendering -->
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<p>Welcome</p>
<br><br><br><br>
<div ng-controller="emojiController">
<div emoji-form emoji-message="emojiMessage" style="margin-top:100px; margin-left:200px">
<textarea id="messageInput" ng-model="emojiMessage.messagetext"></textarea>
<button id="emojibtn">
<i class="icon icon-emoji"></i>
</button>
</div></div>
</ion-content>
</ion-pane>
</body>
</html>
=================complete app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic','ngSanitize','emojiApp'])
emojiApp.controller('emojiController', ['$scope', function($scope) {
$scope.emojiMessage={};
}])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
document.addEventListener('deviceready', function () {
var Pushbots = PushbotsPlugin.initialize("56c898fb17795903658b4567", {"android":{"sender_id":"786368090790"}});
}, false);
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
Where am I getting it wrong please?