2020/12/09 angular-cli的配置文件汇总

文件目录

• e2e test-》 端到端（end-to-end）或者UI测试是一种测试方法，它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之，它从一个用户的角度出发，认为整个系统都是一个黑箱，只有UI会暴露给用户。

• node_modules->node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。

• src文件夹下包括（app、assets、environments、images、lib、index.html、main.ts、styles.scss、test.ts、polyfills.ts）

• app->整个应用，包括components、mock、services、app.components.html、app.components.scss、app.components.spec.ts、app.components.ts、app.module.ts、app.routing.ts、ng-zorro-antd.module.ts

• assets->包括feedback.js

• environments->environments.prod.ts、environments.stg.ts、environments.ts

src文件下的主文件入口
main.ts
负责引导整个angular应用的起点

//用来关闭angular开发者模式
import { enableProdMode } from '@angular/core';
//使用哪个模块来启动整个应用
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
//整个应用的主模块
import { AppModule } from './app/app.module';
//angular多环境支持
import { environment } from './environments/environment';

if (environment.production) {
  //如果是工厂模式，就启动enableProdMode来关闭开发者模式
  enableProdMode();
}
// 调用bootstrapModule方法来传入AppModule作为启动模块来启动应用。
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

app.module.ts
Angular 模块类描述应用的部件是如何组合在一起的。 每个应用都至少有一个 Angular 模块，也就是根模块， 用来引导并运行应用。 你可以为它取任何名字。常规名字是 AppModule。 也就是 app.module.ts文件

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

import { routing, AppRoutingModule } from './app-routing.module';//引用了路由文件
import { AppComponent } from './app.component';  //关联app-root 根组件

import { HttpClientModule } from '@angular/common/http';//通过HTTP协议实现前端应用和后端服务器的通讯
import { FormsModule } from '@angular/forms';表单数据绑定，表单验证需要的模块
import {ComponentsModule} from './components/components.module';

/*@NgModule 装饰器将 AppModule 标记为 Angular 模块类（也叫 NgModule 类）。
@NgModule 接受一个元数据对象，告诉 Angular 如何编译和启动应用*/
@NgModule({
  declarations: [  //引入当前项目运行的组件
    AppComponent, //关联app-root
  ],
   imports: [  //引入当前模块运行依赖的其他模块
    BrowserModule,
    ComponentsModule,
    HttpClientModule,
    FormsModule,
    ],
     providers: [],//定义的服务 回头放在这个里面
  bootstrap: [AppComponent]  //指定应用的主视图（成为根组件），通过引导根AppModule来启动应用，这里一般写跟组件
})

//根模块不需要到处任何东西，因为其他组件不需要导入根模块，但一定要写
export class AppModule { }

NgModule
NgModule 最根本的意义是帮助开发者组织业务代码，开发者可以利用 NgModule 把关系比较紧密的组件组织到一起，这是它最重要的功能。
NgModule 用来控制组件、指令、管道等的可见性，处于同一个 NgModule 里面的组件默认互相可见，而对于外部的组件来说，只能看到 NgModule 导出（ exports ）的内容，
NgModule 是 Router 进行异步加载的最小单位，Router 能加载的最小单位是模块，而不是组件。

指令

组件

import { Component, OnInit } from '@angular/core'; /*引入 angular 核心*/
@Component({
 selector: 'app-header', /*使用这个组件的名称*/
 templateUrl: './header.component.html', /*html 模板*/
 styleUrls: ['./header.component.css'] /*css 样式*/
})
export class HeaderComponent implements OnInit { /*实现接口*/
 constructor() { /*构造函数*/
 }
 ngOnInit() { /*初始化加载的生命周期函数*/
 }
}

Angular的完整启动过程
1.首先Angular应用在启动时会去angular.json中寻找要加载的页面和脚本。
默认加载的时index.html与main.ts，启动时在src目录中寻找资源
2.在main.ts中寻找主模块
3.在app.module中找到指定的主组件，默认的主组件是app.component
4.最后就是将组件渲染到index.html

模块
模块有两种：
1.框架代码以模块形式组织(文件模块);
2.功能单元以模块形式组件(应用模块);