Ionic apps are developed with angular code, so people start using ng-href to point to URLs which has {{}} variables whose value will be dynamically loaded. With ng-href IONIC treats the links like internal links and hence opens them within the application itself. To solve this, we make use of onclick and window.open() methods.
Note: Am using Windows 7 to illustrate this tutorial.
In this tutorial I’ll show you the exact code you need to do this effectively: To open the external URL in mobiles browser.
Step 1: You need node.js installed on your computer.
Step 2: Install cordova and ionic
npm install ionic -g
npm install cordova -g
Step 3: Install inappbrowser plugin
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
OR
cordova plugin add org.apache.cordova.inappbrowser
Step 4: Insert the code in your view (html files)
<a class="button button-assertive" ng-href="http:// url .com/{{id}}/discount" onclick='window.open(this.href, "_system", "location=yes"); return false;'> </a>
This way, the variables in the ng-href interpolates and then is being inserted as first parameter to window.open() method.
IONIC APP – Open External Links In Mobile Browser
[youtube https://www.youtube.com/watch?v=tqbmsOn_n1E]
Loads in the system browser: window.open(‘http://example.com’, ‘_system’);
Loads in the InAppBrowser: window.open(‘http://example.com’, ‘_blank’);
Loads in the InAppBrowser with no location bar: window.open(‘http://example.com’, ‘_blank’, ‘location=no’);
Loads in the Cordova web view: window.open(‘http://example.com’, ‘_self’);