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

版权声明：本文为博主原创文章，未经博主允许欢迎转载，请注明原文链接。一起交流，共同进步。 https://blog.csdn.net/newbie_907486852/article/details/83176980

                                             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';//声明数据
}

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、项目结构详解

目录结构分析

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代码规则

 
    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语法