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 { }