Angular JS לעומת תגובה JS

Angular ו-React הן שתיים מהמסגרות הקדמיות המובילות ליישומי אינטרנט. למרות שההיקפים שלהם שונים במקצת (אחד פלטפורמת פיתוח, השני ספריה), הם נתפסים כמתחרים עיקריים. זה בטוח להניח שאתה יכול להשתמש בכל אחת מהמסגרת כדי לפתח אפליקציה.

השאלה המרכזית הופכת אז: למה שתבחר באחד על פני השני? מאמר זה נועד לענות על כך על ידי פיתוח טופס הרשמה פשוט. הטופס יתבסס אך ורק על יכולות האימות של כל מסגרת.

דרישות מוקדמות

כדי להמשיך, אתה אמור להיות מסוגל להתקין את React ויש לי הבנה כללית של כיצד פועלת אפליקציית React. אתה צריך גם לדעת איך להתקין ו השתמש ב-Angular.

מבנה הקובץ של כל יישום

לטופס React יש את מבנה הקבצים הבא:

לטופס Angular יש את מבנה הקובץ הבא:

התמונה למעלה מציגה רק את הקטע הערוך של יישום Angular.

ממבני הקבצים למעלה ניתן לראות ששתי המסגרות מסתמכות במידה רבה על השימוש ברכיבים.

יצירת ההיגיון עבור כל בקשה לטופס

לכל בקשה תהיה אותה מטרה: הטופס נשלח רק אם כל שדה קלט מכיל נתונים חוקיים. שדה שם המשתמש חוקי אם הוא מכיל לפחות תו אחד. שני שדות הסיסמה תקפים אם הערכים שלהם זהים.

Angular מספקת שתי שיטות ליצירת טפסים: מונעת תבנית ותגובתית. הגישה הריאקטיבית מאפשרת למפתח ליצור קריטריוני אימות מותאמים אישית. הגישה מונעת התבניות מגיעה עם מאפיינים המפשטים את אימות הטפסים.

React מסוגלת לפתח רק טופס עם אימות מותאם אישית. עם זאת, React היא המסגרת הפופולרית יותר ויש לה קהילה גדולה יותר, כך שספריות רבות לטיפול בטפסים זמינות עבור React. בהתחשב בכך שהמטרה כאן היא להימנע משימוש בספריות חיצוניות, אפליקציית React תסתמך על אימות מותאם אישית.

פיתוח התבנית לכל אפליקציה

שני היישומים מסתמכים על תבניות ליצירת פלט ה-HTML הסופי.

תבנית HTML זוויתית

ה form-signup.component.html הקובץ מכיל את הקוד הבא:

<div class="צורה-תוכן">
<טופס class="טופס" #myForm="ngForm">
<h1>מלא את הטופס כדי להצטרף לקהילה שלנו!</h1>
<div class="כניסות טופס">
<תווית עבור="שם משתמש" class="טופס-תווית">שם משתמש:</label>
<קֶלֶט
 id="שם משתמש"
 סוג="טֶקסט"
מעמד="-form-input"
 מציין מיקום="הכנס שם משתמש"
 שם="שם משתמש"
 ngModel
 נדרש
 #username="ngModel"
 />
