Angular 学习笔记 001 文件结构

最新推荐文章于 2025-02-05 11:13:10 发布

原创最新推荐文章于 2025-02-05 11:13:10 发布 · 379 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular #typescript

Angular 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了Angular项目的文件结构，重点分析了根模块App.module.ts的作用及其内部配置，包括声明的组件、导入的模块、提供的服务及启动的默认模块。

Angular 学习笔记 001 文件结构

废话不说直接上图
Angular-Folder-01
Node-Modules
foldersrc

看完了框架基本目录结构之后我们来看看代码文件夹src/app里面的根模块。
folder-src-app
App.module.ts – 根模块 – 告诉Angular怎么组装加载应用的

// 浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';
// Angular 核心模块
import { NgModule } from '@angular/core';
// 根组件
import { AppComponent } from './app.component';

// @NgModule是装饰器，目的是通知Angular按照里面指定的数据元来编译启动程序
@NgModule({
  declarations: [		//	配置组件 - ng g component
    AppComponent,
    HomeComponent,
  ],
  imports: [			// 配置当前模块依赖的其他模块
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    
  ],
  providers: [],		// 配置项目需要的服务 - ng g service
  bootstrap: [AppComponent]  // 启动的默认模块
export class AppModule { }	// 暴露根模块-表示根模块不需要导出任何东西，其他模块不需要引入根模块
})