构建功能丰富的Angular应用：从服务调用到表单处理

### 构建功能丰富的 Angular 应用：从服务调用到表单处理 #### 1. 更新 Angular 服务 在 Angular 开发中，服务是一个关键部分，它可以帮助我们从外部资源获取数据并将结果传递给组件。以下是更新 Angular 服务以实现此功能的详细步骤： - **准备工作**：若使用 CLI 创建了服务文件，确保该文件已打开。 - **更新服务代码**：添加必要的代码，使服务具备调用远程 API 的能力。更新后的服务代码如下： ```typescript import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class BoroughService { constructor(private http: HttpClient) {} getBoroughs(): Observable<any> { return this.http.get('https://jsonplaceholder.typicode.com/todos/1'); } } ``` - **代码解释**： - `@Injectable` 装饰器：让类能够被注入到多个组件中，实现服务的复用。`providedIn: 'root'` 优化了 Angular 的依赖注入，使应用可以使用该服务的单例实例。 - `HttpClient`：用于发起 HTTP 请求，这里使用 GET 请求从 JSONPlaceHolder 网站获取数据。 - **配置应用**：在 `app.module.ts` 文件中添加以下代码，以便应用可以使用 `HttpClient` 类： ```typescript import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [ // 其他模块 HttpClientModule ], // 其他配置 }) export class AppModule { } ``` #### 2. 显示服务结果 当服务配置好后，我们可以将服务返回的结果显示在屏幕上。具体步骤如下： - **更新组件代码**：在组件中创建一个属性来存储服务返回的数据。 ```typescript import { Component, OnInit } from '@angular/core'; import { BoroughService } from './borough.service'; @Component({ selector: 'app-list-boroughs', templateUrl: './list-boroughs.component.html', styleUrls: ['./list-boroughs.component.css'] }) export class ListBoroughsComponent implements OnInit { private results: any; constructor(private boroughService: BoroughService) { } ngOnInit() { this.boroughService.getBoroughs().subscribe((data) => { console.log(data); this.results = data; }); } } ``` - **更新 HTML 文件**：在 `list-boroughs-component.html` 文件中添加 HTML 元素来显示结果。 ```html <p> list-boroughs works! </p> <div> results.title {{results.title}} </div> <div> results.Id {{results.userId}} </div> <div> results.id {{results.id}} </div> ``` #### 3. 创建本地 Angular 应用的代理 由于 Angular 应用和 Node 应用可能运行在同一台机器上，为了让它们能够相互通信，我们需要创建一个代理。具体步骤如下： - **创建代理文件**：在 `package.json` 文件同级目录下创建 `proxy.conf.json` 文件，并添加以下内容： ```json { "/boroughs/*": { "target": "http://localhost:3000/boroughs", "secure": false, "loglevel": "debug", "changeOrigin": true, "pathRewrite": { "^/boroughs": "" } } } ``` - **配置 Angular 应用**：打开 `angular.json` 文件，在开发模式下配置应用使用该代理文件。在 `serve` 选项中添加 `proxyConfig` 属性： ```json { "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "your-app-name:build", "proxyConfig": "proxy.conf.json" }, // 其他配置 } } ``` - **更新服务 URL**：将服务中 `getBoroughs` 方法的 URL 改为 `/boroughs`。 ```typescript getBoroughs(): Observable<any> { return this.http.get('/boroughs'); } ``` - **显示结果**：使用 `*ngFor` 指令循环显示 Node 服务器返回的结果。更新 `list-boroughs-component.html` 文件如下： ```html <div *ngFor="let result of results"> Id = {{ result.id }} </div> <div *ngFor="let result of results"> name = {{ result.name }} </div> <div *ngFor="let result of results"> state = {{ result.state }} </div> ``` #### 4. 添加 Twitter Bootstrap 到 Angular 应用 为了让应用具有更好的视觉效果，我们可以添加 Twitter Bootstrap 框架。具体步骤如下： - **安装依赖**：在命令行中使用 NPM 安装 Bootstrap、jQuery 和 Popper。 ```bash npm install bootstrap jquery popper ``` - **配置 `angular.json` 文件**：打开 `angular.json` 文件，更新 `styles` 和 `scripts` 部分，引用 Bootstrap 提供的 CSS 和 JavaScript 文件。 ```json { "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "styles": [ "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ] }, // 其他配置 } } } ``` - **验证安装**：重启应用，将一个 `div` 标签改为 `h1` 标签，查