如何构建 Angular 应用程序？
Angular 是一种流行的开源框架，用于构建动态、响应式和复杂的网络应用程序。Angular 由 Google 于 2010 年首次开发，当时的名称是 “AngularJS”。
Angular 可让您以简洁有序的代码结构创建动态的单页面应用程序。
Angular 使用的 TypeScript 是 JavaScript 的超集，它为语言添加了类型检查、接口和类等功能。这使得 Angular 代码更具可维护性，更不易出错。
要使用 Angular 简化网页开发，使用 Back4app 这样的 “后台即服务”（BaaS）解决方案很有帮助。
Back4app 提供预建的后端基础设施，具有身份验证、数据存储和服务器端逻辑等功能。
这样，您就可以专注于构建应用程序的前端，而不必担心后台开发的复杂性。
在本文中，您将探索 Angular，并使用 Angular 和 Back4app 构建一个基本的博客应用程序。
Contents
Angular 的优势
Angular 因其诸多优势而受到开发人员的青睐。以下是 Angular 的一些主要优势：
双向数据绑定
双向数据绑定是一项省时省力的功能，可提高 Angular 应用程序的质量。双向数据绑定允许模型（数据）的更改自动反映到视图（用户界面）中。
模型的任何变化都会立即反映在视图中。这使得开发复杂的动态应用程序变得更简单、更快捷，无需编写模板代码来同步模型和视图。
依赖注入
依赖注入是 Angular 的一项重要功能，它使组件和服务之间的依赖关系管理变得更容易。依赖注入是一项强大的功能，可增强 Angular 应用程序的可靠性、可维护性和可测试性。
Angular 中的依赖注入可让组件和服务声明对其他组件和服务的依赖。然后，依赖注入系统会接管自动创建和提供这些依赖关系的任务。这样就无需手动创建和管理依赖关系，从而降低了出错的风险。
Angular 的依赖注入系统可让您轻松管理依赖关系，并减少您需要编写的代码量。
基于组件的架构
Angular 基于组件的架构可将复杂的用户界面分解为更小的、可重复使用的组件，从而轻松构建复杂的用户界面。
组件可以很容易地在不同的应用程序中重复使用。组件可以独立开发，从而使管理具有许多活动部件的复杂应用程序变得更加容易。这种架构还能使测试和调试代码变得更容易，因为组件可以单独隔离和测试。
TypeScript
TypeScript 是 JavaScript 的超集，为 JavaScript 语言添加了静态类型检查、接口、类和其他功能。它是一种由微软维护的开源语言，是开发大型网络应用程序的热门选择。
Angular 是用 TypeScript 编写的。这提供了更好的工具和更强大的开发体验。TypeScript 的静态类型允许开发人员在编译时而不是运行时捕捉错误，从而更容易维护和重构代码。
大型社区
Angular 拥有一个庞大而活跃的开发者社区，由于多种原因，这个社区的价值令人难以置信。
大型社区提供了许多资源，如教程、文档和论坛。这些资源对于刚刚接触 Angular 或正在寻找特定问题解决方案的开发人员来说非常有用。
庞大的社区意味着许多开发人员通过创建和共享 Angular 的第三方插件和扩展，积极改进框架。这可以节省您的时间和精力，因为您可以利用现有代码为您的项目添加新功能。
Angular 的局限性
虽然 Angular 是一个用于构建网络应用程序的强大而流行的框架，但它也有一些局限性，您应该了解。Angular 的一些局限性如下：
陡峭的学习曲线
由于 Angular 引入了许多新的 Web 开发概念和方法，因此对于一些开发人员来说，学习 Angular 可能具有挑战性。您可能需要花费大量时间学习模块、组件、服务、依赖注入和反应式编程。
大尺寸
与其他前端框架相比，Angular 是一个相对较大的框架。Angular 之所以如此庞大，主要是因为它的功能集非常丰富，包括许多内置功能，如表单处理、路由和数据管理。
Angular 的庞大体积会导致网络应用程序的加载时间变慢，从而对用户体验造成负面影响。对于网络连接速度较慢的用户来说尤其如此。
Angular 的庞大体积会使开发和维护复杂项目变得更具挑战性。
有限的搜索引擎优化
Angular 的搜索引擎优化功能有限，主要是因为它是一个单页面应用程序（SPA）框架。SPA 设计为完全在浏览器中运行，这意味着 HTML 代码是使用 JavaScript 动态生成的。这使得搜索引擎爬虫很难准确索引 Angular 驱动的网站内容。
构建博客应用程序
创建一个 Angular 应用程序，并将其命名为 “blog-application”。要创建 Angular 应用程序，请在终端上的项目目录中运行以下命令：
ng new blog-application
创建 Angular 应用程序后，您将创建两个组件。这两个组件分别是主页组件和帖子组件。创建组件后，您将对组件进行路由。
要生成组件，请运行以下命令：
cd blog-application
ng generate component home-component
ng generate component post-component
生成组件后，在app-routing.module.ts文件中配置它们的路由。
就像这样
//app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponentComponent } from './home-component/home-component.component';
import { PostComponentComponent } from './post-component/post-component.component';
const routes: Routes = [
{path: '', component: HomeComponentComponent},
{path: 'post', component: PostComponentComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
上面的代码块在路由数组中定义了两个路由。HomeComponentComponent的路由路径为空。空路径表示HomeComponentComponent将在渲染应用程序时立即显示。
PostComponentComponent路由的定义路径为 “post”，这意味着当您导航到此路由时，PostComponentComponent将在视图中呈现和显示。
要导航到指定路由，您需要在应用程序中添加一个标头。您将在app-component.html文件中创建页眉。页眉将包含导航到不同路径的元素。
例如
<!--app.component.html-->
<div>
<div class="header">
<a routerLink=""><h2>Blog</h2></a>
<a routerLink="post"><button>write</button></a>
</div>
<router-outlet></router-outlet>
</div>
标题 div 包含两个子锚元素。锚元素封装了一个 h2 元素和一个按钮元素。点击 h2 会导航到默认路由，而点击按钮元素则会导航到发布路由。路由器-outlet会在标题 div 下显示路由组件。
创建页眉后，可在app-compnent.scss文件中设置页眉样式：
/* app.component.scss*/
.header{
display: flex;
justify-content: space-between;
padding: 1rem 0;
}
整合 Back4App
要开始使用 Back4app 创建应用程序，首先要确保您拥有一个账户。如果您还没有 Back4app 帐户，请按照提供的说明进行操作：
- 访问Back4app 网站。
- 在主页右上角找到注册按钮并点击。
- 填写注册表并提交。
注册成功后，请登录您的 Back4app 帐户并按以下步骤操作：
- 找到右上角的 “新应用程序 “按钮并点击。
- 您将被引导至一个表格，在此输入您想要的应用程序名称。
- 输入应用程序名称，然后选择 “创建 “按钮启动应用程序创建流程。
点击 “创建 “按钮后，您的申请将被生成，您将被引导至申请仪表板。
将应用程序连接到 Back4app
要将 Angular 应用程序连接到您创建的 Back4app 应用程序，您必须安装Parse JavaScript SDK。
根据软件包管理器的不同，运行以下任一命令安装 SDK：
#using npm
npm install parse
or
#using yarn
yarn add parse
安装Parse JavaScript SDK 后，您必须获取应用程序 ID和JavaScript 密钥。您需要用它们将您的 Angular 应用程序连接到 Back4app 应用程序。
要从 Back4app 获取应用程序 ID和JavaScript 密钥，请在仪表板上选择 “应用程序设置“，导航至 “安全与密钥“部分。在那里，您可以轻松获取将 Angular 应用程序连接到 Back4app 所需的密钥。
获取应用程序 ID和JavaScript 密钥后，将它们安全地保存在应用程序中。
在app.component.ts文件中，从parse 中导入经过精简的Parse版本。然后调用Parse 的初始化方法。初始化方法将应用程序 ID和JavaScript Key作为参数。最后，将Parse的serverURL设置为“https://parseapi.back4app.com/”。
完成上述操作后，您的app.component.ts文件应该如下所示：
//app.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
}
Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
(Parse as any).serverURL = "<https://parseapi.back4app.com/>";
向 Back4app 应用程序添加数据
要在 Back4App 应用程序中添加数据，您需要创建一个表单来接收来自用户的数据。提交表单时，将运行handleSubmit函数。handleSubmit函数将包含从您的博客应用程序向 Back4app 应用程序添加新文章的逻辑。
就像这样
// post-component.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-post-component',
templateUrl: './post-component.component.html',
styleUrls: ['./post-component.component.scss']
})
export class PostComponentComponent {
data: postData = {
title: '',
body: '',
}
handleSubmit(){
try {
const Post = new Parse.Object("Post");
Post.set("title", this.data.title);
Post.set("body", this.data.body);
Post.save().then(() => {
console.log("New Post added successfully");
});
} catch (error) {
console.log(error);
}
}
}
interface postData {
title: string,
body: string
}
上面的代码块是post-component.component.ts文件***。**handleSubmit函数创建了一个新的 ParsePost对象，并将其title属性设置为data.title属性的值，将body属性设置为data.body属性的值。最后，它会使用Post .save() 将Post对象的属性保存到 Parse 服务器。
数据属性将通过表单从用户那里获取值。为此，您将在post-component.component.html文件中创建一个表单。
就像这样
<!-- post-component.component.html -->
<form class="post" (ngSubmit)="handleSubmit()">
<input type="text" placeholder="Title..." name="title" [(ngModel)]="data.title" >
<textarea name="body" placeholder="Body..." cols="30" rows="10" [(ngModel)]="data.body"></textarea>
<button type="submit">Post</button>
</form>
ngModel将标题和正文输入字段的值绑定到数据属性。ngSubmit通过调用post-component.ts文件中声明的handleSubmit函数来处理表单提交。
接下来，你将为组件设计样式。在后置组件的 SCSS 文件中，输入以下代码：
/* post-component.component.scss */
.post{
margin-block-start: 4rem;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
input{
border: none;
inline-size: 100%;
padding: 1rem;
border-radius: 7px;
&::placeholder{
color: #e2e2e2;
}
textarea{
border: none;
inline-size: 100%;
padding: 1rem;
&::placeholder{
color: #e2e2e2;
}
}
}
从 Back4app 获取数据
要从 Back4app 应用程序中获取数据，请为要获取数据的类创建一个 Parse 查询。该查询将在ngOnInit生命周期钩子中运行。
例如
// home-component.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-home-component',
templateUrl: './home-component.component.html',
styleUrls: ['./home-component.component.scss']
})
export class HomeComponentComponent {
data: postData[] = [];
async ngOnInit() {
try {
const query = new Parse.Query("Post");
const post = await query.find();
this.data = post;
} catch (error) {
console.log(error);
}
}
}
interface postData {
id: string,
get: any,
}
上面的代码块使用Parse.Query()方法从 Back4app 应用程序的数据库中搜索 “Post “对象。然后，在Parse.Query()调用的结果上调用 Parse SDK 的find方法，返回一个包含查询结果的数组。最后，将返回的数组赋值给数据变量。
使用数据数组，您可以渲染 HTML 模板：
<!-- home-component.component.html -->
<div class="home">
<div class="post" *ngFor="let post of data">
<h3>{{ post.get('title') }}</h3>
<p>{{ post.get('body') }}</p>
<button>Delete</button>
</div>
</div>
ngFor指令在数组中循环，并生成包裹在其 div 中的 HTML 元素。post.get()方法会检索 Back4App 数据库中标题和正文属性的值。
现在，您可以在组件的 SCSS 文件中添加以下代码，为组件设计样式：
/* home-component.component.scss */
.home{
display: flex;
flex-direction: column;
gap: 2rem;
margin-block-start: 4rem;
.post{
border-radius: 12px;
padding: 1rem;
&:hover{
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
background-color: #e2e2e2;
}
h3{
text-transform: uppercase;
margin-block-end: 0.4rem;
}
button{
margin-block-start: 1rem;
}
}
}
删除 Back4app 应用程序中的数据
要从 Back4App 应用程序中删除数据，您需要使用destroy方法从数据库中删除相应的记录。您将在home-component.component.ts文件中创建一个deletePost函数。deletePost函数将包含根据给定 ID 从 Back4app 应用程序数据库中删除帖子的逻辑。
就像这样
// home-component.component.ts
async deletePost(id: string) {
try {
const Post = Parse.Object.extend("Post");
const todo = new Post();
todo.id = id;
await todo.destroy();
const newData = this.data.filter( (item: postData) => item.id !== id )
this.data = newData;
} catch (error) {
console.log(error);
}
}
上面的代码块使用Parse.Object.extend方法创建了一个新的Post对象。然后将Post对象的id属性设置为传递给函数的id参数。
接下来，它会调用帖子对象的destroy方法，从 Back4app 数据库中删除带有给定 ID 的帖子。然后，它会过滤数据数组，并返回一个新数组newData，其中包含除已删除帖子外的所有帖子。然后将newData数组赋值给 data 变量。
在home-component.component.ts文件中定义了deletePost函数后，就可以使用 click 事件将该函数绑定到组件 HTML 文件中的删除按钮上。
您的home-component.component.html文件应如下所示：
<!-- home-component.component.html -->
<div class="home">
<div class="post" *ngFor="let post of data">
<h3>{{ post.get('title') }}</h3>
<p>{{ post.get('body') }}</p>
<button (click)="deletePost(post.id)">Delete</button>
</div>
</div>
最后，在styles.scss文件中添加以下代码块，为应用程序添加一些全局样式：
/* styles.scss */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
inline-size: 50%;
margin: 0 auto;
background-color: #f2f2f2;
}
a{
text-decoration: none;
color: inherit;
}
button{
border: 1px #333333 solid;
padding: 0.3rem 0.5rem;
border-radius: 0.4rem;
background-color: inherit;
inline-size: min-content;
&:hover{
background-color: #333333;
color: #FFFFFF;
}
}
测试应用程序
要测试应用程序，请打开项目终端并运行以下命令：
ng serve
上述命令编译应用程序，并将其托管在本地服务器上，默认地址为http://localhost:4200。
应用程序启动后，您应该会看到下图所示的用户界面：
点击 “写入 “按钮后，您将进入 “帖子“组件。帖子组件包含一个带输入框的表单和一个按钮。
后置组件看起来像这样：
填写完输入字段后，点击发布按钮即可将输入值添加到 Back4app 数据库中。要确认这一点，您可以查看 Back4app 应用程序控制面板，或直接返回应用程序主页。
点击删除按钮可以删除帖子。例如，点击 “删除 “按钮删除 “狮子是什么？
结论
Angular 是一个功能强大的框架，用于构建可扩展、健壮的网络应用程序。它具有模块化架构、强大的数据绑定和大量预置组件。它的优势包括提高开发人员的工作效率、简化开发流程，以及创建动态、响应式和高性能用户界面的能力。
使用 Back4app 作为 “后台即服务 “解决方案来构建 Angular 应用程序，可以大大简化和加快开发过程。有了 Back4app 预先构建的基础设施，您就可以专注于创建应用程序的前端，而不必担心后端开发的复杂性，如身份验证和数据存储。