<p *ngIf="username.invalid && שם משתמש.נוגע">שם משתמש (חובה</p>
</div>
<div class="כניסות טופס">
<תווית עבור="סיסמה" class="טופס-תווית">סיסמה:</label>
<קֶלֶט
 id="סיסמה"
 סוג="סיסמה"
 שם="סיסמה"
מעמד="-form-input"
 מציין מיקום="הזן את הסיסמה"
 ngModel
 נדרש
 #סיסמה="ngModel"
 [(ngModel)]="model.password"
 />
<p *ngIf="הסיסימא אינה תקפה && סיסמה.נגע">נדרשת סיסמה</p>
</div>
<div class="כניסות טופס">
<תווית עבור="לאמת סיסמה" class="טופס-תווית">סיסמה:</label>
<קֶלֶט
 id="אשר סיסמה"
 סוג="סיסמה"
 שם="אשר סיסמה"
מעמד="-form-input"
 מציין מיקום="אשר סיסמה"
 ngModel
 נדרש
 #סיסמה2="ngModel"
 ngValidateEqual="סיסמה"
 [(ngModel)]="model.confirmpassword"
 />
<div *ngIf="(password2.dirty || password2.touched) && סיסמה2.לא חוקית">
<p *ngIf="password2.hasError('לא שווה') && password.valid">
 סיסמאות לַעֲשׂוֹתלֹאהתאמה
</p>
</div>
</div>
<לַחְצָן
מעמד="form-input-btn"
 סוג="שלח"
 [מושבת]="myForm.invalid"
 routerLink="/success"
>
 הירשם
</button>
</form>
</div>

תבנית HTML של תגובה

ה Signup.js הקובץ מכיל את הקוד הבא:

יְבוּא לְהָגִיב מ "לְהָגִיב";
יְבוּא useForm מ "../useForm";
יְבוּא לְאַמֵת מ "../validateData";
יְבוּא "./Signup.css"
const הרשמה = ({submitForm}) => {
const {handleChange, values, handleSubmit, errors} = useForm( submitForm, validate);
לַחֲזוֹר (
<div className="צורה-תוכן">
<טופס className="טופס" onSubmit={handleSubmit}>
<h1>מלא את הטופס כדי להצטרף לקהילה שלנו!</h1>
<div className="כניסות טופס">
<תווית htmlFor="שם משתמש" className="טופס-תווית">שם משתמש:</label>
<קֶלֶט
 id="שם משתמש"
 סוג="טֶקסט"
 שם="שם משתמש"
 className="קלט טופס"
 מציין מיקום="הכנס שם משתמש"
 value={values.username}
 onChange={handleChange}
 />
{errors.username &&<ע>{errors.username}</p>}
</div>
<div className="כניסות טופס">
<תווית htmlFor="סיסמה" className="טופס-תווית"> סיסמה: </label>
<קֶלֶט
 id="סיסמה"
 סוג="סיסמה"
 שם="סיסמה"
 className="קלט טופס"
 מציין מיקום="הזן את הסיסמה"
 value={values.password}
 onChange={handleChange}
 />
{errors.password &&<ע>{errors.password}</p>}
</div>
<div className="כניסות טופס">
<תווית htmlFor="לאמת סיסמה" className="טופס-תווית"> סיסמה: </label>
<קֶלֶט
 id="לאמת סיסמה"
 סוג="סיסמה"
 שם="לאמת סיסמה"
 className="קלט טופס"
 מציין מיקום="אשר סיסמה"
 value={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<ע>{errors.passwordvalidate}</p>}
</div>
<כפתור className="form-input-btn" סוג="שלח">הירשם</button>
</form>
</div>
 )
}
יְצוּאבְּרִירַת מֶחדָל הירשם;

תבחין ששתי היישומים משתמשים בקוד HTML בסיסי, למעט כמה הבדלים קלים. לדוגמה, היישום Angular משתמש בתכונה הסטנדרטית "class" כדי לזהות מחלקות CSS. React משתמש במאפיין "className" מותאם אישית משלה. React הופך את זה לתכונה הסטנדרטית "class" בפלט הסופי. ממשק המשתמש ממלא תפקיד חשוב בהצלחת כל אפליקציה. מכיוון ששני היישומים משתמשים באותו מבנה HTML ושמות מחלקות, שני היישומים יכולים להשתמש באותו גיליון סגנונות.

כל המאפיינים הלא סטנדרטיים בתבניות לעיל מתייחסים לאימות.

יצירת אימות הטופס עבור היישום Angular

כדי לגשת למאפייני האימות שהם חלק מהגישה מונעת התבניות של Angular, תצטרך לייבא את FormsModule בתוך ה app.module.ts קוֹבֶץ.

הקובץ app.module.ts

יְבוּא { NgModule } מ '@angular/core';
יְבוּא { FormsModule } מ '@angular/forms';
יְבוּא { BrowserModule } מ '@angular/platform-browser';
יְבוּא { ValidateEqualModule } מ 'ng-validate-equal'
יְבוּא { AppRoutingModule } מ './app-routing.module';
יְבוּא { AppComponent } מ './app.component';
יְבוּא { FormSignupComponent } מ './form-signup/form-signup.component';
יְבוּא { FormSuccessComponent } מ './form-success/form-success.component';
@NgModule({
 הצהרות: [
 AppComponent,
 FormSignupComponent,
 FormSuccessComponent
 ],
 יבוא: [
 BrowserModule,
 FormsModule,
 ValidateEqualModule,
 AppRoutingModule
 ],
ספקים: [],
אתחול: [ AppComponent ]
})
יְצוּאמעמדAppModule{ }

על ידי ייבוא ​​של FormsModule בקובץ שלמעלה, כעת יש לך גישה למגוון של מאפייני אימות שונים. תצטרך להוסיף את ngModel מאפיין לשדות הקלט של תבנית HTML Angular. אם תסתכל אחורה על התבנית Angular למעלה, תראה שלכל אחד ממרכיבי הקלט יש את המאפיין הזה.

ה FormsModule ו ngModel לתת למפתח גישה למאפייני אימות כגון תָקֵף ו לא חוקי. קטע הפסקה של תבנית HTML Angular משתמש ב- #username="ngModel" תכונה. זה מייצר אזהרה אם הנתונים בשדה הקלט אינם חוקיים והמשתמש שינה אותם.

בתוך ה app.module.ts קובץ, תראה גם את ValidateEqualModule, אשר משווה בין שתי הסיסמאות. כדי לעשות זאת, תצטרך ליצור אובייקט דגם ב- form-signup.component.ts קוֹבֶץ.

הקובץ form-signup.component.ts

יְבוּא { Component, OnInit } מ '@angular/core';
@רְכִיב({
 בוחר: 'אפליקציה-טופס-הרשמה',
 templateUrl: './form-signup.component.html',
 סגנון כתובות אתרים: ['./form-signup.component.css']
})
יְצוּא מעמדFormSignupComponentמיישםOnInit{
בַּנַאִי() { }
 ngOnInit(): בָּטֵל {}
 דגם = {
 סיסמה: ריק,
 אשר סיסמה: ריק
 };
}

הסיסמה השנייה בתבנית Angular HTML משתמשת ב- דֶגֶם object בקובץ למעלה, כדי להשוות את ערכו לסיסמה הראשונה.

ה נָכֶה המאפיין בלחצן הגשה מבטיח שהוא יישאר לא פעיל עד שכל שדה קלט יכיל נתונים חוקיים. שליחת הטופס מביאה את המשתמש לעמוד הצלחה בעזרת הנתב של Angular.

קובץ app.routing.module.ts

יְבוּא { NgModule } מ '@angular/core';
יְבוּא { RouterModule, Routes } מ '@angular/נתב';
יְבוּא { FormSignupComponent } מ './form-signup/form-signup.component';
יְבוּא { FormSuccessComponent } מ './form-success/form-success.component';
const מסלולים: מסלולים = [{
 נָתִיב: '',
 רכיב: FormSignupComponent
},{
 נָתִיב: 'הַצלָחָה',
 רכיב: FormSuccessComponent
}];
@NgModule({
יבוא: [RouterModule.forRoot (מסלולים)],
יצוא: [ראוטרמודול]
})
יְצוּאמעמדAppRoutingModule{ }

מודול הניתוב למעלה מכיל שני נתיבים; הנתיב העיקרי לטופס ונתיב ההצלחה למרכיב ההצלחה.

הקובץ app.component.html

<שקע נתב></router-outlet>

שקע הנתב בקובץ רכיב האפליקציה למעלה מאפשר למשתמש לנווט בקלות בין הרשמה לטופס ו צורה-הצלחה רכיבים באמצעות כתובות URL.

יצירת אימות הטופס עבור יישום React

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהלאמת נתונים(ערכים) {
תן שגיאות = {}
אם (!ערכים.שם משתמש.מְטוּפָּח()) {
 errors.username = "שם משתמש (חובה";
 }
אם (!ערכים.סיסמה) {
 errors.password = "נדרשת סיסמה";
 }
אם (!ערכים.passwordvalidate) {
 errors.passwordvalidate = "נדרשת סיסמה";
 } אַחֵראם (values.passwordvalidate !== values.password) {
 errors.passwordvalidate = "סיסמאות לַעֲשׂוֹתלֹאהתאמה";
 }
לַחֲזוֹר שגיאות;
}

ה validateData.js הקובץ מכיל את הקוד למעלה. הוא עוקב אחר כל שדה קלט בטופס כדי להבטיח שכל שדה מכיל נתונים חוקיים.

הקובץ useForm.js

יְבוּא {useState, useEffect} מ 'לְהָגִיב';
const useForm = (התקשרות חוזרת, אימות) => {
const [values, setValues] = useState({
 שם משתמש: '',
 סיסמה: '',
 אימות סיסמה: ''
 });
const [errors, setErrors] = useState ({});
const [isSubmitting, setIsSubmitting] = useState (שֶׁקֶר)
const handleChange = e => {
const {name, value} = e.target;
setValues({
 ...ערכים,
[שֵׁם]: ערך
 });
 }
const handleSubmit = e => {
ה.preventDefault();
 setErrors (validate(ערכים));
 setIssubmitting(נָכוֹן);
 }
 useEffect(() => {
 if (Object.keys (errors).length 0 && issubmitting) {
 התקשר חזרה();
 }
 }, [שגיאות, התקשרות חוזרת, isSubmitting]);
לַחֲזוֹר { handleChange, values, handleSubmit, errors };
}
יְצוּאבְּרִירַת מֶחדָל useForm;

המנהג useForm ה-hook למעלה קובע אם המשתמש שלח את הטופס בהצלחה. אירוע זה מתרחש רק אם כל הנתונים בטופס תקפים.

הקובץ Form.js

יְבוּא לְהָגִיב מ "לְהָגִיב";
יְבוּא הירשם מ "./הירשם";
יְבוּא הַצלָחָה מ "./הַצלָחָה"
יְבוּא { useState } מ "לְהָגִיב";
const טופס = () => {
const [isSubmitted, setIsSubmitted] = useState(שֶׁקֶר);
פוּנקצִיָהלהגיש טופס() {
 setIssubmitted(נָכוֹן);
 }
לַחֲזוֹר (
<div>
 {!issubmitted? (<הרשמה submitForm={submitForm} />): (<הצלחה />)}
</div>
 )
}
יְצוּאבְּרִירַת מֶחדָל טופס;

ה טופס הרכיב שלמעלה מחליף את התצוגה בין הירשם רכיב ואת הַצלָחָה רכיב אם הטופס נשלח.

הקובץ App.js

יְבוּא טופס מ "./components/Form";
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
<div className="אפליקציה">
<טופס/>
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

ממשק המשתמש של Angular Application

ממשק המשתמש מציג טופס עם קלט אחד עבור שם המשתמש ושתי כניסות סיסמה.

כאשר הטופס מכיל נתונים לא חוקיים, הדפים מציגים הודעות שגיאה:

כאשר הטופס מכיל נתונים חוקיים, המשתמש יכול לשלוח אותם בהצלחה:

ממשק המשתמש של React Application

כאשר הטופס מכיל נתונים לא חוקיים:

כאשר הטופס מכיל נתונים חוקיים:

קווי דמיון והבדלים בין React ל-Angular

מסגרות Angular ו-React דומות להפליא ומסוגלות לייצר תוצאות זהות. עם זאת, הכלים שבהם אתה עשוי להשתמש כדי להשיג תוצאות אלה יהיו שונים. Angular היא פלטפורמת פיתוח המספקת גישה לכלים כגון נתב וספריית טפסים. React דורשת מהמפתח קצת יותר יצירתיות כדי להשיג את אותן תוצאות.

תגובה לעומת Angular: מדוע React כל כך פופולרי יותר?

קרא הבא

על הסופר