I have created a service and am trying call the service from a method in a page. I am not sure what I have defined wrong and would appreciate any insight. The statement:
this.userService.login(this.loginForm.username, this.loginForm.password)
Is where the error is at. It indicates that there is no property type on userService for login… not sure why the method is not accessible.
Here is the Typescript for the Page:
import {Page, NavController, Platform} from 'ionic-angular';
import {FormBuilder, Validators} from '@angular/common';
import {HomePage} from '../../pages/home/home';
import {UserService} from '../../providers/user-service';
/*
Generated class for the LoginPage page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Page({
templateUrl: 'build/pages/login/login.html',
})
export class LoginPage {
loginForm: any;
jsonData: any;
un:string;
pw:string;
constructor(public nav: NavController, public formBuilder:FormBuilder, public userService:UserService) {
//this.userService = userService;
this.loginForm = formBuilder.group({
username: ['',Validators.required],
password: ['',Validators.required]
})
}
login(event): void {
this.userService.login(this.loginForm.username, this.loginForm.password)
.then(data => {
this.jsonData = data;
});
// Prevent the default action
event.preventDefault();
// Call teh backend service to log the user in
this.nav.setRoot(HomePage);
}
}
Here is the Service
import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import {Storage, SqlStorage} from 'ionic-angular';
import 'rxjs/add/operator/map';
/*
Generated class for the UserService provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
@Injectable()
export class UserService {
data: any = null;
constructor(public http: Http, public storage:Storage) {
// Define the storage
this.storage = new Storage(SqlStorage);
// Create the table if it does not exist
this.storage.query("CREATE TABLE IF NOT EXISTS User (userId PRIMARY KEY, roleId INTEGER, themeId INTEGER, firstName TEXT, lastName TEXT, emailAddress TEXT, password TEXT, active STRING, approver INTEGER, salesOffice TEXT, reportsToId INTEGER, lastLoginDate STRING, createDate STRING, lastUpdate STRING)")
.then((data) => {console.log('USER TABLE CREATED ->' + JSON.stringify(data.res)); },
(error) => {console.log('Error ->' + JSON.stringify(error.err));
});
}
save(user) {
// Create the insert statement
let sql = 'INSERT INTO User (userId, roleId, themeId, firstName, lastName, emailAddress, password, active, approver, salesOffice, reportsToId, lastLoginDate, createDate, lastUpdate) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?)';
// return the promise
return this.storage.query(sql,[user.userId,user.roleId,user.themeId, user.firstName, user.lastName, user.emailAddress, user.password, user.active, user.approver, user.salesOffice, user.reportsToId, user.lastLoginDate, user.createDate, user.lastUpdate]);
}
find() {
// Should only be one user to get
let sql = 'SELECT * FROM User';
return this.storage.query(sql);
}
login(username:string, password:string) {
return new Promise(resolve => {
// We're using Angular Http provider to request the data,
// then on the response it'll map the JSON data to a parsed JS object.
// Next we process the data and resolve the promise with the new data.
this.http.get('http://localhost:8080/mobile/api/login?username=' + username + '&password=' + password)
.map(res => res.json())
.subscribe(data => {
// we've got back the raw data, now generate the core schedule data
// and save the data for later reference
this.data = data;
resolve(this.data);
});
});
}
load() {
if (this.data) {
// already loaded data
return Promise.resolve(this.data);
}
// don't have the data yet
return new Promise(resolve => {
// We're using Angular Http provider to request the data,
// then on the response it'll map the JSON data to a parsed JS object.
// Next we process the data and resolve the promise with the new data.
this.http.get('path/to/data.json')
.map(res => res.json())
.subscribe(data => {
// we've got back the raw data, now generate the core schedule data
// and save the data for later reference
this.data = data;
resolve(this.data);
});
});
}
}
