本教程基於Angular7,更新時間2018-11-05.css
首先打開項目腳本的入口文件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'; }
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