Hello, I’m new to angular and ionic (started a few weeks ago) and I’m really pleased that the code style is similar to php with OOP classes etc. I’m loving it. I wanted to get some feedback on what I’m doing with my abstract class I wrote which all my page components extend.
I added all the basic services I need on most pages via injection so I don’t have to keep importing into each page. I just extend my page class. Will including these components slow down page module loading? or is the result more so pointers for classes that may or may not be used. All the pages are modules which are lazy loaded and extend this class at the component level. Good or bad idea? Lol I have a habit of not wanting to write the same lines over and over and I want my code to be cohesive in it’s intentions.
import { Injector} from '@angular/core';
import { AlertController, NavController, LoadingController, ViewController, ModalController} from "ionic-angular";
import { FormBuilder, FormGroup, Validators} from "@angular/forms";
import { Storage} from "@ionic/storage";
import { TokenService} from "../providers/token.service";
import { HttpService } from '../providers/http.service';
export abstract class Pages {
public nav:NavController;
public http:HttpService;
public form : FormGroup;
public formBuilder:FormBuilder;
public alert:AlertController;
public loading:LoadingController;
public view:ViewController;
public storage:Storage;
public tokenService:TokenService;
public modal: ModalController;
public spinner: any;
constructor(
injector: Injector
){
this.view = injector.get(ViewController);
this.nav = injector.get(NavController);
this.http = injector.get(HttpService);
this.alert = injector.get(AlertController);
this.loading = injector.get(LoadingController);
this.formBuilder = injector.get(FormBuilder);
this.storage = injector.get(Storage);
this.modal = injector.get(ModalController);
this.tokenService = injector.get(TokenService);
}
validators(){
return Validators;
}
}
And a page class looks like this:
import {Component, Injector} from '@angular/core';
import {IonicPage} from 'ionic-angular';
import {Pages} from "../pages";
@IonicPage({
name: 'profile',
segment: 'profile'
})
@Component({
selector: 'account-profile',
templateUrl: './profile.html'
})
export class Profile extends Pages{
public user : any;
constructor(
injector: Injector
){
super(injector);
this.form = this.formBuilder.group({
'email' : ['', //default value
[
this.validators().required,
this.validators().email,
this.validators().minLength(6)
]
],
'password' : ['', //default value
[
this.validators().required,
this.validators().minLength(8),
this.validators().pattern('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{6,25}$')
]
],
'password_confirmation' : ['', //default value
[
this.validators().required,
this.validators().minLength(8),
this.validators().pattern('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{6,25}$')
]
]
});
}
}