如何从零开始构建一个简单的Angular SPA
Angular 11于2020年11月11日由谷歌的Angular团队发布。在过去的几年里，Angulars开发社区一直在增长。如果你不熟悉Angular，有很多理由你应该开始学习。
简介
本文将指导你构建一个简单的Angular应用程序。我们将涵盖基础知识和核心Angular CLI概念。对于那些希望在学习过程中获得实践经验的开发者来说，该指南将非常方便。
我们将建立一个微小的流媒体动漫应用的版本。在主页上，我们将显示所有的动漫封面。用户可以点击任何一张卡片，以重定向到各自的动漫简介部分。
动漫简介包含了关于该动漫的所有细节--在底部还有一个评论框。
开始使用
安装好Node.js后，运行以下命令来安装Angular CLI。
npm install -g @angular/cli
该命令将安装构建Angular应用程序所需的所有依赖项。
下一步是创建一个工作区和启动程序，让我们通过运行以下命令来完成。
ng new my-app
这一步将创建一个新的Angular启动程序，名为my-app。
现在，有了这个启动程序，运行以下命令。
cd my-app
ng serve
后面的命令将运行my-app应用程序。
文件夹结构应该如下图所示。
my-app
├───e2e
├───node_modules
└───src
├───app
│ ├───anime-list
│ │ ├───anime-list.component.css
│ │ ├───anime-list.component.html
│ │ └───anime-list.component.ts
│ ├───anime-card
│ │ ├───anime-card.component.css
│ │ ├───anime-card.component.html
│ │ └───anime-card.component.ts
│ ├───anime-profile
│ │ ├───anime-profile.component.css
│ │ ├───anime-profile.component.html
│ │ └───anime-profile.component.ts
│ ├───model
│ │ └───animeInterface.ts
│ ├───anime.service.ts
│ ├───app.component.css
│ ├───app.component.html
│ ├───app.component.ts
│ └───app.module.ts
├───assets
├───environments
├───db-data.ts
├───index.html
├───main.ts
└───style.css
构建应用程序
我们将首先从数据部分开始，然后再构建用户界面及其工作组件。
准备好你的数据
- 在你的
src/app文件夹中，在新文件夹model下创建一个新的界面文件。
// animeInterface.ts
export interface AnimeInterface {
id: number;
iconUrl: string;
name: string;
description: string;
type: string; // whether a series/movie/OVA.
status: string;
comments: string[];
}
- 下一步将是填充数据。我们将在
src文件夹中创建一个typecript文件。
//db-data.ts
import {AnimeInterface} from './app/model/animeInterface';
export const ANIME: AnimeInterface[] = [
{
id: 2,
iconUrl: '...enter icon URL',
name: 'Akira',
description: '...enter description here',
type: 'movie',
status: 'completed',
comments: []
},
];
- const
ANIME是一个类型为AnimeInterface的数组，它以JSON的格式保存关于每个节目的数据。
数据准备好后，下一步是显示所有的动漫卡。
建立用户界面
我们将使用Bootstrap v4.0 ，以保持我们的用户界面简单和干净。在你的index.html 文件中使用bootstrap模板。
布局
用以下命令从你的终端创建一个组件anime-list 。
ng g c animeList
这将在src/ 文件夹下生成一个名为anime-list 的新组件。该组件会被导入到app.module.ts 中的declaration 阵列中。
anime-list 组件将被用来以网格方式显示来自db.data.ts 的动漫列表。
//anime-list.component.ts
import { Component } from '@angular/core';
import {ANIME} from '../../db-data';
@Component({
selector: 'app-anime-list',
templateUrl: './anime-list.component.html',
styleUrls: ['./anime-list.component.css']
})
export class AnimeListComponent{
animes = ANIME;
}
<!-- anime-list.component.html -->
<div class="container-fluid">
<div class="col">
<div class="row animeCard">
<app-anime-card class="col-sm-3 col-md-3 col-lg-3"
*ngFor="let anime of animes;index as animeId"
[anime]='anime'
[animeId] = animeId>
</app-anime-card>
</div>
</div>
</div>
在上面的*.ts代码中，我们正从db.data.ts 发送数据到模板，这就是我们调用组件* anime-card 的地方。
现在，创建一个anime-card 组件，它将显示动漫卡并提供一个静态路由器链接到动漫简介部分。
// anime-card.component.ts
import {Component, Input } from '@angular/core';
import {AnimeInterface} from '../model/animeInterface';
@Component({
selector: 'app-anime-card',
templateUrl: './anime-card.component.html',
styleUrls: ['./anime-card.component.css']
})
export class AnimeCardComponent{
@Input()
anime: AnimeInterface;
@Input()
animeId: number;
}
<!-- anime-card.component.html -->
<div class="card" style="width: 17rem; margin: 1px;">
<img [src]="anime.iconUrl" class="card-img-top" alt="..." style="height: 380px;">
<div class="card-body">
<p class="card-text">{{ anime.name }}</p>
<button
[routerLink]="['/anime', animeId]"
type="button"
class="btn btn-success btn-sm"
style="margin: auto;">
View more!
</button>
</div>
</div>
上面的代码将从它的父组件anime-list ，获得动漫和ID作为输入；这些细节在模板中被用来显示动漫卡。routerLink 创建一个链接到我们的应用程序的anime-profile 部分（在下面涉及）。
创建简介
布局准备好后，一旦用户点击任何一个动漫卡，一个ID就会作为URL参数被传递，并显示相应的动漫资料。
创建一个anime-profile 组件。
<!-- anime-profile.component.html -->
<div *ngIf="anime" class="container-fluid" style="color: #1976d2;">
<br>
<button class="btn btn-success btn-sm" (click)="goBack()">Go back</button>
<hr>
<div class="row" >
<!-- Display the Poster here -->
<div class="col-sm-3">
<figure class="figure">
<img src="{{ anime.iconUrl }}" class="figure-img img-fluid rounded" alt="..." style="max-height: 469px;">
</figure>
</div>
<!-- Anime Profile -->
<div class="col-sm-9">
<div class="card">
<div class="card-header">
<h3 class="card-title">{{anime.name | uppercase }}</h3>
</div>
<div class="card-body">
<h5 class="card-title">Type : {{anime.type | titlecase}}</h5>
<div *ngIf="anime.status === 'completed'; else elseBlock">
<h5 class="card-title">Status : <span class="badge badge-success">{{anime.status}}</span></h5>
</div>
<ng-template #elseBlock>
<h5 class="card-title">Status : <span class="badge badge-warning">{{anime.status}}</span></h5>
</ng-template>
<h5 class="card-title">Description :</h5>
<p class="card-text">{{ anime.description }}</p>
</div>
</div>
</div>
</div>
<br>
<!-- Comments box -->
<div class="form-group row container">
<label class="col-sm-2 col-form-label" for="comment">Enter your comment :</label>
<div class="col-sm-9">
<input #comment
(keyup.enter)="addComment(comment.value); comment.value='' "
id="comment"
class="form-control">
</div>
<button class="col btn-primary btn"
(click)="addComment(comment.value); comment.value=''">Post
</button>
</div>
<!-- Display comments here -->
<div class="row container">
<div class="container">
<ul class="list-group list-group-flush" style="margin: 20px;">
<li class="list-group-item" *ngFor="let comment of anime.comments">
{{ comment }}
</li>
</ul>
</div>
</div>
</div>
// anime-profile.component.ts
import {Component, OnInit } from '@angular/core';
import {AnimeInterface} from '../model/animeInterface';
import {AnimeService} from '../anime.service';
import {ActivatedRoute} from '@angular/router';
import { Location } from '@angular/common';
import {Subscription} from 'rxjs';
@Component({
selector: 'app-anime-profile',
templateUrl: './anime-profile.component.html',
styleUrls: ['./anime-profile.component.css']
})
export class AnimeProfileComponent implements OnInit{
anime: AnimeInterface;
animeSubscription: Subscription;
constructor(private route: ActivatedRoute,
private animeService: AnimeService,
private location: Location) { }
ngOnInit(): void {
this.getAnime();
}
// store the comments
addComment(comment: string): void {
if (comment) {
this.anime.comments.push(comment);
}
}
// fetch the anime profile using a service
getAnime(): void {
const id = +this.route.snapshot.paramMap.get('id');
console.log(id);
this.animeSubscription = this.animeService.getAnime(id)
.subscribe(anime => this.anime = anime);
}
goBack(): void {
this.location.back();
}
}
上面的代码使用一个服务来获取基于id的动漫简介，而<ng-template> ，用来定义一个else块。location 服务直接与浏览器的URL交互，如果你想的话，可以重定向用户。
anime.service.ts 的内容如下。
// anime.service.ts
import { Injectable } from '@angular/core';
import {AnimeInterface} from './model/animeInterface';
import {ANIME} from '../db-data';
import {Observable, of} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AnimeService {
getAnime(id: number): Observable<AnimeInterface> {
return of(ANIME.find(anime => anime.id === id + 1));
}
}
设置路由
下一步是为应用内导航设置路线。为此，在app.module.ts 的imports 数组中提到路径。同时用RouterModule 初始化exports 数组，如下所示。
这样做将使我们能够在AppModule 中声明的组件中使用<router-outlet> 。
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AnimeListComponent } from './anime-list/anime-list.component';
import { AnimeCardComponent } from './anime-card/anime-card.component';
import {RouterModule} from '@angular/router';
import { AnimeProfileComponent } from './anime-profile/anime-profile.component';
@NgModule({
declarations: [
AppComponent,
AnimeListComponent,
AnimeCardComponent,
AnimeProfileComponent
],
imports: [
// Routes for in-app navigation
RouterModule.forRoot([
{path: '', component: AnimeListComponent},
{path: 'anime/:id', component: AnimeProfileComponent},
]),
FormsModule, BrowserModule
],
exports: [RouterModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
请注意，还有其他方法来设置你的应用内路由。另一种方法是创建一个AppRoutingModule 文件并在那里定义你的路径。
最后一步是在我们的app.component.html 中使用<router-outlet> 占位符，这将有助于根据当前状态加载组件。
<!-- app.component.html-->
<router-outlet></router-outlet>
/* app.component.css */
.top-menu {
background: #1976d2;
}
.logo {
max-height: 55px;
}
.animeCard {
margin: 50px auto;
}
有了所有这些步骤，我们的动漫SPA就可以开始了。
下面是几张截图供你比较:)
