I try to make a (hybrid)webapp with Phonegap(3.7.0) and AngularJS that uses geolocation. My problem is that geolocation works in a browser, but not when I build the project in Phonegap and try to run it on a mobile device. When I remove the AngularJS controller in my Javascript the geolocator works like a charm on mobile devices. I tried to bootstrap AngularJS manually (for the DOM loading order), but that did not worked for me. Also the config file is correct at least I think.
Can anyone help me on this or giving me clues?
Thanks in advance
HTML
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale = 1.0">
<!-- Phonegap Javascript -->
<script src="js/cordova/cordova.js" type="text/javascript"></script>
<!-- AngularJS Javascript -->
<script src="js/angular/angular.js" type="text/javascript"></script>
<script src="js/angular/angular-route.js" type="text/javascript"></script>
<!-- Foundation for apps Javascript -->
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="content-container" ng-app="mamyloeApp">
<div ng-controller="UitjesDichtbijController" class="list-view-uitje">
<ul ng-repeat="uitjes in uitjes.uitjes" class="list-item-uitje">
<li><a href='#'>
<div class="list-item-uitje-left">
<div class='uitje_list_image'>
<img src="../library/photos/{{uitjes.list_image}}" alt='image'>
</div>
</div>
<div class="list-item-uitje-right">
<div class="naam-uitje">{{uitjes.overview}}</div>
<div class="uitje-info">
<div class="plaats-uitje">{{uitjes.city}}({{uitjes.distance | number:1}}km)</div>
<div class="categorie-uitje">{{uitjes.category}}</div>
</div>
<div class="naam-local">{{uitjes.firstname}}</div>
</div>
</a></li>
</ul>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<!-- Controller scripts -->
<script src="js/load_list.js" type="text/javascript"></script>
</body>
Geolocator/AngularJS
var latitude = 0;
var longitude = 0;
var geo_initiate = false;
var App = angular.module('mamyloeApp', []);
App.controller('UitjesDichtbijController', function ($scope, $http) {
function geolocation()
{
var options = {enableHighAccuracy: true, timeout: 20000, maximumAge: 18000000};
watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
function onSuccess(position)
{
latitude = position.coords.latitude;
longitude = position.coords.longitude;
console.log("GPS is ready");
console.log(latitude);
console.log(longitude);
$http.get("http://../Mamyloe_app/api/uitjes/" + latitude + "&" + longitude + "")
.success(function (response) {
$scope.uitjes = response;
console.log(response);
});
geo_initiate = true;
if(geo_initiate === true){
document.getElementById("content-container").style.visibility = "visible";
}
}
function onError(error)
{
if (error.code = 1)
{
alert("Enable your GPS!");
}
console.log("GPS is NOT ready");
}
}
$(document).ready(function () {
geolocation();
});
});
Problem is solved, the access origin was the problem(access origin="*") in the config file and some capitals in the map structure, phonegap doesn't like that.
Related
im newbie on ionic development i have an app that can uploading image into a serve with a certain paramater and using post method to upload it. my problem is can i uploading image using http.post angular on ionic?based on this forum
https://forum.ionicframework.com/t/file-upload-using-http-post-multi-form-data/10454
and this
https://forum.ionicframework.com/t/image-upload-to-api-service-using-http-post/36481
its recommended to using cordova file transfer how can i use it with my certain parameter
what i have done its like this
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>
<script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgit.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="js/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" ng-controller="homeController">
<ion-pane>
<ion-nav-title>
<span>Upload Foto</span>
</ion-nav-title>
<ion-content class="padding">
<button class="button button-block button-dark" ng-click="selImages()">
Select Images
</button>
<button ng-show="images.length > 0" class="button button-block button-stable" ng-click="shareAll()">
Share All
</button>
<div class="list card" ng-repeat="img in images">
<div class="item item-image">
<img ng-src="{{img}}">
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item assertive image-option" href="#" ng-click="removeImage(img)">
<i class="icon ion-trash-a assertive"></i> Remove
</a>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
my controller
angular.module('starter', ['ionic','highcharts-ng','ngCordova'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('ImagePickerCtrl', function ($scope, $rootScope, $cordovaCamera,$cordovaFileTransfer) {
$scope.images = [];
$scope.selImages = function () {
$scope.upload = function() {
}
window.imagePicker.getPictures(
function (results) {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]);
$scope.images.push(results[i]);
}
if (!$scope.$$phase) {
$scope.$apply();
}
}, function (error) {
console.log('Error: ' + error);
}
);
};
$scope.removeImage = function (image) {
$scope.images = _.without($scope.images, image);
};
$scope.shareImage = function (image) {
window.plugins.socialsharing.share(null, null, image);
};
$scope.shareAll = function () {
var url = "fendypradana.com/alfalahkeu/Apifalah/upload_buktibayar/format/json";
window.plugins.socialsharing.share(null, null, $scope.images);
var options = {
fileKey: "avatar",
fileName: "image.png",
chunkedMode: false,
mimeType: "image/png"
};
$cordovaFileTransfer.upload(url, targetPath, options).then(function (result) {
console.log("SUCCESS: " + JSON.stringify(result.response));
}, function (err) {
console.log("ERROR: " + JSON.stringify(err));
}, function (progress) {
});
};
})
i have to include 2 paramater user_id=5 and keterangan=seragam
Any suggestions would really help.
Within the options variable
You are able to pass the params within the options object.
So
var options = {
fileKey: "avatar",
fileName: "image.png",
chunkedMode: false,
mimeType: "image/png",
params: {
user_id: 5,
keterangan: 'seragam'
}
};
I am new to REST API. Please help me to list all Albums, ordered by User name and if some User is clicked, show all albums of this user. This is the code I've written until now but it doesn't show me the right thing.
These are resources:
http://jsonplaceholder.typicode.com/users
http://jsonplaceholder.typicode.com/albums
And this is the code I've written:
var app = angular.module('christmas', ['ngResource']);
app.controller('SecretOperations', ['$scope', '$resource', function($scope, $resource) {
$scope.loadPosts = function() {
var postingsResource = $resource('http://jsonplaceholder.typicode.com/albums/', {});
$scope.postings = postingsResource.query();
postingsResource.query().$promise.then(function(postings){
$scope.postings = postings;
});
var useri = $scope.postings.userId;
var numeUser = $resource('http://jsonplaceholder.typicode.com/users?id=idu', { idu : useri });
$scope.off = numeUser.query();
};
$scope.loadPosts();
}]);
<!DOCTYPE HTML>
<html ng-app="christmas">
<head></head>
<body >
<div class="row" ng-controller="SecretOperations">
<div class="col-md-3 text-center" ng-repeat="album in postings">
<div>
<p class="text-muted">Album title: {{ album.title }}</p>
<p ng-repeat="offof in off"> Author name : {{ offof.name }} </p>
</div>
</div>
</div>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-resource.min.js"></script>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="app.js"></script>
</body>
</html>
Thank you
You are not using $resource service properly. I'd suggest to use the $promise property:
postingsResource.query().$promise.then(function (postings) {
$scope.postings = postings;
});
and
nameUser.get().$promise.then(function (user) {
$scope.authorn = user;
});
In the future, please carefully read the documentaton, before asking standard questions here:
https://docs.angularjs.org/api/ngResource/service/$resource
P.S.: In your case you might need to chain the two resource promises, because you need the result of the first resource in the second.
I have Tried 2,3 solution but none worked for me ...
I have 3 Maps which I want to show in Tabs .Only 1st one appears .On Tab Change I Tried call the jQuery function first ..But the function is not even firing .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps API v3 : KML Layer</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
$(document).ready(function () {
//activaTab('overview'); --1.this is not working
});
//2.this is not working
//$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// alert('not ok');
//});
//3.not working
//$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// alert(target);
//var target = $(e.target).attr("href") // activated tab
//});
4.Not working
//function activaTab(tab) {
// alert(tab);
// $('.tab-pane a[href="#' + tab + '"]').tab('show');
//};
function display_kmlmap() {
var map_options = {};
//--Nation--
var mapNation = new google.maps.Map(document.getElementById("map_nation"), map_options);
var kmlUrlNation = 'http://biogeo.ucdavis.edu/data/gadm2.7/kmz/HTI_adm0.kmz';
var kmlOptionsNation = { map: mapNation };
kmlLayerNation = new google.maps.KmlLayer(kmlUrlNation, kmlOptionsNation);
$("#map_nation").css("width", 400).css("height", 400);
//--District--
var mapDistrict = new google.maps.Map(document.getElementById("map_department"), map_options);
var kmlUrlDistrict = 'http://biogeo.ucdavis.edu/data/gadm2.7/kmz/HTI_adm2.kmz';
var kmlOptionsDistrict = { map: mapDistrict };
kmlLayerDistrict = new google.maps.KmlLayer(kmlUrlDistrict, kmlOptionsDistrict);
$("#map_department").css("width", 400).css("height", 400);
//--Commune--
var mapCommune = new google.maps.Map(document.getElementById("map_Commune"), map_options);
var kmlUrlCommune = 'http://biogeo.ucdavis.edu/data/gadm2.7/kmz/HTI_adm3.kmz';
var kmlOptionsCommune = { map: mapCommune };
kmlLayerCommune = new google.maps.KmlLayer(kmlUrlCommune, kmlOptionsCommune);
$("#map_Commune").css("width", 400).css("height", 400);
}
</script>
</head>
<body onload="display_kmlmap()">
<div>
<ul class="nav nav-tabs" role="tablist">
<li class="active">Nation View
</li>
<li>Department View
</li>
<li>Commune View
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="overview">
<div id='map_nation'></div>
</div>
<div class="tab-pane" id="photos">
<div id='map_department'>
</div>
</div>
<div class="tab-pane" id="Commune">
<div id='map_Commune'>
</div>
</div>
</div>
</div>
<div id="map_canvas" style="width: 500px; height: 400px; float: left">
</div>
</body>
</html>
i tried 3 solution , I mentioned in Code .. but none of them are working ...i am not getting any clue
What Am I missing ??
Hello i'm building an application where i want to dynamically change the source of an image in order to force reload it . The problem is that in order of this i only get a broken image on the browser. Instead , if a run the function manually by a button it runs perfect .
HTML document
<!DOCTYPE html>
<html lang="en" ng-app='cameraApp'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Node JS Camera</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src='https://code.angularjs.org/1.4.4/angular-sanitize.min.js'></script>
<script src="cameraApp.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h1>Welcome to NodeJS Camera v1</h1>
</div>
<div ng-controller="HomeController">
<div class="cameraControl col-md-5">
<p>Here is the camera control</p>
<button class="btn btn-default" ng-click="getSnapshot()">Snapshot</button>
<button class="btn btn-info" ng-click="intervalFunction()">Start Feed</button>
</div>
<div class="lifeFeed col-md-7">
<p>Here is the live feed</p>
<p><button class="btn btn-default" ng-click="readSnapshot()">Snapshot Read</button></p>
<img width='600' height='600' ng-src="{{snapshot}}" alt="SnapShot taken">
</div>
</div>
</div>
</body>
</html>
cameraApp.js
var cameraApp = angular.module('cameraApp',[]);
cameraApp.controller('HomeController', function($scope,$http,$timeout) {
function updateImage() {
var img = 'snapshots/camera.jpg'+ '?decache=' + Math.random();
console.log('Snapshot Loaded');
$scope.snapshot = img;
};
$scope.readSnapshot = updateImage;
$scope.getSnapshot = function() {
$http.get('/api/getSnapshot')
.then(function(response) {
// this callback will be called asynchronously
// when the response is available
console.log('Snapshot captured');
$scope.readSnapshot();
}, function(response) {
console.log('Error in capturing...');
});
}
$scope.intervalFunction = function() {
$timeout(function() {
$scope.getSnapshot();
$scope.intervalFunction();
}, 2000);
};
// Kick off the interval
$scope.intervalFunction();
});
There are two solutions I've used for this in the past.
1) Use an ng-if/ng-show on your img tag. This will prevent the broken image from displaying.
<img ng-if='snapshot'>
2) Set a default image that will load and then be replaced once the other images load.
$scope.snapshot = 'snapshots/default.png';
Here is my exact _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/Scripts/Tweets.js")
#RenderSection("Scripts",false)
<script type="text/javascript" src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
<script src="../../Scripts/Tweets.js" type="text/javascript"></script>
</head>
<body>
#{
if (ViewBag.IsAdmin ?? false)
{
<div class="controlPanel">
New Post
#Html.ActionLink("Sign Out", "DeAuth", "Account")
</div>
}
else
{
<div class="controlPanel">
#Html.ActionLink("Log In", "Login", "Account")
</div>
}
}
<header>
<img src="#Href("~/Content/Images/gizmologo.png")" alt="Gizmo | Blog Solutions" title="Gizmo | Blog Solutions"/>
</header>
<section>
<div id="topSep" class="sep"></div>
<aside>
<img id="picture" width="100" height="100" src="#Href("~/Content/Images/dsykes.jpg")" alt="Picture" title=":P" />
<div id="twitterHeader">D.Sykes on Twitter</div>
<div id="tweets">
</div>
<div id="feedLink">RSS Feed</div>
</aside>
<div id="main">
#RenderBody()
</div>
<div id="bottomSep" class="sep"></div>
</section>
<footer>
<div id="copyright">Copyright © 2013, Gizmo Bloging</div>
</footer>
</body>
</html>
And here is the Tweets.js Script that wont load...
$(document).ready(function () {
//$.getJSON("https://twitter.com/statuses/user_timeline.json?screen_name=ninanet&count=5&callback=?", // this is the OLD Twitter json call!
$.getJSON("https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=ninanet&count=5&callback=?",
function (data) {
$.each(data, function (i, item) {
ct = item.text;
mytime = item.created_at;
var strtime = mytime.replace(/(\+\S+) (.*)/, '$2 $1')
var mydate = new Date(Date.parse(strtime)).toLocaleDateString();
var mytime = new Date(Date.parse(strtime)).toLocaleTimeString();
$("#tweets").append('<div>' + ct + " <small><i>(" + mydate + " at " + mytime + ")</i></small></div>");
});
});
});
I dont know what could be the problem, my Jquery is initialized properly and so is the script but i dnt get anything.. Can someone pleeease help!?
Working demo: http://jsfiddle.net/JTrs7/
Cool, if you are trying to fetch data cross domain try using JSONP
Helpful links: (JSONP vs JSON)
What are the differences between JSON and JSONP?
Sending JSONP vs. JSON data?
http://bob.ippoli.to/archives/2005/12/05/remote-json-jsonp/
Hope it fits your needs :)
Sample code
$(document).ready(function () {
var k = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=Twitter&include_rts=1&count=5&jsoncallback=";
$.ajax({
dataType: 'jsonp',
url: k,
success: function (data) {
console.log(data);
$.each(data, function (i, item) {
$("#tweetFeed").append("<div class='tweetCloud'><div id='tweetArrow'></div><div id='tweetText'>" + item.text + "</div></div>");
})
}
});
});