Windows Phone 8 Ionic app navigation issue(Hybrid Application) - angularjs

I am developing an hybrid app for Android and WP8 using Ionic. It works fine on Android platform but when I recently used this on WP8, its showing me
"You need to install an app for this task. Would you like to search
for one on the Store?"
When I click on some links (internal app links). Please can anybody tell me why this is happening. Thanks in advance.

Problem In windows phone Due to ms-appx IE problem :
When you use ng-href and dynamic url's in your app on Windows Phone, for example:
<a ng-href="#/view/"> click here </a>
You will notice that when you click on the url, you get a message "Search for app in appstore?". You receive this message because AngularJS can't handle the prefix that Windows Phone IE is adding.You can resolve this easily by adding an HTML5 him to your app.
.config([
'$compileProvider',
function ($compileProvider)
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|ghttps?|ms-appx|x-wmapp0):/);
// Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
}
])
And if local & dynamic images are not showing in app then add following same as your app.js
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|content|ghttps?|ms-appx|x-wmapp0):|img\//);
For more details to check here link1, link2 ,link3 and link4.

Install cordova-plugin-inappbrowser

In relation to this posting What is x-wmapp2 and x-wmapp1? it could also be diserable to have something like this:
$compileProvider.aHrefSanitizationWhitelist( /^\s*(g?https?|ftp|mailto|tel|file|local|ms-appx|x-wmapp\d+):/ );
Instead of only x-wmapp0 I am using x-wmapp\d+ in my regex.

Related

UPI Deeplinking from IONIC to BHIM - Ionic1 (WebIntent)

Currently I am working on a Project which is implemented in Ionic 1 and AngularJs.
Now we are working to integrate it with BHIM UPI to perform In-App payment. I think we need to install IONIC Native Web Intent plugin in order to make web intent call to BHIM.
But I am fairly new to angularJs and Ionic. I have seen some of the questions related to this but those are implemented in Ionic3 and latest versions.
UPI Deeplinking from IONIC to GooglePay does not work as expected
DEEPLINK_HOST in ionic deeplink
Deeplinking - Opening an Ionic App through another Ionic App
I have tried to achieve this by making Web Intent calls with help of this https://www.npmjs.com/package/#ionic-native/web-intent?activeTab=readme but with no luck. It's giving Error message like below
ionic.bundle.min.js:150 Error: [$injector:unpr] http://errors.angularjs.org/1.5.3/$injector/unpr?p0=webIntentProvider%20%3C-%20webIntent%20%3C-%20PaymentComponent%20%3C-%20PaymentComponent
at http://localhost:8100/js/ionic.bundle.min.js:40:416
at http://localhost:8100/js/ionic.bundle.min.js:77:7
at Object.d [as get] (http://localhost:8100/js/ionic.bundle.min.js:74:270)
EDIT :
I want to open BHIM UPI app from my Ionic App and able return success or failure status of transaction.
Any help or directions to achieve this will be highly appreciated.
There is no 'webIntentProvider' exists in ionic providers.
You've to remove 'webIntent' from your controllers injections. And use below code to open existing UPIs available in your mobile.
window.plugins.intentShim.startActivity(
{
action: window.plugins.intentShim.ACTION_VIEW,
url: urlIntent
},
function () { },
function () {
alert('Failed to open URL via Android Intent')
}
);
It'll show all available UPI providers which are installed in your mobile. Please go through documentation Deeplinking UPI for more details.
Cross check your package.json & confilg.xml, whether you installed above plugin in your app or not.

loading image using anglularjs and ibm bluemix

I developed an application using nodes and angularjs.
I have an html file that I should display an image.
when running the application on localhost, everything work perfectly and the application displays the image.
I used this code for displaying image:
<img ng-src="./app/images/{{idimage}}.jpeg" ></img>
when I do a push for this application to ibmbluemix, the console told me that there are a 404 not found error.
Any idea please for how displaying image using angulars in ibm bluemix.
Thanks for helps
A possible reason for this issue is if you are pushing the app from outside of the app folder by using the manifest path parameter, and when you run your app locally, you also run it from outside the app folder.
After pushing your app, use cf ssh (docs) to get inside your deployed app. You can then take a look around using linux tools like ls to see what folders have been deployed.

Error URL pdfMake.js with Ionic Cordova App

I have a problem using pdfMake.js library. This library is supposed to generate PDF, client-side only.
It works well with chrome, Firefox...
But when I launch my ionic app on a device (Android in my case), I have the following error :
CordovaWebViewImpl﹕ Blocked (possibly sub-frame) navigation to non-allowed URL: data:application/pdf;base64,JVBERi0xLjMKJf39/f0KNiAwIG9iago8PAovVHlwZSAvRXh0R1.......
I encountered this problem before with AngularJs for example for Blobs...and using the following configuration worked :
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|blob):/);
BUT not here... :(
Do you have any idea how to allow the data/pdf ?
Thanks !
You have to add permissions to your App inside manifest.xml file

Cannot find hostname in file:/// error when using Ionic and OAuth.io

I am using Ionic and Oauth.io to perform authentication. If I run ionic serve and include the outh.js file in my index everything works good from the browser.
But when I run ionic run ios or install the app in android, I get the following error when I press the auth button (the one that suppose to execute OAuth.popup
I do not know what to do, until now I have checked the following:
In config.xml I have access, allow-intent and allow-navigation full permisive
I have installed and re-installed the plugin ionic plugin add https://github.com/oauth-io/oauth-phonegap.git
I tried to run the native app without the inclusion of the oauth.js file and everything breaks.
Using current versions up to date.
I am new to Ionic, so I don't know how to debug the device-running app or simulator.
Could be similar to this post but not exactly .
Your advices will be appreciated.
I figure it out reading some posts. The OAuth initialization and references should be done after the device is ready, so it is best to put the initialize in this block:
$ionicPlatform.ready(function() {
// ...
if(typeof window.OAuth !== 'undefined'){
$rootScope.OAuth = window.OAuth;
$rootScope.OAuth.initialize('XXX');
}
else{
console.log("plugin not loaded, this is running in a browser");
$.getScript( "lib/oauth.js", function() {
$rootScope.OAuth = OAuth;
$rootScope.OAuth.initialize('XXX');
});
}
});
Now, if the plugin is loaded it initializes the window.OAuth object, else the app is running in browser, so I have to include the oauth.js file. Also I assigned the OAuth to the $rootScope for quick access.
Hope this helps anyone.

AngularJS set up with Webstorm

I'm getting started with Angularjs and fallen at the first hurdle :-(
i've installed node (windows installer) and the webstorm ide. in webstorm i've installed the angularjs plugin and in the html typing 'ng' prompts all the ng templates in a dropdown, so this look ok.
cutting and pasting in the demo html5 (under the heading 'The Basics' at http://angularjs.org/) and running in webstorm and navigating to the file url (in firefox or chrome) however the angular statement '{{yourName}}' isn't binding at all - it's rendered out as a literal. Anyone know where i'm going wrong ?
The example on the home page was using protocol-less (or protocol-relative) URLs (http://www.paulirish.com/2010/the-protocol-relative-url/). While those are very handy, protocol-relative URLs don't play nicely with the file:// protocol in this case. Simply your browser is trying to retrieve AngularJS library from the local file system. To fix it you need to add protocol:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
Try prefixing the ng tag with data like data-ng-model.

Resources