Angular JS در مقابل React JS

اگر مطمئن نیستید که چگونه بین Angular و React یکی را انتخاب کنید، یک برنامه نمونه ساده را بررسی کنید تا تفاوت ها را بررسی کنید.

Angular و React دو فریم ورک فرانت اند برتر برای برنامه های کاربردی وب هستند. اگرچه دامنه آنها کمی متفاوت است (یکی یک پلت فرم توسعه، دیگری یک کتابخانه)، آنها به عنوان رقبای اصلی در نظر گرفته می شوند. می توان فرض کرد که می توانید از هر یک از فریم ورک ها برای توسعه یک برنامه استفاده کنید.

سوال اصلی این است: چرا یکی را بر دیگری انتخاب می کنید؟ این مقاله قصد دارد با ایجاد یک فرم ثبت نام ساده به آن پاسخ دهد. این فرم صرفاً بر قابلیت های اعتبارسنجی هر فریم ورک متکی است.

پیش نیازها

برای ادامه، باید بتوانید React را نصب کنید و درک کلی از نحوه عملکرد یک برنامه React داشته باشید. همچنین باید نحوه نصب و استفاده از Angular را بدانید.

ساختار فایل هر برنامه

فرم React دارای ساختار فایل زیر است:

فرم Angular دارای ساختار فایل زیر است:

تصویر بالا فقط بخش ویرایش شده برنامه Angular را نشان می دهد.

از ساختار فایل بالا می توانید ببینید که هر دو فریم ورک به شدت به استفاده از کامپوننت ها متکی هستند.

ایجاد منطق برای هر فرم درخواست

هر برنامه یک هدف را خواهد داشت: فرم تنها در صورتی ارسال می شود که هر فیلد ورودی حاوی داده های معتبر باشد. فیلد نام کاربری در صورتی معتبر است که حاوی حداقل یک کاراکتر باشد. دو فیلد رمز عبور در صورتی معتبر هستند که مقادیر آنها یکسان باشد.

Angular دو روش ایجاد فرم را ارائه می دهد: الگو محور و واکنشی. رویکرد واکنشی به توسعه دهنده اجازه می دهد تا معیارهای اعتبار سنجی سفارشی را ایجاد کند. رویکرد الگو محور دارای ویژگی هایی است که اعتبار سنجی فرم را ساده می کند.

React تنها قادر به توسعه فرمی با اعتبارسنجی سفارشی است. با این حال، React چارچوب محبوب‌تری است و جامعه بزرگ‌تری دارد، بنابراین بسیاری از کتابخانه‌های مدیریت فرم برای React در دسترس هستند. با توجه به اینکه هدف در اینجا اجتناب از استفاده از کتابخانه های خارجی است، برنامه React بر اعتبارسنجی سفارشی تکیه می کند.

توسعه الگو برای هر برنامه

هر دو برنامه برای ایجاد خروجی نهایی HTML به قالب ها متکی هستند.

قالب HTML Angular

فایل form-signup.component.html حاوی کد زیر است:

<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>

قالب HTML React

فایل Signup.js حاوی کد زیر است:

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;

متوجه خواهید شد که هر دو برنامه از کد HTML اولیه استفاده می کنند، به جز برخی تفاوت های جزئی. به عنوان مثال، برنامه Angular از ویژگی استاندارد “class” برای شناسایی کلاس های CSS استفاده می کند. React از ویژگی «className» سفارشی خود استفاده می کند. React این را به ویژگی استاندارد “class” در خروجی نهایی تبدیل می کند. رابط کاربری نقش مهمی در موفقیت هر برنامه ای دارد. از آنجایی که هر دو برنامه از یک ساختار HTML و نام کلاس ها استفاده می کنند، هر دو برنامه می توانند از یک stylesheet استفاده کنند.

تمام ویژگی‌های غیر استاندارد در قالب‌های بالا به اعتبارسنجی مربوط می‌شوند.

ایجاد اعتبارسنجی فرم برای برنامه Angular

برای دسترسی به ویژگی‌های اعتبارسنجی که بخشی از رویکرد الگو محور Angular هستند، باید FormsModule را در فایل app.module.ts وارد کنید.

