What I am trying to do is when the splash screen is loading, a http request is made to the server to pull some information and pass the response to another page.
Below is the code I am working with.
import { Component } from '#angular/core';
import { Platform, LoadingController } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { CacheService } from "ionic-cache/ionic-cache";
import { Apis } from './apis';
import { StayPage} from '../pages/stay/stay';
#Component({
templateUrl: 'app.html',
providers: [Apis]
})
export class MyApp {
rootPage = StayPage;
constructor(platform: Platform, cache: CacheService, public loadingCtrl: LoadingController, public Apis: Apis ) {
cache.setDefaultTTL(60 * 60);
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.Apis.types().subscribe( response => {
response.results;
StatusBar.styleDefault();
Splashscreen.hide();
}, err => {
this.Apis.error( err );
});
});
}
}
When I run the above code, the splash screen is stuck on loading and doesn't move to another page.
You need to make HTTP request in constructor or ngOnInit of StayPage.
export class StayPage implements OnInit {
...
constructor(public navCtrl: NavController,
public navParams: NavParams
public http: Http) { }
ngOnInit(){
this.http.get(apiUrl)
.subscribe(
responseSuccess => ...
responseError => ...
}
}
}
Related
I have a page that would like to launch external app when a button is clicked and the function goToApp() should run.
Following is my code for on the ts file but everything on the page could be loaded until the point I added
import { AppLauncher, AppLauncherOptions } from '#ionic-native/app-launcher/ngx';
Which right after it the page doesn't load anymore. There is no error code returned. Any idea? Thanks in advance.
import { Component,OnInit,Input } from '#angular/core';
import { AppLauncher, AppLauncherOptions } from '#ionic-native/app-launcher/ngx';
import { ModalController, Platform } from '#ionic/angular';
import { DomSanitizer,SafeResourceUrl } from '#angular/platform-browser';
/*
Generated class for the Posts page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
#Component({
selector: 'page-fsfastcheck',
templateUrl: 'fsfastcheck.html',
styleUrls: ['fsfastcheck.scss'],
})
export class FSFastCheckPage implements OnInit {
#Input()
url: string = "https://eastchenconsultancy.com/feng-shui-fast-check/";
url2: string = "https://eastchenconsultancy.com/appointment-list/";
urlSafe: SafeResourceUrl;
urlSafe2: SafeResourceUrl;
mySegment: string = 'travelrequest';
constructor(
public modalView: ModalController,
public sanitizer: DomSanitizer,
private appLauncher: AppLauncher, private platform: Platform) { }
ngOnInit() {
this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
this.urlSafe2= this.sanitizer.bypassSecurityTrustResourceUrl(this.url2);
}
close() {
this.modalView.dismiss();
}
goToApp() {
const options: AppLauncherOptions = { }
if(this.platform.is('ios')) {
options.packageName = 'com.apple.compass'
} else {
options.packageName = 'com.gn.android.compass'
}
this.appLauncher.canLaunch(options)
.then((canLaunch: boolean) => console.log('Compass is available'))
.catch((error: any) => console.error('Compass is not available'));
}
}
Have you followed the standard part which you need to do when adding new modules to your app:
https://ionicframework.com/docs/native/overview#angular
Basically, you need to inject the module into the app:
// app.module.ts
import { AppLauncher } from '#ionic-native/app-launcher/ngx';
...
#NgModule({
...
providers: [
...
AppLauncher
...
]
...
})
export class AppModule { }
first of all iwant to apologize for my poor englis, im trying to resolve this by my own for few days and i couldn't, i really need to solve this for a school project.
I have a variable named "myAccountData", im trying to put GET HTTP request result on it but its not working here's my code:
Page.ts:
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NativeStorage } from '#ionic-native/native-storage';
import { EditaccountPage } from '../editaccount/editaccount';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';
import { Observable } from 'rxjs/Observable';
/**
* Generated class for the MyaccountPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-myaccount',
templateUrl: 'myaccount.html',
})
export class MyaccountPage {
public myAccountData;
constructor(public navCtrl: NavController, public navParams: NavParams, private nativeStorage: NativeStorage, public authServiceProvider: AuthServiceProvider) {
}
setmyAccountData(data){
this.myAccountData=this.authServiceProvider.getData("userbyid/40").subscribe( myData => {
this.myAccountData=myData;
});
}
gotoEdit(){
this.navCtrl.push(EditaccountPage);
}
}
authServiceProvider.ts:
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
let apiUrl = "http://192.168.1.2/api/v1/"
/*
Generated class for the AuthServiceProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
#Injectable()
export class AuthServiceProvider {
constructor(public http: HttpClient) {
console.log('Hello AuthServiceProvider Provider');
}
public async postData(credentials, type): Promise<any> {
await this.http.post(apiUrl + type, JSON.stringify(credentials)).toPromise();
}
public getData(type): Observable<any> {
return this.http.get(apiUrl + type);
}
}
When i run "http://192.168.1.2/api/v1/userbyid/40" on postman this is what i get: {"id":"40","firstname":"Kebbab","lastname":"Walid","email":"walid#kebbab.fr","username":"walid","password":"a665a45920422f9d417e4867efdc4fb8a04a1f3fff1fa07e998e86f7f7a27ae3","sexe":"","birth":"2018-04-11","telephone":"0","type":"ouvrier","emailverified":"0"}
But on page.html if i use {{myAccountData.firstname}} it doesnt show anything
Error Log:
ERROR Error: Uncaught (in promise): TypeError: _co.myAccountData is undefined
View_MyaccountPage_0/<#ng:///AppModule/MyaccountPage.ngfactory.js:128:13
updateRenderer#http://localhost:8100/build/vendor.js:14342:20
checkAndUpdateView#http://localhost:8100/build/vendor.js:13866:5
callViewAction#http://localhost:8100/build/vendor.js:14211:21
execComponentViewsAction#http://localhost:8100/build/vendor.js:14143:13
checkAndUpdateView#http://localhost:8100/build/vendor.js:13867:5
ViewRef_.prototype.detectChanges#http://localhost:8100/build/vendor.js:11653:9
NavControllerBase.prototype._viewAttachToDOM#http://localhost:8100/build/vendor.js:51117:9
Tab.prototype._viewAttachToDOM#http://localhost:8100/build/vendor.js:77128:9
NavControllerBase.prototype._transition#http://localhost:8100/build/vendor.js:51197:13
NavControllerBase.prototype._nextTrns/<#http://localhost:8100/build/vendor.js:50918:40
F</l</t.prototype.invoke#http://localhost:8100/build/polyfills.js:3:14974
onInvoke#http://localhost:8100/build/vendor.js:4982:24
F</l</t.prototype.invoke#http://localhost:8100/build/polyfills.js:3:14901
F</c</r.prototype.run#http://localhost:8100/build/polyfills.js:3:10124
f/<#http://localhost:8100/build/polyfills.js:3:20240
F</l</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:15649
onInvokeTask#http://localhost:8100/build/vendor.js:4973:24
F</l</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:15562
F</c</r.prototype.runTask#http://localhost:8100/build/polyfills.js:3:10815
o#http://localhost:8100/build/polyfills.js:3:7887
F</h</e.invokeTask#http://localhost:8100/build/polyfills.js:3:16823
p#http://localhost:8100/build/polyfills.js:2:27646
v#http://localhost:8100/build/polyfills.js:2:27893
Stack trace:
c#http://localhost:8100/build/polyfills.js:3:19752
c#http://localhost:8100/build/polyfills.js:3:19461
f/<#http://localhost:8100/build/polyfills.js:3:20233
F</l</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:15649
onInvokeTask#http://localhost:8100/build/vendor.js:4973:24
F</l</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:15562
F</c</r.prototype.runTask#http://localhost:8100/build/polyfills.js:3:10815
o#http://localhost:8100/build/polyfills.js:3:7887
F</h</e.invokeTask#http://localhost:8100/build/polyfills.js:3:16823
p#http://localhost:8100/build/polyfills.js:2:27646
v#http://localhost:8100/build/polyfills.js:2:27893
core.js:1350
In my page.html i usef { { myAccountData?.firstname } } instead of { { myAccountData.firstname } } and it worked
The ionViewDidLoad function seem to get called twice, which is causing multiple views being created of AddressPage. I have debugged this and it looks like whenever data is updated the new instance of view gets created. This behaviour seems to happen only when I use fireabse to save the address. If I comment out the code to save the address new view is not created and app navigates to previous screen.
Any way to avoid this?
I have tried ViewCotnroller.dismiss() and NavController.pop() inside saveAddress method but non seem to avoid creation of new view.
#Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = HomePage;
constructor(platform: Platform, statusBar: StatusBar) {
platform.ready().then(() => {
statusBar.styleDefault();
statusBar.backgroundColorByHexString('#1572b5');
});
}
}
Home Page
import {NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public firebaseProvider:
FirebaseProvider) {
}
//navigate to different view
navigate(){
this.navCtrl.push(AddressPage, {address:newAddress});
}
}
Address Page
import {NavController } from 'ionic-angular';
#Component({
selector: 'page-address',
templateUrl: 'address.html'
})
export class AddressPage {
constructor(public navCtrl: NavController, public firebaseProvider:
FirebaseProvider, private navParams: NavParams) {
this.addressKey = this.navParams.get('key');
}
ionViewDidEnter(){
//load some data from server
}
saveAddress(){
//save data to server
this.firebaseProvider.saveAddress(newAddress);
//move back
this.navCtrl.pop();
}
}
Firebase provider that uses AngularFireDatabase
import { Injectable } from '#angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
#Injectable()
export class FirebaseProvider {
constructor(public afd: AngularFireDatabase) { }
saveAddress(address) {
this.afd.list('/addresses').push(address);
}
updateAddress(key,dataToUpdate){
return this.afd.list('addresses').update(key,dataToUpdate);
}
}
I have also tried this but it has the same issue.
this.firebaseProvider.saveAddress(newAddress).then(result => {
// loadingSpinner.dismiss();
this.navCtrl.pop();
});
this.firebaseProvider.updateAddress(this.addressKey, updateItems)
.then(() => {
// loadingSpinner.dismiss();
this.navCtrl.pop()
});
The HTML of save button
<button type="button" ion-button full color="primary-blue" (click)='saveAddress()'>Save</button>
Looks like unsubscribing to the subscribers fixes the issue. The HomePage view had subscribers which were not unsubscribed. I added the Observable Subscriptions into the array and unsubscribed as per code below.
ionViewWillLeave(){
this.subscriptions.forEach(item=>{
item.unsubscribe();
});
}
the push method returs a promise with the result of the action. I would change the save method like this:
saveAddress(address) {
return this.afd.list('/addresses').push(address);
}
Then in the controller I’d change it in this way:
saveAddress(){
//save data to serve
this.firebaseProvider.saveAddress(newAddress).then(result => {
//do yours validations
this.navCtrl.pop();
});
}
With thos you tide up the navigation of the page to the result of the Firebase execution. Give it a try to this approach and let me know if it didn’t work, anyway I would use oninit to load data only once as I guess you wanna do it rather than ionViewDidEnter.
In an Ionic project i am using the code below to load a document collection from Firestore with the AngularFirestore wrappers.
Now that the content starts loading when the view was initialized i'm experiencing a delay by about 4-8 seconds until the firestore fetched data renders in my list-view, which is very very bad for the overall userexperience.
with the code below i'm able to show a loading spinner when the content starts loading bit i need it to stop showing the loader.
I have no clue how to trigger that event? Any help would be appreciated
thank you very much
import { City } from './../../model/City';
import { Component, AfterViewInit } from '#angular/core';
import { NavController, IonicPage, LoadingController } from 'ionic-angular';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
#IonicPage()
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements AfterViewInit {
citiesRef: AngularFirestoreCollection<City>
cities: Observable<City[]>;
loading = this.loadingCtrl.create({
content: 'Loading Regions...'
});
constructor(private loadingCtrl: LoadingController, private afs: AngularFirestore, public navCtrl: NavController) {
}
ngAfterViewInit(){
this.loading.present().then(()=>{
this.citiesRef = this.afs.collection<City>('regions', ref => ref.orderBy('name'));
this.cities = this.citiesRef.valueChanges();
})
}
}
Well, what I did was I subscribe to the this.cities. It worked in my case. The idea is it will fire loading.dismiss() once it is able to subscribe. Hope that helps
let loading = this.loadingCtrl.create({
content: 'Please wait...'
});
loading.present();
this.citiesRef=this.afs.collection('cities');
this.cities=this.citiesRef.valueChanges();
this.cities.subscribe(_=>{
loading.dismiss();
})
Followed the content of the url to implement dynamic menu items using JSON file stored under /assets/data. The menu is working fine with stored JSON file. Now I need to dynamically retrieve the JSON of same format in real time from a Salesforce API and display its content.
Can someone please suggest what changes I need to make here? should the json path in getMainMenu() method be replaced with the actual Saleforce API?
Below is the data-service.ts
import { Injectable } from '#angular/core';
import { Http, Response } from '#angular/http';
import 'rxjs/add/operator/map';
/*
Generated class for the DataServiceProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
#Injectable()
export class DataServiceProvider {
constructor(public http: Http) {
console.log('Hello DataServiceProvider Provider');
}
getMainMenu(){
return this.http.get('assets/data/mainmenu.json')
.map((response:Response)=>response.json().Categories);
}
}
and app.component.ts
import { Component, ViewChild } from '#angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { DataServiceProvider } from '../providers/data-service/data-service'
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = HomePage;
pages: any[]; //Array<{title: string, component: any}>;
mainmenu: any[];
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public dataService: DataServiceProvider) {
this.initializeApp();
this.dataService.getMainMenu().subscribe((Response)=>{
this.mainmenu = Response;
console.log(this.mainmenu);
});
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Home', component: HomePage },
{ title: 'List', component: ListPage }
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
toggleSection(i) {
this.mainmenu[i].open = !this.mainmenu[i].open;
};
toggleItem(i,j) {
this.mainmenu[i].SubCategories[j].open = !this.mainmenu[i].SubCategories[j].open;
};
}
It looks like you will need to update the url in the getMainMenu method to that of your api. There might be some other changes you will need to make, such as adding authentication headers, but if the data coming from the api is the same as whats stored in the assets folder, your component shouldn't care "where" the data comes from.