I would like to create a ionic project for wifi-network-detection. I came across some plugins like wifiwizards,cordova plugin diagnostic to check wifi connection and also cordova plugin hotspot. But how should I include these plugins to my ionic project. Should I create a blank ionic project to add these plugins or how should I put these plugins to my index.html and app.js file. Please someone help me with these as I'm new to these.
Sample Project:
index.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>
<!--ngCordova script-->
<script src = "lib/ngCordova/dist/ng-cordova.min.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">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content padding = "true">
<div class = "card">
<div class = "item item-text-wrap">
<h1>Network: {{network}}</h1>
</div>
</div>
<div class = "card">
<div class = "item item-text-wrap">
<ion-toggle ng-model = "isOnline" ng-checked = "item.checked">
<h1 ng-show = "isOnline">I'm into Wifi</h1>
<h1 ng-show = "! isOnline">I'm out off Wifi</h1>
</ion-toggle>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
app.js where I included the plugin(ngCordova)
angular.module('starter', ['ionic', 'ngCordova'])
.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);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope){
document.addEventListener("deviceready", function(){
$scope.network = $cordovaNetwork.getNetwork();
$scope.isOnline = $cordovaNetwork.isOnline();
$scope.$apply();
//listen for onloine event
$rootscope.$on('$cordovaNetwork:online', function(event, networkState){
$scope.isOnline = true;
$scope.network = $cordovaNetwork.getNetwork();
$scope.$apply();
})
//listen for offline event
$rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
console.log("got offline");
$scope.isOnline = false;
$scope.network = $cordovaNetwork.getNetwork();
$scope.$apply();
})
}, false);
});
Now how to write to check for the wifi detection and connectivity. The plugin I used is the cordova-network-information
Choose a template to start from (blank, sidemenu, tabs etc). Create your new project using ionic start [name] [templateName] step into the folder and add the plugins you need by calling ionic plugin add [plugin].
Now read the documentation for the plugins and start by implementing the examples they often show in their github repo. Then modify to your needs.
Related
controller.js
var app = angular.module('startervideo', ['ionic','ngCordova'])
app.controller('VideoCtrl', function($scope,$cordovaCapture) {
$scope.data = {
videoPath: ""
};
$scope.captureVideo = $scope.captureVideo = function() {
var options = {duration: 15 };
$cordovaCapture.captureVideo(options).then(
function(videoData) {
// Success! Video data is here
$scope.data.videoPath = "file:/" + videoData[0].fullPath;
console.log(videoData);
}, function(err) {
// An error occurred. Show a message to the user
console.log(err);
});
}
});
app.js
var app = angular.module('starter', ['ionic','ngCordova','startervideo'])
app.directive("cordovaVideo", function () {
return {
restrict: 'AEC',
scope: {src: '='},
link: function(scope, element, attrs) {
scope.$watch('src', function(newVal, oldVal) {
if (scope.src != "") {
// Create a div object
var div = document.createElement('div');
div.innerHTML = "<video id=\"myCordovaVideo\"controls>"+
"<source src=\"" + scope.src + "\" type=\"video/quicktime\">"+ "</video>";
// Delete previous video if exists
var previousDiv = document.getElementById('myCordovaVideo');
if (previousDiv)
previousDiv.remove();
// Append new <video> tag into the DOM
element.append(div);
}
}); }
} });
#myCordovaVideo {
background: red;
width: 100%;
}
<!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">
<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.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="starter" ng-controller="VideoCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">VideoPro</h1>
</ion-header-bar>
<ion-content>
<button class="button button-calm button-full"
ng-click="captureVideo()">Capture Video</button>
<cordova-video src="data.videoPath"></cordova-video>
</ion-content>
</ion-pane>
</body>
</html>
Hi everyone I am new in ionic1 framework been trying to develop an application that can capture video display them on the UI and ultimately store in a remote serve, so far the code that I have can capture video but it does not display it on the UI.The example that I am following comes from ionic cookbook I am in desperate need of help here is the code that I have
I've created a similar Ionic app that captures video and uploads it to a remote server. You may find it useful
https://github.com/aliasav/ionic-video
I am trying to create a simple that will read the data from a qr code, the apps is working perfectly, it can open the camera and capture the image, the problem is, it cannot show the data/data is blank in the alert as below code.
this is how i do it
cordova plugin add https://github.com/wildabeast/BarcodeScanner.git
index.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">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.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>
<div class="card">
<div class="item" ng-controller="ScanCtrl">
<button class="button button-block button-positive" ng-click="scanBarcode()">
<i class="icon ion-qr-scanner"></i>
Scan With Scope
</button>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'ngCordova'])
.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);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
controllers.js
angular.module('starter.controllers', [])
.controller('ScanCtrl', function($scope, $cordovaBarcodeScanner){
$scope.scanBarcode = function(){
$cordovaBarcodeScanner.scan().then(function(imgData){
alert(imgData.text);
},function(error){
alert("Error");
}
);
}
});
Any helps would really appreciated.
My app has two kinds of templates. The first is used in "logged out" pages and the second one is used in "logged in" pages.
Below is the index.html which is used with all "logged out" template pages:
<!DOCTYPE html>
<html ng-app="appLoggedOut">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Services 4 Uber</title>
<link href="lib/ionic/css/ionicons.min.css" rel="stylesheet" >
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- 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 src="js/loggedout/app.js"></script>
<script src="js/loggedout/controllers.js"></script>
<script src="js/loggedout/routes.js"></script>
<script src="js/loggedout/services.js"></script>
<script src="js/loggedout/directives.js"></script>
<link href="css/app.css" rel="stylesheet">
</head>
<body>
<div>
<div class="spacer" style="width: 300px; height: 15px;"></div>
<ion-nav-view></ion-nav-view>
</div>
<div class="bar bar-footer bar-dark">
Footer for Logged out pages
</div>
</body>
</html>
I need to set all my "logged in" pages to show a header and a different footer. So, it is like I have another index.html, used just for "logged in" pages.
Below is the what I want to use to all my "logged in" pages:
<!DOCTYPE html>
<html ng-app="appLoggedIn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Services 4 Uber</title>
<link href="lib/ionic/css/ionicons.min.css" rel="stylesheet" >
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- 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 src="js/loggedin/app.js"></script>
<script src="js/loggedin/controllers.js"></script>
<script src="js/loggedin/routes.js"></script>
<script src="js/loggedin/services.js"></script>
<script src="js/loggedin/directives.js"></script>
<link href="css/app.css" rel="stylesheet">
</head>
<body ng-controller="homeCtrl">
<div class="bar bar-header bar-light">
Header used only in logged in pages
</div>
<div>
<ion-nav-view></ion-nav-view>
</div>
<div class="bar bar-footer bar-dark">
Footer for logged in pages
</div>
</body>
</html>
How can I define my routes, to jump from my login page (using "logged out" template) to a logged page (using "logged in" template) ?
I want to change all the page and not just load a view inside the tag "".
Thanks.
i am only discuss about the How to navigate from one template to another.
ionic that used angularjs or javaScript. is follow the simple call by state or url etc
for example Each controller have routing and there HTML page
angular.module('starter.storeDetailsController', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('storeDetails', {
url: '/user/:store',
abstract:true,
templateUrl: 'templates/store_detail.html',
controller: 'StoreDetailsCtrl'
})
})
.controller('StoreDetailsCtrl', ['$scope', '$ionicLoading', '$timeout', function($scope, $ionicLoading, $timeout) {
$scope.goToNextPage=function(){
$state.go('home'); //here navigate from one template to another
}
}])
And another page
angular.module('starter.homeDetailsController', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
abstract:true,
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
})
.controller('HomeCtrl', ['$scope', '$ionicLoading', '$timeout', function($scope, $ionicLoading, $timeout) {
console.log('Welcome');
}])
above example show two controller StoreDetailsCtrl and HomeCtrl and i go from StoreDetailsCtrl to HomeCtrl in home page. this is navigate by javascript but there are many ways to navigate page.
in HTML side by href=#/url and also used ui-sref="stateName" in ionic for navigate page.
I'm trying to set up a HTTP-get request on my ionic application but i keep getting this error:
XMLHttpRequest cannot load http://www.wikicode.co.uk/announcement?
date=value2&message=value3&name=value1. No 'Access-Control-Allow-Origin'
header is present on the requested resource. Origin 'http://localhost:8100'
is therefore not allowed access.
I'm not really sure what's wrong. I've tried googling it but didn't have much luck.
Here's my code:
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>Announcement</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>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="Announcement">
<ion-view view-title="Announcements">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Announcement</h1>
</ion-header-bar>
<br>
<br>
<br>
<ionic-content ng-controller="Controller">
<button class="button" ng-click="getData()">Do something</button>
<br>
name: {{name}} {{date}} {{message}}
</ionic-content>
</ion-pane>
</ion-view>
</body>
</html>
Javascript:
angular.module('starter.controllers', [])
.controller('announcementsCtrl', function($scope) {})
.controller('chatsCtrl', function($scope) {})
.controller('photosCtrl', function($scope) {})
.controller('profilesCtrl', function($scope) {})
.controller('Controller', function($scope, $http) {
$scope.getData = function() {
$http.get("http://www.wikicode.co.uk/announcement", { params: { "name": "value1", "date": "value2", "message": "value3"} })
.success(function(data) {
$scope.name = data.name;
$scope.date = data.date;
$scope.message = data.message;
})
.error(function(data) {
alert("ERROR");
});
}
});
This is a common issue with RESTful APIs that do not support CORS headers. You can work around this during development by using the proxy option in the Ionic CLI. I wrote a tutorial about this on my site http://ionicinaction.com/blog/how-to-fix-cors-issues-revisited/.
The big thing to remember is this only works for building the app. It does not solve the root of the problem. You have two options 1) get wikicode.co.uk to support CORS headers or 2) create another REST API that proxies to the real API but adds CORS headers. There are lots of ways to do #2, but here is how to build a simple Node server that does this. http://chafey.blogspot.com/2014/09/working-around-cors.html
I've built a Cordova 2.0 App for iOS with jQuery Mobile 1.2. Framework inside. I've successfully installed the Childbrowser plugin (in this version and with this guide. Thanks for the help from these nice guys at this point,
Now I can call the Childbrowser directly with an onclick event with this javascript in the head:
<script type="text/javascript">
app.initialize();
function launchCB() {
if(window.plugins.childBrowser != null) {
window.plugins.childBrowser.onLocationChange = function(loc){};
window.plugins.childBrowser.onClose = function(){};
window.plugins.childBrowser.onOpenExternal = function(){};
window.plugins.childBrowser.showWebPage('http://www.google.de');
} else {
alert('not found');
}
}
</script>
OR directly with for example
Google
Now I want to open all links with the attribute target="_blank". Therefore I've found this thread and picked up the solution by Charlie Gorichanaz.
But when I start the application in the iPhone simulator, all I get is the sandclock or rather the spinning wheel of death of jQuery mobile.
I'm happy for every helpful advice, I never coded before this app. Here's my index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name = "format-detection" content = "telephone=no"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Cordova</title>
<script type="text/javascript" src="cordova-2.0.0.js"></script>
<script type="text/javascript" src="ChildBrowser.js"></script>
<gap:plugin name="ChildBrowser" /> <!-- latest release -->
<script type="text/javascript" charset="utf-8" src="EmailComposer.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function launchCB() {
if(window.plugins.childBrowser != null) {
window.plugins.childBrowser.onLocationChange = function(loc){};
window.plugins.childBrowser.onClose = function(){};
window.plugins.childBrowser.onOpenExternal = function(){};
window.plugins.childBrowser.showWebPage('http://www.google.de');
} else {
alert('not found');
}
}
/*
var args;
cordova.exec(null, null, "EmailComposer", "showEmailComposer", [args]);
*/
</script>
<!-- jQuery mobile -->
<link type="text/css" rel="stylesheet" media="screen" href="jqm/jquery.mobile-1.2.0-alpha.1.min.css">
<link type="text/css" rel="stylesheet" media="screen" href="jqm/Changes.css">
<script type="text/javascript" src="jqm/jquery-1.7.2.min.js"></script>
<script>
// for using childbrowser to open pdf on remote sites
$(document).bind( "mobileinit", function() {
$.mobile.allowCrossDomainPages = true;
}
);
// the function i want to implement
$(document).bind("pageinit", function() {
onDeviceReady();
});
function onDeviceReady() {
var root = this;
cb = window.plugins.childBrowser;
if (cb != null) {
$('a[target="_blank"]').click(function(event) {
cb.showWebPage($(this).attr('href'));
event.preventDefault();
event.stopImmediatePropagation();
return false;
});
}
}
// don't know is this thing is right in place...
document.addEventListener("deviceready", onDeviceReady, false);
</script>
<script src="jqm/jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
<body>
<section data-role="page" id="home" data-theme="a" data-position="fixed">
<div data-role="header"> <!-- header -->
<h1>Test</h1>
<div style="position:absolute; top:0px; right:5px;">
<a href="#about" data-transition="pop">
<img src="images/schlange-sw.png" alt="Schlange">
</a>
</div>
</div>
<!-- /header -->
<div data-role="content"> <!-- content -->
<a id="domainbut" onclick='launchCB()'>Working </a>
not working
</div>
<!-- content -->
<div data-role="footer" data-theme="a" data-position="fixed"></div>
</section>
<section data-role="dialog" id="about" data-close-btn-text="Close This Dialog">
<div data-role="header">
<h1>Über</h1>
</div>
<div data-role="content">
<h1 style="text-align: center;"></h1>
<div align="center">
</div>
<p style="text-align: center;">The owner of this app</p>
<button onclick="cordova.exec(null, null, 'EmailComposer', 'showEmailComposer', [args]);">Compose Email</button>
<p>
OK
</p>
</div>
</section>
</body>
</html>
Thank you in advance.
Regards
Kieke
#Kieke, if you decide to do away with ChildBrowser, I found the following worked for me.
NOTE: Assuming you are using PhoneGap 2.x
In your Cordova.plist set OpenAllWhitelistURLsInWebView = YES and set your ExternalHosts list, * is fine. Anything you want the webview not to block (viewed in Safari or in the app) has to be in your ExternalHosts list.
In your MainViewController.m add the following code to the bottom, you can manually redirect any URL to Safari, see the if statement for www.loadDomainInSafari.com:
- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
NSURL *requestURL =[ [ request URL ] retain ];
NSString *host = [ [ requestURL host] retain ];
// if YES, directs to WebView
// otherwise, takes OpenAllWhitelistURLsInWebView setting
// if www.loadDomainInSafari.com, open in Safari by explictly stating NO.
// otherwise take OpenAllWhitelistURLsInWebView setting of YES
if ([host isEqualToString:#"www.loadDomainInSafari.com"]) {
return ![ [ UIApplication sharedApplication ] openURL: [ requestURL autorelease] ];
}
[ requestURL release ];
return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType];
}
In your Cordova.plist, do you have OpenAllWhitelistURLsInWebView = YES and are all the domains (eg. www.google.com, localhost) you are connecting to are in your ExternalHosts list?
Look in the console of your Xcode debugger as #Littm describes, you will see if your link are being blocked because they aren't in the whitelist.
You can also check your system.log as well, tail /var/log/system.log for any errors after you execute.