本教程基于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. 文件加载顺序
-
首先打开项目脚本的入口文件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文件。 -
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文件。 -
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文件。
-
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中定义的选择器名称。