فایل 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 { }

با وارد کردن FormsModule در فایل بالا، اکنون به طیف وسیعی از ویژگی های اعتبارسنجی مختلف دسترسی دارید. شما باید ویژگی ngModel را به فیلدهای ورودی قالب Angular HTML اضافه کنید. اگر به الگوی Angular بالا نگاه کنید، خواهید دید که هر یک از عناصر ورودی این ویژگی را دارند.

FormsModule و ngModel به توسعه‌دهنده دسترسی به ویژگی‌های اعتبارسنجی مانند valid و invalid را می‌دهند. بخش پاراگراف قالب Angular HTML از ویژگی #username=”ngModel” استفاده می کند. در صورتی که داده های فیلد ورودی نامعتبر باشد و کاربر آن را تغییر داده باشد، اخطاری ایجاد می کند.

در فایل app.module.ts، ValidateEqualModule را نیز خواهید دید که این دو رمز عبور را با هم مقایسه می کند. برای انجام این کار، باید یک شی مدل در فایل form-signup.component.ts ایجاد کنید.

فایل 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
    };
}

رمز دوم در قالب Angular HTML از شی مدل موجود در فایل بالا استفاده می کند تا مقدار آن را با رمز عبور اول مقایسه کند.

ویژگی غیرفعال شده روی دکمه ارسال تضمین می‌کند که تا زمانی که هر فیلد ورودی حاوی داده‌های معتبر نباشد، غیرفعال می‌ماند. ارسال فرم کاربر را با کمک روتر Angular به یک صفحه موفقیت آمیز می آورد.

فایل 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 { }

ماژول مسیریابی بالا شامل دو مسیر است. مسیر اصلی برای فرم و مسیر موفقیت برای مؤلفه موفقیت.

فایل app.component.html

<router-outlet></router-outlet>

خروجی روتر در فایل مؤلفه برنامه در بالا به کاربر این امکان را می دهد که به راحتی بین مؤلفه های فرم ثبت نام و مؤلفه های موفقیت فرم با استفاده از URL ها حرکت کند.

ایجاد اعتبارسنجی فرم برای برنامه 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;
}

فایل validateData.js حاوی کد بالا است. هر فیلد ورودی در فرم را کنترل می کند تا اطمینان حاصل شود که هر فیلد حاوی داده های معتبر است.

فایل 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;

قلاب useForm سفارشی بالا تعیین می کند که آیا کاربر فرم را با موفقیت ارسال می کند یا خیر. این رویداد تنها در صورتی رخ می دهد که تمام داده های داخل فرم معتبر باشند.

فایل 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;

در صورت ارسال فرم، مؤلفه Form در بالا، نما را بین مؤلفه Signup و مؤلفه Success تغییر می دهد.

فایل App.js

import Form from "./components/Form";
 
function App() {
    return (
        <div className="App">
            <Form/>
        </div>
    );
}
 
export default App;

رابط کاربری Angular Application

UI فرمی را با یک ورودی برای نام کاربری و دو ورودی رمز عبور نمایش می دهد.

هنگامی که فرم حاوی داده های نامعتبر است، صفحات پیام های خطا را نمایش می دهند:

هنگامی که فرم حاوی داده های معتبر باشد، کاربر می تواند آن را با موفقیت ارسال کند:

رابط کاربری React Application

وقتی فرم حاوی داده های نامعتبر است:

هنگامی که فرم حاوی داده های معتبر است:

شباهت ها و تفاوت های بین React و Angular

فریم ورک های Angular و React به طور قابل ملاحظه ای مشابه هستند و قادر به تولید نتایج یکسان هستند. با این حال، ابزارهایی که ممکن است برای دستیابی به این نتایج استفاده کنید متفاوت خواهد بود. Angular یک پلت فرم توسعه است که دسترسی به ابزارهایی مانند روتر و کتابخانه فرم را فراهم می کند. React برای دستیابی به نتایج مشابه کمی خلاقیت بیشتر از توسعه دهنده نیاز دارد.

منبع مقاله