I need my Ionic application to have URL for each page. I have a page with ion-tabs (TabsPage):
#Component({
selector: 'page-tabs',
template: `
<ion-tabs>
<ion-tab root="HomePage" tabTitle="Home" tabUrlPath="home-tab" tabIcon=""></ion-tab>
<ion-tab root="NewsPage" tabTitle="News" tabUrlPath="news-tab" tabIcon=""></ion-tab>
</ion-tabs>
`
})
export class TabsPage {
}
And I have home page (one of the tabs):
#IonicPage()
#Component({
selector: 'page-home',
template: `
some content
`
})
export class HomePage {
}
When home page is opened then URL is: http://localhost/#/home-tab/home
But when I reload the page then URL is: http://localhost/#/home
I don't understand why "home-tab" disappears. After page reload there is no tabs.
Related
I need to open payment method url inside ionic app, but i didn't found any solution of that. I have tried Iframe but it doesn't work for payment method urls, because of security reasons i guess. I have also treid InAppBrowser that doesn't work.
What I have tried open the url in browser but i need it to open within app.
Any solution?
You can use InAppBrowser-plugin to open an external url.
Install:
ionic plugin add cordova-plugin-inappbrowser --save
npm install --save #ionic-native/in-app-browser
See here:
import { Component , OnInit } from '#angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser } from '#ionic-native/in-app-browser';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements OnInit{
constructor(public navCtrl: NavController,private iab: InAppBrowser) {
}
ngOnInit(){
const browser = this.iab.create('https://www.stackoverflow.com','_self',{location:'no'});
}
}
I want to make webview to show my webpage with crosswalk plugin. When I put my url, and click the button. I got error
"Application Error"
"net:ERR_INSECURE_RESPONSE
(https://example.dummy.com:8444)"
my home page is using https
this is my code :
home.html
<ion-slide>
<h2>Please, Enjoy to call with our customer service</h2>
<button ion-button block full (click)="goToPage('https://oscar2.kebhana.co.id:8444/gibPT/intn/info/call#359854')">Start Video Call</button>
</ion-slide>
home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
goToPage(url : string) {
window.open(url, '_self');
}
}
Please help me to fix. Thank you
#anggaerlangga you can use InAppBrowser to open an external link. because IONIC is not a web application you have to use any browser for open external URL. I will show you how can you use the InAppBrowser.
first of all you have to install InAppBrowser NPM from the ionic native.
import { InAppBrowser} from '#ionic-native/in-app-browser';
let baseurl = 'your url';
let target = "_blank";
this.iab.create(baseurl,target);
Thank you. this will definitely help you.
I am currently working on an Ionic app and I understood that Ionic recently became Ionic 3. In the past, I worked with Ionic 2 and there was app.js.
When I created a new project and I wanted to remove sidemenu for my login page, I couldn't find the app.js.
Ionic 2 code
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
controller: 'loginCtrl',
templateUrl: 'login.html'
});
app.controller('loginCtrl', function($scope, $state,$ionicSideMenuDelegate) {
$ionicSideMenuDelegate.canDragContent(false);
});
May I know how does this work now in the new Ionic?
You can do it this way, In your login page:
LoginPage.ts
import {MenuController} from 'ionic-angular';
export class LoginPage {
constructor(private menu : MenuController){}
ionViewDidEnter()
{
// Disable the root left menu when entering this page
this.menu.enable(false);
}
ionViewWillLeave()
{
// enable the root left menu when leaving this page
this.menu.enable(true);
}
}
I'm trying to create an app with an auxiliary route for a chat window. The app fails right on the loading. It seems like a bug and I reported it on Angular GitHub, but I wonder if anyone knows a workaround? Here's the plunk of this simple app: http://plnkr.co/edit/JsZbuR
#Component({
selector: 'basic-routing',
template: `
<a [router-link]="['/Home']">Home</a>
<a [router-link]="['/ProductDetail']">Product Details</a>
<router-outlet></router-outlet>
<router-outlet name="chat"></router-outlet>
<a [router-link]="['/', ['Chat']]">Chat</a>
`,
directives: [ ROUTER_DIRECTIVES ]
})
#RouteConfig([
{path: '/', component: HomeComponent, as: 'Home'},
{path: '/product', component: ProductDetailComponent, as: 'ProductDetail' },
{aux: '/chat', component: ChatComponent, as: 'Chat'}
])
class RootComponent { /* ... */ }
It's not clear how the router knows which named route outlet to use.
You have to wait until the issue https://github.com/angular/angular/issues/4694 will be solved.
Current implementation allows only
this.router.navigateByUrl('/(chat)');
See the link http://plnkr.co/edit/lquMdagaVfIoAT83w1pl?p=preview
I am trying to set up an app with multiple screens and some screens should have sub screens. the tabs are working fine and linking up with the correct template but the subpages are not working. i cant even browse to the set urls. when i click on the icons it goes to the default i have set in the otherwise method.
APP JS File
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tab-home.html',
controller: 'HomeCtrl'
}
}
})
.state('tab.aboutApps', {
url: '/aboutApps',
views: {
'tab-aboutApps': {
templateUrl: 'templates/tab-aboutApps.html'
}
}
})
.state('tab.aboutApps.pricing', {
url: '/aboutApps/pricing',
views: {
'detail-pricing': {
templateUrl: 'templates/detail-pricing.html'
}
}
})
.state('tab.aboutApps.features', {
url: '/features',
views: {
'detail-features': {
templateUrl: 'templates/detail-features.html'
}
}
})
HTML
<ion-item class="text-wrap" href="#/tab/aboutApps/features">
<p>Features</p>
<ion-nav-view title="Features" name="detail-features" class="text-wrap"</ion-nav-view>
</ion-item>
<ion-item class="text-wrap" href="#/tab/aboutApps/pricing">
<p>Pricing</p>
<ion-nav-view title="Pricing" name="detail-priceing" class="text-wrap"></ion-nav-view>
</ion-item>
i am new to ionic and dont see why this wont work. i am thinking that there is a problem in creating the path or url
Where you are using:
href="#/tab/aboutApps/pricing"
on your ion-item,
change this to:
ui-sref="tab.aboutApps.pricing"
This is a directive that binds a link to a state.
You can read more about it here:
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref