angular6项目目录结构分析、app.module.ts分析（二）

最新推荐文章于 2025-08-07 06:41:36 发布

原创最新推荐文章于 2025-08-07 06:41:36 发布 · 830 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

angular

本文详细分析了Angular6项目的目录结构，包括各个文件和目录的作用，以及它们如何组织形成项目的整体架构。接着深入探讨了app.module.ts的核心功能，解释了模块导入、声明、提供者等关键概念，帮助读者理解Angular应用的启动流程和依赖注入机制。

1.目录结构分析

在这里插入图片描述

e2e:用来做自动化测试的
node_modules:存放第三方依赖包
src:应用源代码
.editorconfig:编辑器配置文件
.gitignore:git配置文件
package-lock.json:锁定了npm install下载的依赖包的版本
package.json:npm配置文档
README.md:项目说明文档
tsconfig.json:typeScript编译器的配置
tslint.json:tslint的配置文件，用来检查代码质量

在这里插入图片描述

app:组件，app.module.ts
assets:静态资源
environments:环境配置文件
browserslist:做浏览器兼容
index.html:应用的根html
karma.config.js:karma单元测试配置文件
main.ts:项目入口点
polyfills.ts:导入一些依赖库，让项目能正常运行在老浏览器
styles.css:全局的css
test.ts:自动化测试文件
tsconfig.app.json:typeScript编译器的配置
tsconfig.spec.json:typeScript编译器的配置
tslint.json:tslint的配置文件，用来检查代码质量

2.app.module.ts

import { BrowserModule } from '@angular/platform-browser'; //BrowserModule,浏览器的解析模块
import { NgModule } from '@angular/core';//angular核心模块

import { AppComponent } from './app.component';//根组建

@NgModule({ //装饰器
  declarations: [//声明组件、指令、管道
    AppComponent
  ],
  imports: [ //引入项目需要的模块
    BrowserModule
  ],
  providers: [],//声明模块中提供的是什么服务
  bootstrap: [AppComponent]//声明模块的组件是什么
})
export class AppModule { } //类