Angular7教程-02-Angular项目目录及基本文件说明

本教程基于Angular7,更新时间2018-11-05.

1. 项目根目录如下：

• e2e文件夹：end to end，测试目录，主要用于集成测试。
• node_modules：项目的模块依赖目录。
• src：项目的源代码。
• .editorconfig：编辑器配置文件。
• .gitignore: git版本控制时忽略的文件（此文件中配置的文件不纳入版本控制）。
• .angular.json：angular配置文件。
• .package-lock.json：锁定项目依赖模块的版本号。
• .package.json：配置项目依赖模块。
• .README.md：项目说明文件
• .tsconfig.json：typescript配置文件。
• .tslint.json：typescript代码检测配置文件。

2. src目录展开如下图：

• app：项目的主组件目录。
• assets：项目的资源目录。
• environments：项目的环境配置目录
• index.html：主页面。
• karma.conf.js：karma测试的配置文件。
• main.ts：脚本入口文件。
• polyfills.ts：兼容性检测配置文件。
• style.css：全局css样式文件。
• test.ts：单元测试入口文件。

3. app目录展开如下图：

• app-routing.module.ts：组件路由配置文件。
• app.component.css：组件私有css样式文件。
• app.component.html：组件的模板文件。
• app.component.spec.ts：组件的单元测试文件。
• app.compenent.ts：组件typescript配置文件。
• app.module.ts：组件模型配置文件。

4. 文件加载顺序

1. 首先打开项目脚本的入口文件main.ts文件，内容如下：

   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.error(err));
   
   

   其中的语句 import { AppModule } from './app/app.module';表示引用了AppModule,路径是./app/app.module,就是app目录下的app.module.ts文件。

2. app.module.ts的文件内容如下：

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       AppRoutingModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   
   

   其中的import { AppComponent } from './app.component'表示引用了AppComponent组件，即为app目录下的app.component.ts文件。

3. app.component.ts文件内容如下：

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     title = 'app';
   }
   
   

   • selector定义了选择器，页面会通过这个名字来引用组件。
   • templateUrl定义了模板文件，就是当前目录下的app.component.html文件。
   • styleUrls定义了模块的样式文件，即当前目录下的app.component.css文件。

4. index.html文件内容如下：

   <!doctype html>
   <html lang="en">
   
   <head>
   	<meta charset="utf-8">
   	<title>Media</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>
   
   

   其中的body标签中的app-root标签即为app.component.ts中定义的选择器名称。