angular 标准目录结构_Angular 10 目录详解
angular 10.x 目录详解
1. 根目录文件
e2e (end-to-end)端到端测试目录
node_modules 依赖包
src 应用程序源代码目录
.browserslistrc 目标浏览器配置表
.editorconfig 编辑器配置文件
.gitignore 指定git需要忽略的不必跟踪的文件
angular.json Angular项目配置文件，包含环境，测试，代理，第三方资源 和 内置工具等。(旧版本angular-cli.json)
karama.conf.js 测试配置文件，karma是单元测试的执行器，karma.conf.js是karma的配置文件
package.json 这是一个标准的npm工具的配置文件，这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新建项目的时候，等了半天就是在下载第三方依赖包。下载完成后会放在node_modules这个目录中，后期我们可能会修改这个文件。
tsconfig.app.json TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件
tsconfig.json 文件与TypeScript编译器(tsc)的配置相对应
tslint.json 规范 TS 和 Angular 的代码书写
2. src目录文件
src目录 存放应用代码包括 组件，模板，样式等
app 包含应用的组件和模块，我们要写的代码都在这个目录中
assets 资源目录，存储静态资源，如图片
environments 环境配置，Angular是支持多环境开发的，我们可以配置不同的环境(生产环境，开发环境，测试环境)来进行开发
favicon.ico icon图标
index.html 主页面，根html
main.ts 项目的入口
polyfills.ts 主要是用来导入一些必要库，为了让Angular在老版本下正常运行
styles.scss 样式文件
test.ts 自动化测试文件
app>components 组件目录
3. app目录
app目录存放项目的组件和模块，我们在新建项目的时候命令行默认生成了 app模块和组件，app组件相当于项目根组件。
3.1 模块
app.module.ts
/*这个文件是 Angular 根模块， 告诉 Angular 如何组装应用*/
// BrowserModule 浏览器解析的模块import { BrowserModule } from '@angular/platform-browser';
// Angular 核心模块import { NgModule } from '@angular/core';
// 组件模块 路由组件模块 根组件模块 自定义组件模块import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewsComponent } from './components/news/news.component';
// @NgModule装饰器 @NgModule接受一个元数据对象(就当做一个方法)，告诉Angular如何编译和启动应用@NgModule({
declarations: [ // 配置当前项目运行的组件 AppComponent,
NewsComponent
],
imports: [ // 配置当前模块运行依赖的其他模块 BrowserModule,
AppRoutingModule
],
providers: [], // 配置项目所需要的服务 bootstrap: [AppComponent] // 指定应用的主视图(称为根组件) 通过引导根 AppModule 来启动应用， 这里一般写的是根组件})
// 暴露根模块 跟模块不需要导出任何东西， 因为其他组件不需要导入根模块export class AppModule { }
3.2 组件
app.component.ts && new.component.ts 这都是组件文件
// app.component.ts
// 从 angular核心模块中引入component装饰器
import { Component } from '@angular/core';
/*用装饰器定义了一个组件以及组件的元数据 所有的组件都必须使用这个装饰器来注解*/
@Component({
/*
* 组件元数据 Angular会通过这里面的属性来渲染组件并执行逻辑
* selector 就是css选择器，表示这个组件可以通过来调用
* templateUrl 组件的html模板，定义了组件的布局和内容
* styleUrls 组件的样式模板，定义了组件的样式
*/
selector: 'app-root', // 使用这个组件的名称
templateUrl: './app.component.html', // html
styleUrls: ['./app.component.scss'] // css
})
/*
AppComponent本来就是一个普通的typescript类，但是上面的组件元数据装饰器告诉Angular，
AppComponent是一个组件，需要把一些元数据附加到这个类上，Angular就会把AppComponent当组件来处理
*/
export class AppComponent { // 暴露 AppComponent 模块
title = 'a-ts-project'; //定义属性
constructor() {/*构造函数*/}
}
3.2.1 组件创建
// 创建
// ng g component 组件名称
> ng g component news
// 指定目录创建组件
// ng g component 指定目录+组件名称
ng g component components/news