Code Review: Abstract Page Class

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}$')
                ]
            ]
        });
    }
}

Please don’t take my opinion as gospel on this, but I have come to really dislike inheritance over the years in general, and much more so when dealing with JavaScript, which has zero language support for it. I much prefer composition. Inheritance makes code significantly harder to read, because it is unclear what is defined where. If you do insist on going down this road, though, there is no need to interact directly with Injector. Simply add access qualifiers to constructor parameters and TypeScript will automatically declare appropriately named parameters and initialize them for you.

Thanks for the reply. I’ve been reading a lot more on the topic of inheritance vs composition you are correct. Injection is bandaid that can become a pain to pull off your leg, lol.

Do you need all this stuff on each page? If not, importing it is a waste of cycles.