Angular JS so với React JS
Angular và React là hai trong số các frontend framework hàng đầu cho các ứng dụng web. Mặc dù phạm vi của chúng hơi khác nhau (một là nền tảng phát triển, một là thư viện), chúng được coi là những đối thủ cạnh tranh chính. Thật an toàn khi cho rằng bạn có thể sử dụng một trong hai khuôn khổ để phát triển một ứng dụng.
Câu hỏi chính sau đó trở thành: tại sao bạn lại chọn cái này hơn cái kia? Bài viết này nhằm mục đích trả lời nó bằng cách phát triển một biểu mẫu đăng ký đơn giản. Biểu mẫu sẽ chỉ dựa vào khả năng xác nhận của từng khuôn khổ.
Mục Lục
Điều kiện tiên quyết
Để tiếp tục, bạn phải có thể cài đặt React và có hiểu biết chung về cách hoạt động của một ứng dụng React. Bạn cũng nên biết cách cài đặt và sử dụng Angular.
Cấu trúc tệp của mỗi ứng dụng
Biểu mẫu React có cấu trúc tệp sau:
Biểu mẫu Angular có cấu trúc tệp sau:
Hình trên chỉ hiển thị phần đã chỉnh sửa của ứng dụng Angular.
Từ các cấu trúc tệp ở trên, bạn có thể thấy rằng cả hai khung công tác đều phụ thuộc rất nhiều vào việc sử dụng các thành phần.
Tạo logic cho mỗi ứng dụng biểu mẫu
Mỗi ứng dụng sẽ có cùng mục đích: biểu mẫu chỉ được gửi nếu mọi trường đầu vào chứa dữ liệu hợp lệ. Trường tên người dùng hợp lệ nếu nó chứa ít nhất một ký tự. Hai trường mật khẩu hợp lệ nếu giá trị của chúng giống nhau.
Angular cung cấp hai phương pháp tạo biểu mẫu: theo hướng mẫu và phản ứng. Phương pháp phản ứng cho phép nhà phát triển tạo các tiêu chí xác thực tùy chỉnh. Cách tiếp cận theo hướng mẫu đi kèm với các thuộc tính giúp đơn giản hóa việc xác thực biểu mẫu.
React chỉ có khả năng phát triển một biểu mẫu với xác thực tùy chỉnh. Tuy nhiên, React là framework phổ biến hơn và nó có một cộng đồng lớn hơn, vì vậy nhiều thư viện xử lý biểu mẫu có sẵn cho React. Vì mục tiêu ở đây là tránh sử dụng các thư viện bên ngoài, ứng dụng React sẽ dựa vào xác thực tùy chỉnh.
Phát triển mẫu cho từng ứng dụng
Cả hai ứng dụng đều dựa vào các mẫu để tạo ra đầu ra HTML cuối cùng.
Mẫu HTML góc cạnh
Các form-signup.component.html tệp chứa mã sau:
<div class="form-content">
<form class="form" #myForm="ngForm">
<h1>Complete the form to join our community!</h1><div class="form-inputs">
<label for="username" class="form-label">Username:</label>
<input
id="username"
type="text"
class="form-input"
placeholder="Enter username"
name="username"
ngModel
required
#username="ngModel"
/>
<p *ngIf="username.invalid && username.touched">Username required</p>
</div>
<div class="form-inputs">
<label for="password" class="form-label">Password:</label>
<input
id="password"
type="password"
name="password"
class="form-input"
placeholder="Enter password"
ngModel
required
#password="ngModel"
[(ngModel)]="model.password"
/>
<p *ngIf="password.invalid && password.touched">password required</p>
</div>
<div class="form-inputs">
<label for="passwordvalidate" class="form-label">Password:</label>
<input
id="confirmpassword"
type="password"
name="confirmpassword"
class="form-input"
placeholder="Confirm password"
ngModel
required
#password2="ngModel"
ngValidateEqual="password"
[(ngModel)]="model.confirmpassword"
/>
<div *ngIf="(password2.dirty || password2.touched) && password2.invalid">
<p *ngIf="password2.hasError('notEqual') && password.valid">
Passwords do not match
</p>
</div>
</div>
<button
class="form-input-btn"
type="submit"
[disabled]="myForm.invalid"
routerLink="/success"
>
Sign Up
</button>
</form>
</div>
Mẫu HTML phản ứng
Các Signup.js tệp chứa mã sau:
import React from "react";
import useForm from "../useForm";
import validate from "../validateData";
import "./Signup.css"const Signup = ({submitForm}) => {
const {handleChange, values, handleSubmit, errors} = useForm( submitForm, validate);
return (
<div className="form-content">
<form className="form" onSubmit={handleSubmit}>
<h1>Complete the form to join our community!</h1>
<div className="form-inputs">
<label htmlFor="username" className="form-label">Username:</label>
<input
id="username"
type="text"
name="username"
className="form-input"
placeholder="Enter username"
value={values.username}
onChange={handleChange}
/>
{errors.username && <p>{errors.username}</p>}
</div>
<div className="form-inputs">
<label htmlFor="password" className="form-label"> Password: </label>
<input
id="password"
type="password"
name="password"
className="form-input"
placeholder="Enter password"
value={values.password}
onChange={handleChange}
/>
{errors.password && <p>{errors.password}</p>}
</div>
<div className="form-inputs">
<label htmlFor="passwordvalidate" className="form-label"> Password: </label>
<input
id="passwordvalidate"
type="password"
name="passwordvalidate"
className="form-input"
placeholder="Confirm password"
value={values.passwordvalidate}
onChange={handleChange}
/>
{errors.passwordvalidate && <p>{errors.passwordvalidate}</p>}
</div>
<button className="form-input-btn" type="submit">Sign Up</button>
</form>
</div>
)
}
export default Signup;
Bạn sẽ nhận thấy rằng cả hai ứng dụng đều sử dụng mã HTML cơ bản, ngoại trừ một số khác biệt nhỏ. Ví dụ: ứng dụng Angular sử dụng thuộc tính “class” tiêu chuẩn để xác định các lớp CSS. React sử dụng thuộc tính “className” tùy chỉnh của riêng nó. React biến điều này thành thuộc tính “class” tiêu chuẩn trong đầu ra cuối cùng. Giao diện người dùng đóng một vai trò quan trọng trong sự thành công của bất kỳ ứng dụng nào. Vì cả hai ứng dụng đều sử dụng cùng một cấu trúc HTML và tên lớp nên cả hai ứng dụng đều có thể sử dụng cùng một biểu định kiểu.
Tất cả các thuộc tính không chuẩn trong các mẫu ở trên đều liên quan đến xác nhận.
Tạo xác thực biểu mẫu cho ứng dụng Angular
Để truy cập các thuộc tính xác thực là một phần của phương pháp tiếp cận theo hướng mẫu của Angular, bạn sẽ cần nhập FormsModule bên trong app.module.ts tập tin.
Tệp app.module.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { ValidateEqualModule } from 'ng-validate-equal'import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormSignupComponent } from './form-signup/form-signup.component';
import { FormSuccessComponent } from './form-success/form-success.component';
@NgModule({
declarations: [
AppComponent,
FormSignupComponent,
FormSuccessComponent
],
imports: [
BrowserModule,
FormsModule,
ValidateEqualModule,
AppRoutingModule
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Bằng cách nhập FormsModule trong tệp ở trên, bây giờ bạn có quyền truy cập vào một loạt các thuộc tính xác thực khác nhau. Bạn sẽ cần thêm ngModel thuộc tính của các trường đầu vào của mẫu Angular HTML. Nếu bạn nhìn lại mẫu Angular ở trên, bạn sẽ thấy rằng mỗi phần tử đầu vào đều có thuộc tính này.
Các FormsModule và ngModel cấp cho nhà phát triển quyền truy cập vào các thuộc tính xác thực, chẳng hạn như có giá trị và không hợp lệ. Phần đoạn văn của mẫu Angular HTML sử dụng # tên người dùng = ”ngModel” bất động sản. Nó tạo ra một cảnh báo nếu dữ liệu trong trường đầu vào không hợp lệ và người dùng đã thay đổi nó.
bên trong app.module.ts tệp, bạn cũng sẽ thấy ValidateEqualModule, so sánh hai mật khẩu. Để làm điều này, bạn sẽ cần tạo một đối tượng mô hình trong form-signup.component.ts tập tin.
Tệp form-signup.component.ts
import { Component, OnInit } from '@angular/core';@Component({
selector: 'app-form-signup',
templateUrl: './form-signup.component.html',
styleUrls: ['./form-signup.component.css']
})
export class FormSignupComponent implements OnInit {
constructor() { }
ngOnInit(): void {}
model = {
password: null,
confirmpassword: null
};
}
Mật khẩu thứ hai trong mẫu Angular HTML sử dụng mô hình đối tượng trong tệp ở trên, để so sánh giá trị của nó với mật khẩu đầu tiên.
Các Vô hiệu hóa thuộc tính trên nút gửi đảm bảo rằng nó vẫn không hoạt động cho đến khi mọi trường đầu vào chứa dữ liệu hợp lệ. Việc gửi biểu mẫu sẽ đưa người dùng đến một trang thành công với sự hỗ trợ của bộ định tuyến Angular.
Tệp app.routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FormSignupComponent } from './form-signup/form-signup.component';
import { FormSuccessComponent } from './form-success/form-success.component';const routes: Routes = [{
path: '',
component: FormSignupComponent
},{
path: 'success',
component: FormSuccessComponent
}];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Mô-đun định tuyến ở trên chứa hai đường dẫn; đường dẫn chính cho biểu mẫu và đường dẫn thành công cho thành phần thành công.
Tệp app.component.html
<router-outlet></router-outlet>
Cổng ra bộ định tuyến trong tệp thành phần ứng dụng ở trên cho phép người dùng dễ dàng điều hướng giữa đăng ký biểu mẫu và hình thức thành công các thành phần sử dụng URL.
Tạo xác thực biểu mẫu cho ứng dụng React
export default function validateData(values) {
let errors = {}if (!values.username.trim()) {
errors.username = "Username required";
}
if (!values.password) {
errors.password = "Password required";
}
if (!values.passwordvalidate) {
errors.passwordvalidate = "Password required";
} else if (values.passwordvalidate !== values.password) {
errors.passwordvalidate = "Passwords do not match";
}
return errors;
}
Các validateData.js tệp chứa đoạn mã trên. Nó giám sát từng trường đầu vào trong biểu mẫu để đảm bảo rằng mỗi trường chứa dữ liệu hợp lệ.
Tệp useForm.js
import {useState, useEffect} from 'react';const useForm = (callback, validate) => {
const [values, setValues] = useState({
username: '',
password: '',
passwordvalidate: ''
});
const [errors, setErrors] = useState ({});
const [isSubmitting, setIsSubmitting] = useState (false)
const handleChange = e => {
const {name, value} = e.target;
setValues({
...values,
[name]: value
});
}
const handleSubmit = e => {
e.preventDefault();
setErrors(validate(values));
setIsSubmitting(true);
}
useEffect(() => {
if (Object.keys(errors).length === 0 && isSubmitting) {
callback();
}
}, [errors, callback, isSubmitting]);
return { handleChange, values, handleSubmit, errors };
}
export default useForm;
Trang phục, Hải quan useForm hook ở trên xác định xem người dùng có gửi biểu mẫu thành công hay không. Sự kiện này chỉ xảy ra nếu tất cả dữ liệu trong biểu mẫu là hợp lệ.
Tệp Form.js
import React from "react";
import Signup from "./Signup";
import Success from "./Success"
import { useState } from "react";const Form = () => {
const [isSubmitted, setIsSubmitted] = useState(false);
function submitForm() {
setIsSubmitted(true);
}
return (
<div>
{!isSubmitted ? (<Signup submitForm={submitForm} />) : (<Success />)}
</div>
)
}
export default Form;
Các Biểu mẫu thành phần ở trên chuyển đổi chế độ xem giữa Đăng ký thành phần và Sự thành công nếu biểu mẫu gửi đi.
Tệp App.js
import Form from "./components/Form";function App() {
return (
<div className="App">
<Form/>
</div>
);
}
export default App;
Giao diện người dùng ứng dụng Angular
Giao diện người dùng hiển thị một biểu mẫu với một đầu vào cho tên người dùng và hai đầu vào mật khẩu.
Khi biểu mẫu chứa dữ liệu không hợp lệ, các trang sẽ hiển thị thông báo lỗi:
Khi biểu mẫu chứa dữ liệu hợp lệ, người dùng có thể gửi thành công:
Giao diện người dùng ứng dụng React
Khi biểu mẫu chứa dữ liệu không hợp lệ:
Khi biểu mẫu chứa dữ liệu hợp lệ:
Điểm giống và khác nhau giữa React và Angular
Các khung công tác Angular và React rất giống nhau và có khả năng tạo ra các kết quả giống hệt nhau. Tuy nhiên, các công cụ mà bạn có thể sử dụng để đạt được những kết quả này sẽ khác nhau. Angular là một nền tảng phát triển cung cấp quyền truy cập vào các công cụ như bộ định tuyến và thư viện biểu mẫu. React đòi hỏi nhà phát triển phải sáng tạo hơn một chút để đạt được kết quả tương tự.
Đọc tiếp
Giới thiệu về tác giả
