配置文件介绍及应用启动流程

一、项目目录

二、配置文件介绍

File 文件 Purpose 用途
favicon.ico 网站在书签栏显示的图标
index.html 这是别人访问你的网站是看到的主页面的HTML文件。 大多数情况下你都不用编辑它。
main.ts 这是应用的主要入口点。启动根模块AppModule，使其运行在浏览器中。
polyfills.ts 不同的浏览器对Web标准的支持程度也不同。 填充库（polyfill）能帮我们把这些不同点进行标准化。
styles.css 全局样式。
test.ts 这是单元测试的主要入口点。
tsconfig.app.json,tsconfig.spec.json TypeScript编译器的配置文件。tsconfig.app.json是为Angular应用准备的，而tsconfig.spec.json是为单元测试准备的。
.angular-cli.json Angular CLI的配置文件。 在这个文件中，我们可以设置一系列默认值，还可以配置项目编译时要包含的那些文件。
.editorconfig 给你的编辑器看的一个简单配置文件，它用来确保参与你项目的每个人都具有基本的编辑器配置。
.gitignore 一个Git的配置文件，用来确保某些自动生成的文件不会被提交到源码控制系统中。
karma.conf.js 给Karma的单元测试配置，当运行ng test时会用到它。
package.json npm配置文件，其中列出了项目使用到的第三方依赖包。
protractor.conf.js 给Protractor使用的端到端测试配置文件。
tsconfig.json TypeScript编译器的配置
tslint.json 给TSLint和Codelyzer用的配置信息，当运行ng lint时会用到。 Lint功能可以帮你保持代码风格的统一。

三、应用启动流程

  • angular-cli.json
    ng serve ==> 命令会去angular-cli.json中查找进入app的入口 ==> 找到关键字main对应的文件“main.ts”。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
]
  • main.ts 启动程序会根据main.ts中的内容启动一个app.module的模块
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    import { enableProdMode } from '@angular/core';
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

    import { AppModule } from './app/app.module';
    import { environment } from './environments/environment';

    if (environment.production) {
      enableProdMode();
     }
    platformBrowserDynamic().bootstrapModule(AppModule)
     .catch(err => console.log(err));
  • app.module.ts app.module.ts 中定义模块中具体的组件，AppComponent组件
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
      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 { }
  • 页面展示 别人访问网页时，angular-cli.json中找到index的藐视，index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
     <!doctype html>
     <html lang="en">
     <head>
      <meta charset="utf-8">
      <title>DemoHelloworld</title>
      <base href="/">

      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      </head>
      <body>
         <app-root></app-root>
      </body>
      </html>

根据找到appComponenet组件进行页面展示

1
2
3
4
5
6
7
8
9
       import { Component } from '@angular/core';
       @Component({
             selector: 'app-root',
             templateUrl: './app.component.html',
             styleUrls: ['./app.component.css']
       })
       export class AppComponent {
          title = 'app';
       }