1. 程式人生 > >Angular學習筆記-依賴注入入門

Angular學習筆記-依賴注入入門

依賴注入

依賴注入:Dependency Injection 簡稱DI
首先,當使用引數是物件的方法時,需要先例項化物件,再傳給方法。

var person = new Person();
addPerson(person);

於是我們說,addPerson方法依賴Person類,而Person類注入給addPerson方法。
我可真是個靈魂畫手!
然而,當addPerson需要多個引數時,則有

//例項化物件start
var person = new Person();
var sex = new Sex();
var adress = new Adress();
var order = new Order();
order.setAdress(adress);
//例項化物件end
addPerson(person,sex,order);

DI解決了例項化物件這個冗長的步驟,在依賴注入中,

控制反轉

控制反轉:Inversion of Control 簡稱IOC
控制反轉是指將依賴的控制權從程式碼內部移交到程式碼外部,實現控制反轉模式的框架叫做IOC容器,Angular是IOC容器的。

依賴注入和控制反轉的關係:
依賴注入和控制反轉是一體兩面的概念,控制反轉是目的,而依賴注入是手段,Angular就是使用了“依賴注入”手段,實現了控制反轉的目的。

var person = new Person();
addPerson(Person);
//如果把addPerson方法中的引數Person改成MockPerson,則需要改變內部程式碼new的過程
var product = new MockPerson();
addPerson(product );

而,依賴注入只需宣告,我需要一個person引數,至於這個引數是來源於Person類還是MockPerson類,與我無關,只需交付給外部程式碼操作。

使用依賴注入步驟

鬆耦性,可重用性和可測試性高

@NgModule({
    providers:[ProductService]
    //等價於
    //providers:[{provide:ProductService,useClass:ProductService}]
})
export class AppModule { }

@Component({
    ...省略元件配置
})
export class ProductComponent{
    product:Product;
    constructor(productService:ProductService){
        this.product = productService.getProduct();
    }
}

而當需要更改服務為AnotherProductService時,只需更改providers中的宣告,消除了ProductComponent和ProductService的耦合性。

@NgModule({
    providers:[{provide:ProductService,useClass:AnotherProductService}]
})
export class AppModule { }