angualr4模板目錄及angular模塊解析

主文件目錄

my-dream-app
    e2e                      // 端到端測試
        app.e2e-spec.ts
        app.po.ts
        tsconfig.e2e.json
    node_modules/...         // npm包
    src/...                  // 源碼
    angular-cli.json         // 配置項
    .editorconfig            // 編輯器配置
    .gitignore               // git忽略文件配置
    karma.conf.js            // karma配置
    package.json             // npm配置
    protractor.conf.js       // 測試配置項
    README.md                // 項目說明
    tsconfig.json            // ts編輯器的配置
    tslint.json              // tslint配置項

src文件目錄

src
    app                      // 代碼的主要文件夾
        app.component.css    // 根組件樣式
        app.component.html   // 根組件模版
        app.component.spec.ts// 根組件測試
        app.component.ts     // 根組件腳本
        app.module.ts        // 根模塊
    assets                   // 靜態資源
        .gitkeep             // 保存空文件夾
    environments             // 環境配置
        environment.prod.ts
        environment.ts
    favicon.ico              // 圖標
    index.html               // 頁面主入口
    main.ts                  // 腳本主入口
    polyfills.ts             // 兼容瀏覽器
    styles.css               // 全局css樣式
    test.ts                  // 單元測試主入口

依賴模塊

"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/platform-browser": "^2.3.1",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/router": "^3.3.1",

@angular/core模塊

NgModule：模塊定義裝飾器
Component：組件定義裝飾器
Directive：指令定義裝飾器
Pipe ：管道定義裝飾器
PipeTransform：管道接口
Injectable：服務定義裝飾器
ElmentRef：元素引用
ViewChild：獲取子元素
Render：渲染
Input：接受參數輸入
Output：事件輸出
EventEmitter：觸發自定義事件

@angular/common

CommonModule：通用模塊，包含內置指令ngIf，ngFor

@angular/forms

FormsModule：定義模版驅動表單
ReactiveFormsModule：定義響應式表單
FormGroup, FormArray, FormControl, FormBuilder：響應式表單元素
Validators：表單校驗

@angular/http

HttpModule：http請求模塊

@angular/router

RouterModule 路由模塊
Routes 路由數據結構

@angular/platform-browser

platformBrowser：AoT編譯
BrowserModule：瀏覽器支持，注意該模塊導入了CommonModule，然後導出去，所以引用了這個模塊也就引用了CommonModule

@angular/platform-browser-dynamic

platformBrowserDynamic：JIT編譯

模塊的組成

@NgModuel({
    declarations: [],   // 用到的組件，指令，管道
    providers: [],      // 依賴注入服務 
    imports: [],        // 導入需要的模塊
    exports: [],        // 導出的模塊，跨模塊交流
    entryComponents: [] // 需提前編譯好的模塊
    bootstrap: []       // 設置根組件

})
export class AppModule { }