十、angular组件、模块、项目结构详解

淡淡的烟草味﹌ 2022-05-10 15:50 233阅读 0赞

#                                              angular组件、模块、项目结构详解 #

### 1、组件结构分析 ###

组件=装饰器+模板+控制器  
组件（ts文件）：将页面上的能够复用的区域（块）封装在一个ts文件中  
装饰器（@Component）：告知angular框架如何处理TypeScript类  
模板（html文件）：定义组件外观，如何渲染组件（html展示组件外观）  
控制器（TypeScript类）：控制器通过数据绑定与模板通讯，模板展示控制器数据，控制器处理模板上发生的事件（与模板通讯、处理模板事件）

app.component.ts：

import { Component } from '@angular/core';//导入的是angular/core核心包
    
    @Component({//装饰器
      selector: 'app-root',//选择器：可以使用<app-root></app-root>标签引用这个组件
      templateUrl: './app.component.html',//模板：组件的外观、与控制器通讯
      styleUrls: ['./app.component.css']//模板的样式
    })
    export class AppComponent {//控制器：处理模板事件、与模板通讯
      title = 'auction';//声明数据
    }

![在这里插入图片描述][70]

### 2、模块详解 ###

类似于组件，都是用装饰器修饰的TypeScript类：

import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppComponent } from './app.component';
    
    @NgModule({//装饰器
      declarations: [//声明模块有什么（只能声明组件、指令、管道）
        AppComponent
      ],
      imports: [//声明引用的其他模块
        BrowserModule
      ],
      providers: [],//声明模块中提供的服务
      bootstrap: [AppComponent]//声明模块的主组件是什么
    })
    export class AppModule { }//控制器

### 3、项目结构详解 ###

目录结构分析  
![在这里插入图片描述][70 1]

e2e:端对端的自动测试
    
    node_modules：第三方依赖包
    
    src：项目源码目录
    
    .editorconfig：webstorm配置文件
    
    .gitignore：git配置文件
    
    angular.json：angular命令行工具的配置文件（引入第三方包）
    
    package.json：npm配置工具的配置文件
    
    package-lock.json：用以记录当前状态下实际安装的各个npm package的具体来源和版本号
    
    README.md：生成项目的标准说明
    
    tsconfig.json：指定了用来编译这个项目的根文件和编译选项
    
    tslint.json：tslint配置文件，检查TypeScript代码规则

![在这里插入图片描述][70 2]

src
    ├── app  // 应用的组件、模块
    │   ├── app.component.css  // css样式文件
    │   ├── app.component.html // html模板文件
    │   ├── app.component.spec.ts  // 测试用例
    │   ├── app.component.ts   // 组件
    │   └── app.module.ts      // 模块
    ├── assets  // 资源目录，存储静态资源的,比如图片
    ├── browserslist
    ├── environments // 环境配置。比如开发、测试、生产环境做不同配置
    │   ├── environment.prod.ts 
    │   └── environment.ts
    ├── favicon.ico    // 网站标志图标
    ├── index.html     // 整个应用的根html，程序启动就是访问这个页面
    ├── karma.conf.js  // 前端单元测试Karma配置
    ├── main.ts      // 项目入口，通过这个文件来启动项目
    ├── polyfills.ts // 主要是用来导入一些必要库, 兼容老版本
    ├── styles.css   // 全局的样式文件
    ├── test.ts      // 自动化测试用的
    ├── tsconfig.app.json   // 指定ts编译的一些参数信息
    ├── tsconfig.spec.json  // 测试
    └── tslint.json  // JSLint检测js语法

[70]: /images/20220505/8dca6528f5ca4dbca9bfeb30ca30d733.png
[70 1]: /images/20220505/1ea9c2af9e7044f5915b078613aea299.png
[70 2]: /images/20220505/9de3ad12e0ee45a9bf81c47620b7b86e.png