This is the style guide defined by Okode for the development of apps with Ionic / Angular.

• Project layout
• Modules and lazy load
  • App Module
  • IonicPageModule
  • Rest of modules
• Generator
  • Pages
  • Components
  • Directives
  • Pipes
  • Services
• Models
• FormModels (optional tool)
• Tests > TODO

└── src
    ├── app
    │   ├── app.component.ts
    │   ├── app.html
    │   ├── app.module.ts
    │   └── main.ts
    │   
    ├── pages           |
    ├── components      |
    ├── directives      |    (Ionic/Angular pieces: create using generator)
    ├── pipes           |
    ├── services        |
    │
    ├── models
    ├── utils
    │
    ├── assets
    ├── theme
    └── index.html

· App module: Using IonicModule to bootstraps Ionic App.
· IonicPageModule: Lazy modules.
· Rest of modules: For each component, directive or pipe, the generator will create its module to be imported into the modules of the pages that need them.

IonicModule is an NgModule that bootstraps an Ionic App. By passing a root component, IonicModule will make sure that all of the components, directives, and providers from the framework are imported.

@NgModule({
  declarations: [MyApp],
  bootstrap: [IonicApp],
  entryComponents: [MyApp],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  providers: []
})
export class AppModule { }

IonicPageModule is an NgModule that bootstraps a child IonicPage in order to set up routing. Load of this module is lazy

@NgModule({
  declarations: [ MyPagePage ],
  imports: [
    IonicPageModule.forChild(MyPagePage),
    // Components, directives or pipes modules can be imported here
  ],
})
export class MyPageModule {}

For each component, directive or pipe, the generator will create its module to be imported into the modules of the pages that need them. These modules can be imported into the IonicPageModule (in one or several of them), or only in App Module (if it's going to be used for a large number of pages).

To use Okode Generator in a Ionic project, package.json needs @okode/app-scripts as devDependencies and define generator script alias:

  "scripts": {
    "okode:generator": "okode-app-scripts generator",
  },
  "devDependencies": {
    "@okode/app-scripts": "https://github.com/okode/okode-app-scripts#develop", 
  }

Usage:

$ npm run okode:generator TYPE NAME`
       TYPE must be one of: page, component, directive, pipe, service
       NAME must be lowercase with - separating words: looks-like-this

@IonicPage

$ npm run okode:generator page my-page

└── pages
    └── my-page
        ├── my-page.html
        ├── my-page.module.ts
        ├── my-page.scss
        └── my-page.ts

· IonicPage Doc
· IonicPageModule Doc

@Component

$ npm run okode:generator component my-component

└── components
    └── my-component
        ├── my-component.html
        ├── my-component.module.ts
        ├── my-component.scss
        └── my-component.ts

· Angular Component Doc

@Directive

$ npm run okode:generator directive my-directive

└── directives
    └── my-directive
        ├── my-directive.module.ts
        └── my-directive.ts

· Angular Directive Doc

@Pipe

$ npm run okode:generator pipe my-pipe

└── pipes
    └── my-pipe
        ├── my-pipe.module.ts
        └── my-pipe.ts

· Angular Pipe Doc

@Injectable

$ npm run okode:generator services my-service

└── services
    └── my-service.ts

· Angular Injectable Doc
· Angular Dependency Injection Doc

All models will be interfaces and will be placed in the models folder (see layout). Some model files can have exportable utility functions to transform data.

Example of models\person.ts:

export interface Person {
  name: string;
  lastname: string;
  email?: string;
  phone?: number;
}

export function getFullName(person: Person) {
  return person.name + ' ' + person.lastname;
}

Strategy used to generate dynamic forms (Angular Form Builder) based on models. Used in iMediador project.

The objective is not to have to re-map models when building a FormGroup with the Angular FormBuilder and to do it automatically with the use of decorators in the model.

We need:
· FormModels
· FormProp decorator

To make this, we need to change model interface to model class, and add decorator to form fields:

import { FormProp } from '../utils/decorators';
export class Person {
  id: number;
  @FormProp() name: string;
  @FormProp() lastname: string;
  
  @FormProp([Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')])
  email?: string;
}

A validator or list of validators can be passed to @FormProp decorator (like Angular Form Builder).

And to get the FormGroup from a page or component:

import { FormGroup } from '@angular/forms';
import { Person } from '../../models/person';
import { FormModels } from '../../utils/form-models';

let data = { name: 'John', lastname: 'Mock' } as Person; // data param to set initial value (optional)
let personForm: FormGroup = FormModels.buildForm(Person, data);

  <form [formGroup]="personForm">
    <ion-item>
      <ion-label floating>Name</ion-label>
      <ion-input type="text" formControlName="name"></ion-input>
    </ion-item>
    ...