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