CLI 参考

// 创建一个简单的 Angular 应用并生成组件示例
// 命令：ng new cli-demo
// 命令：ng generate component user-profile

// user-profile.component.ts
import { Component } from '@angular/core';

@Component({
selector: 'app-user-profile',
template: `       <div class="profile">         <h2>{{ user.name }}</h2>         <p>邮箱：{{ user.email }}</p>         <button (click)="changeName()">更改用户名</button>       </div>
`,
styles: [`.profile { border: 1px solid #ccc; padding: 10px; }`]
})
export class UserProfileComponent {
user = { name: '张三', email: '[[email protected]](mailto:[email protected])' };

changeName() {
this.user.name = '李四';
}
}

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { UserProfileComponent } from './user-profile/user-profile.component';

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

// 进阶示例：通过服务实现状态管理与生命周期交互
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { UserService } from '../services/user.service';

@Component({
selector: 'app-dashboard',
template: `       <div *ngIf="userData">         <h3>欢迎，{{ userData.name }}</h3>         <p>通知数量：{{ notifications }}</p>       </div>
`
})
export class DashboardComponent implements OnInit, OnDestroy {
userData: any;
notifications = 0;
private sub!: Subscription;

constructor(private userService: UserService) {}

ngOnInit() {
this.sub = this.userService.getUserData().subscribe(data => {
this.userData = data;
this.notifications = data.notifications;
});
}

ngOnDestroy() {
if (this.sub) this.sub.unsubscribe();
}
}

// user.service.ts
import { Injectable } from '@angular/core';
import { of } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserService {
getUserData() {
return of({ name: '王五', notifications: 8 });
}
}

// 高级示例：使用 CLI 创建模块与懒加载路由
// 命令：ng generate module analytics --route analytics --module app.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { AnalyticsComponent } from './analytics.component';
import { HttpClientModule } from '@angular/common/http';

const routes: Routes = [{ path: '', component: AnalyticsComponent }];

@NgModule({
declarations: [AnalyticsComponent],
imports: [CommonModule, RouterModule.forChild(routes), HttpClientModule]
})
export class AnalyticsModule {}

// analytics.component.ts
import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
selector: 'app-analytics',
template: `<h2>分析仪表板</h2><p>性能数据实时更新中...</p>`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AnalyticsComponent {}