appsapp-module

appsapp-module for Ionicframework

Attention: Don't use it in production environment. It's an alpha version for a concept study.

This is an appsApp collection of high quality ui components with awesome backend and validation services full included. Now you build super sophisticated Angular/Ionic apps using TypeScript. Supports Angular's ngc and Ahead-of-Time compiling.

Circular condition validators are the unique selling points. You gonna love it!

Install

You need mobiscroll. So please obtain a licence (see https://www.mobiscroll.com/) and then run:

$ npm install -g @mobiscroll/cli

Once you have kickstarted your ionic app, you can import appsApp to your application by running:

$ mobiscroll config ionic
$ npm install appsapp-module --save

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import appsApp module
import { AppsappModule } from 'appsapp-module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppsappModule.initializeApp({
      apiKey: '**firebase-public-api-key**',
      projectId: '**firebase-project-id**'
    }, {
      saved: 'Die Änderungen wurden erfolgreich gespeichert.',
      processing: 'Die Verarbeitung läuft.',
      wait: 'Bitte warten.',
      done: 'Erfolgreich abgeschlossen.',
      submitted: 'Die Daten wurden übermittelt.',
      submittedInBackground: 'Die Daten wurden gespeichert und werden übermittelt, sobald eine Internetverbindung besteht.',
      disconnected: 'Die Verbindung wurde unterbrochen.',
      connected: 'Die Verbindung wurde wiederhergestellt.'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Create your first form app

Your component ts ends up with:

import {AppsappModuleProvider, PersistableModel, HasConditions, HasPrecision, HasLabel, IsDateRange, HasDescription} from "appsapp-module";
import {IsInt, Min, Max, IsIn} from "class-validator";

@Component({
  selector: 'page-home',
  template: ´
  <appsapp-input [model]="myModel"></appsapp-input>
  <button ion-button round outline (click)="save()" [disabled]="!myModel.hasChanges()">
    Änderungen speichern
  </button>
  ´
})

export class HomePage {

  myModel: myModel;

  constructor(public navCtrl: NavController, appsappModuleProvider: AppsappModuleProvider) {
    this.myModel = appsappModuleProvider.new(myModel);
  }

  save() {
    this.myModel.save();
  }

}


export class myModel extends PersistableModel {
  @IsInt() @Min(5) @Max(15) @HasDescription('please enter a number') number: number;
  @HasConditions([{property: 'number', value: 7, validator: 'min'}]) @HasLabel('Your text') text: string = 'test';
  @IsDateRange() daterange: object;
}

Congratulation, you have created your first form app with appsApp!

License

MIT © Michael Egli