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