Angular – Component Lifecycle

Angular 會管理 component 的 整個 lifecycle,也提供了 component lifecycle hook 讓使用者可以在這些時間點加入我們自己的作業。

  • Directives 和 components 皆有的 hook:ngOnInit、ngOnChanges、ngDoCheck、ngOnDestroy
  • 只有 components 有的 hook:ngAfterContentInit、ngAfterContentChecked、ngAfterViewInit、ngAfterViewChecked

Component life cycle hook 的順序如下:

1.ngOnChanges – 在 ngOnInit 之前,當綁定的輸入屬性的值發生變化時

2.ngOnInit – 在首次 ngOnChanges 後

3.ngDoCheck – 每次 change detection cycle 時

4.ngAfterContentInit

5.ngAfterContentInit

6.ngAfterContentChecked

7.ngAfterViewInit

8.ngAfterViewChecked

9.ngOnDestroy

參考資料來源

Angular – Component Lifecycle

Angular – ngOnInit vs constructor

在 angular component 中,可以使用 ngOnInit 和 constructor 來做初始化的動作,兩者的差別在於:

constructor 是 class 初始化時 default 執行的 method,而 ngOnInit 是 angular life cycle hook 的其中一部分,執行的時間是 constructor 和首次 ngOnChanges 之後

EX :

export class App implements OnInit {
  
  constructor(){
     //called first time before the ngOnInit()
  }

  ngOnInit(){
     //called after the constructor and called  after the first ngOnChanges() 
  }
}

所以建議的方式為:使用 constructor 來做 dependency injection 的設定,其他實際要執行的初始化作業則都放在 ngOnInit 中執行。

 

 

Angular – ngOnInit vs constructor

Hibernate – Implement UserType

在 Hibernate 中自定義類型,可 implement UserType 來實作

EX :

public class StringJsonUserType implements UserType {
    ....
}

以下是每個 method 的說明:

1.isMutable

public boolean isMutable() { ... }

-> 表示該類型的實例是否為可變

2.sqlTypes

public int[] sqlTypes() { ... }

-> 該類型對應的 sql 類型

3.returnedClass

public Class returnedClass() { ... }

-> 改變類型對應的 java 類型

4.deepCopy

public Object deepCopy(Object value) 
    throws HibernateException { ... }

-> 定義該類型如何複製

5.equals

public boolean equals(Object x, Object y) 
    throws HibernateException { ... }

-> 定義該類型如何為相等

6.nullSafeGet

public Object nullSafeGet(ResultSet rs, String[] names, 
                          SessionImplementor session, Object owner) 
    throws HibernateException, SQLException { ... }

-> 定義資料讀取的方式

7.nullSafeSet

public void nullSafeSet(PreparedStatement st, Object value, 
                        int index, SessionImplementor session) 
    throws HibernateException, SQLException { ... }

-> 定義資料保存的方式

 

 

 

 

Hibernate – Implement UserType

TypeScript – Interface

Just as TypeScript supports inheritance, it also supports interfaces.
We can define an interface and then implement it in one or more classes.

EX:

interface tax {
    taxpayerId: string;
    calculateTax(): number;
}

class IncomeTax implements tax {
    taxpayerId: string;
    calculateTax(): number {
        return 10000;
    }
}

class ServiceTax implements tax {
    taxpayerId: string;
    calculateTax(): number {
        return 2000;
    }
}

Convert ts to js:

var IncomeTax = (function () {
    function IncomeTax() {
    }
    IncomeTax.prototype.calculateTax = function () {
        return 10000;
    };
    return IncomeTax;
}());
var ServiceTax = (function () {
    function ServiceTax() {
    }
    ServiceTax.prototype.calculateTax = function () {
        return 2000;
    };
    return ServiceTax;
}());
TypeScript – Interface

TypeScript – Types

types 是 typescript 主要的 improvement,對於在寫 code 或是讀 code 的時候都有很大的幫助,可以避免型態類型的 bug 發生。

typescript 的語法是演化自 ES5,對於變數定義的語法還是使用 var,但是現在我們可以在 name 的後方加上變數的 type,例如:

var name: string;

宣告 function 時也可以在 arguments 或 return values 後加上 type:

function sayHello(name: string): string {
    return "Hello " + name;
}

typescript 內建的 type 有以下幾種:

  • string
var name: string = 'Jack';
  • number
var year: number = 2016;
  • boolean
var passTest: boolean = true;
  • array
var usernames: Array<string> = ['Jack', 'John', 'Jay'];
var usernames: string[] = ['Jack', 'John', 'Jay'];
var userids: Array<number> = [1, 2, 3];
var userids: number[] = [1, 2, 3];
  • enums

enums 是用來命名數字類型的 values,例如球員位置的定義可以使用:

enum Position {PG, SG, SF, PF, C };
var position: Position = Position.PG;
  • any

any 為 type 的預設值,代表任何 type 皆允許

var anything: any = 'as string';
    anything = 1;
    anything = [1, 2, 3];
  • void

void 通常使用在沒有回傳值的 function 上

function setName(name: string): void {
    this.name = name;
}

 

 

 

 

TypeScript – Types