angular4 整體架構

1.Angular程序架構：

　　

 

2.組件Component架構：

　　

必備元素：

　　裝飾器@Component()：組件元數據裝飾器，聲明一個組件；

　　模板Template：頁面渲染，其實就是html文件，可以使用angular的指令與控制器進行數據綁定；

　　控制器Controller：用來編寫頁面大部分業務邏輯；

　　在代碼中的呈現如下：

　　　　

可選的可注入對象：

　　輸入屬性@inputs()：接收外部傳入數據，使得父組件可以傳遞數據給子組件；

　　提供器provides：用於依賴注入；

　　生命周期鈎子Lifecycle Hooks：在組件從創建到銷毀的過程中，有多個鈎子可以觸發和執行各種業務邏輯；

可選輸入對象：

　　樣式表styles：提供組件專用的樣式；

　　動畫Animations：angular提供了動畫包來實現組件的動畫效果，如淡化淡出；

　　輸出屬性@outputs()：用來輸入其他屬性可能會用到的事件，或者在組件之間共享數據；

 

3.Module模塊代碼結構：

模塊在代碼中的文件形式xxx.module.ts，如下，對模塊的代碼內容進行分析：

　　

　　@NgModule：聲明一個模塊；

　　declarations屬性：聲明 組件、 指令和 管道；

　　imports屬性：聲明需要用到的 其他模塊，當引用了其他模塊，便可以使用那些模塊的指令、組件和服務；

　　providers屬性：聲明該模塊中提供了什么 服務；

　　bootstrap屬性：聲明該模塊的 主組件，即啟動組件；

NgModule接口：

interface NgModule {
     // providers: 這個選項是一個數組,需要我們列出我們這個模塊的一些需要共用的服務
     //            然后我們就可以在這個模塊的各個組件中通過依賴注入使用了.
    providers : Provider[]
     // declarations: 數組類型的選項, 用來聲明屬於這個模塊的指令,管道等等.
     //               然后我們就可以在這個模塊中使用它們了.
    declarations : Array<Type<any>|any[]>
     // imports: 數組類型的選項,我們的模塊需要依賴的一些其他的模塊,這樣做的目的使我們這個模塊
     //          可以直接使用別的模塊提供的一些指令,組件等等.
    imports : Array<Type<any>|ModuleWithProviders|any[]>
     // exports: 數組類型的選項,我們這個模塊需要導出的一些組件,指令,模塊等;
     //          如果別的模塊導入了我們這個模塊,
     //          那么別的模塊就可以直接使用我們在這里導出的組件,指令模塊等.
    exports : Array<Type<any>|any[]>
    // entryComponents: 數組類型的選項,指定一系列的組件,這些組件將會在這個模塊定義的時候進行編譯
    //                  Angular會為每一個組件創建一個ComponentFactory然后把它存儲在ComponentFactoryResolver
    entryComponents : Array<Type<any>|any[]>
    // bootstrap: 數組類型選項, 指定了這個模塊啟動的時候應該啟動的組件.當然這些組件會被自動的加入到entryComponents中去
    bootstrap : Array<Type<any>|any[]>
    // schemas: 不屬於Angular的組件或者指令的元素或者屬性都需要在這里進行聲明.
    schemas : Array<SchemaMetadata|any[]>
    // id: 字符串類型的選項,模塊的隱藏ID,它可以是一個名字或者一個路徑;用來在getModuleFactory區別模塊,如果這個屬性是undefined
    //     那么這個模塊將不會被注冊.
    id : string
 }

 https://segmentfault.com/a/1190000007187393