ionic2 study

Studying ionic2, angular2 & typescript (a YouTube look like theme)

Set it up

It is a ionic project, which means a node project, so start installing dependencies by npm install & restore plugins

1. Install NPM dependencies

    $ npm install

2. Install ionic cordova dependencies

    $ ionic state restore

Executing

Start it just like a server to run in browser

    $ ionic serve

PUG

PUG is a HTML pre-compiler, which means that it have a specific semantic to generate the final HTML files. Check it Documentation

ionic tutorial

files & structure

• app.module.ts: def the app settings (config), like: tabs (top, bottom...), hide or not titles...

• app.component.ts: basic the same as ng-app/app.js in ionic1 (bootstrap/launch), MyApp hass a rootPage attribute

• app.html: main/initial content loader. the ion-nav root set the initial page, it tag can have settings like switchBack

• theme: @import the scss from pages folders into ./src/app/app.scss

• material_icons added

• newPage:

  1. Automatic by command:

         $ ionic g page MyPage

  2. Manually:
     1. create the folder with it name at ./src;
     2. create it files name.html, name.ts, name.scss;
     3. create the class, with export, inside the .ts;

           export class NameNewPage {}

     4. import it into app.module.ts;
        • add to: declarations & to entryComponents

           import {NameNewPage} from '../pages/name_new_page/name_new_page';

     5. import it into the tabs.ts:
        • create a variable referencing it:

              tabNRoot: any = NameNewPage; 

        • add it tabs.html (here the tabNRoot change state which change property val):

            <ion-tab [root]="tabNRoot" tabTitle="Title" tabIcon="icon"></ion-tab>

• Pipe and Filter Angular:

  1. Just the same like angular1, just the directive has changed. Angular2 Pipe Docs.

        <tag *ngFor="array | filter:arg1:arg2"></tag>

• Binding Dynamic HTML Properties & Events:

  1. Dynamic attr with no overwrite warnings:

        <tag [anyProperty]="classAttrO.attrORexpression"></tag>

  2. Right Way to dynamic change/bind property (do not use [class]="expression", because it overwrite all classes)

         <tag [class.nameClassToShowIfExpressionOK]="obj.attrORexpression"></tag> 

  3. Dynamic Event (use "()" intead of "[]"))

        <tag (click)="componentMethod()"></tag>

  4. Additional event datas

        <input type="text" (keydown)="showKey($event)">

        class AnyClass {
            showKey(event) {
                alert(event.keyCode);    
            }
        }

  5. The default Angular2 ngModel works good (notice: "()" means ngModel is an event (one-way-binding) and "[]", means it is a tag attr (the other one-way-binding)):

        <input type="text" [(ngModel)]="componentClassAttr">

• Dependency Injection

  1. Sign the Service as Injectable and define it constructor method

        import {Injectable} from '@angular/core';
        @Injectable()
        export class NameClassService {
            obj;
            getService() {
                return this.obj;
            }
        }

  2. Turn it visible adding on main.ts in provider section

        import {NameClassService} from './name-class.service';
        
        @NgModule({
            providers: [NameClassService]
        })

  3. Import it on a component and create the constructor

          constructor(private raceService: RaceService){}

  4. add it to ngOnInit

         export class Component {
            ngOnInit() {
                this.races = this.raceService.getRaces();
            }
        }

• Http

  1. ensure to include http libs (main.ts)

        // HttpModule already have provider http defined
        import {HttpModule} from '@angular/http';
        @NgModule({
            import: [HttpModule]
        })

  2. tell injector about http provider (app.component.ts)
  3. inject the http dependency into the service (service.ts)

        import {Injectable} from '@angular/core';
        import {CarPart} from './car-part';
        import {Http} from '@angular/http';
        import 'rxjs/add/operator/map';
     
        @Injectable()
        export class DataService {
            constructor(private http: Http){}
            getCarParts() {
                let obervable = this.http.get(URL);
                // response = param var name for callback function
                // foreach response (response.json)
                // .data = the JSON attr
                return obervable.map(response => <CarPart[]> response.json().data);
            }   
        }

  4. Listen data returned from the request (component.ts)

        export class Component {
            ngOnInit() {
                // carParts = param var name for callback function
                this.dataService.getCarParts()
                    .subscribe(carParts => this.carParts = carParts);
            }
        }

  5. Preventing async bug (expecting some var that is fetching from server)

         .. class ... {
             totalCarParts() {
                 if(Array.isArray(this.carParts)) {
                     for ...
                         sum += this.carPart...
                 }
             } 
        }