创建第一个Angular应用

src/app/app.component.ts

import { Component } from '@angular/core';

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

src/app/welcome/welcome.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent {
currentDate = new Date();
visitorName = 'Angular开发者';
visitorCount = 0;

incrementCount() {
this.visitorCount++;
}

getGreeting(): string {
const hour = this.currentDate.getHours();
if (hour < 12) return '早上好';
if (hour < 18) return '下午好';
return '晚上好';
}
}

src/app/welcome/welcome.component.html

<div class="welcome-container">
  <h1>{{ getGreeting() }}, {{ visitorName }}!</h1>
  <p>欢迎来到你的第一个Angular应用</p>

  <div class="info-card">
    <p>当前时间: {{ currentDate | date:'yyyy-MM-dd HH:mm:ss' }}</p>
    <p>访问次数: {{ visitorCount }}</p>
  </div>

  <button class="btn btn-primary" (click)="incrementCount()">
    增加访问计数
  </button>

  <div *ngIf="visitorCount > 5" class="alert alert-success mt-3">
    恭喜！你已经多次访问这个组件了！
  </div>
</div>

<!-- 在app.component.html中添加 -->
<div class="content" role="main">
  <!-- 原始内容... -->

  <!-- 添加我们的Welcome组件 -->
  <app-welcome></app-welcome>
</div>

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { WelcomeComponent } from './welcome/welcome.component';

@NgModule({
  declarations: [
    AppComponent,
    WelcomeComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }