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

时间 2019-12-17

标签 angular7 angular 教程项目目录基本文件说明栏目 AngularJS 繁體版

原文原文链接

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

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文件，内容以下：html

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文件。node

app.module.ts的文件内容以下：git

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文件。typescript

app.component.ts文件内容以下：json
```
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文件内容以下：bootstrap

<!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中定义的选择器名称。app