本教程基於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中定義的選擇器名稱。