Angular JS مقابل. رد فعل شبيبة

Angular و React هما من أفضل أطر عمل الواجهة الأمامية لتطبيقات الويب. على الرغم من اختلاف نطاقاتهم قليلاً (أحدهما عبارة عن منصة تطوير والآخر مكتبة) ، إلا أنه يُنظر إليهم على أنهم منافسون رئيسيون. من الآمن أن نفترض أنه يمكنك استخدام أي من إطار العمل لتطوير تطبيق.

يصبح السؤال الرئيسي إذن: لماذا تختار واحدًا على الآخر؟ تهدف هذه المقالة إلى الإجابة عليها من خلال تطوير نموذج اشتراك بسيط. سيعتمد النموذج فقط على إمكانات التحقق من صحة كل إطار.

المتطلبات الأساسية

للمتابعة ، يجب أن تكون قادرًا على تثبيت React ولديهم فهم عام لـ كيف يعمل تطبيق React. يجب أن تعرف أيضًا كيفية التثبيت و استخدام الزاوي.

هيكل ملف كل تطبيق

يحتوي نموذج React على بنية الملف التالية:

يحتوي النموذج الزاوي على بنية الملف التالية:

تعرض الصورة أعلاه فقط القسم المحرر من تطبيق Angular.

من هياكل الملفات أعلاه ، يمكنك أن ترى أن كلا الإطارين يعتمدان بشدة على استخدام المكونات.

إنشاء المنطق لكل طلب نموذج

سيكون لكل تطبيق نفس الغرض: يتم إرسال النموذج فقط إذا كان كل حقل إدخال يحتوي على بيانات صحيحة. يكون حقل اسم المستخدم صالحًا إذا كان يحتوي على حرف واحد على الأقل. يكون حقلا كلمة المرور صالحين إذا كانت قيمهما متطابقة.

يوفر Angular طريقتين لإنشاء النموذج: تعتمد على القالب وتفاعلية. يسمح النهج التفاعلي للمطور بإنشاء معايير تحقق مخصصة. يأتي النهج المستند إلى القالب مع خصائص تبسط التحقق من صحة النموذج.

React قادرة فقط على تطوير نموذج مع التحقق المخصص. ومع ذلك ، فإن React هو إطار العمل الأكثر شيوعًا ولديه مجتمع أكبر ، لذا فإن العديد من مكتبات معالجة النماذج متاحة لـ React. نظرًا لأن الهدف هنا هو تجنب استخدام المكتبات الخارجية ، سيعتمد تطبيق React على التحقق المخصص.

تطوير النموذج لكل تطبيق

يعتمد كلا التطبيقين على القوالب لإنشاء مخرجات HTML النهائية.

قالب HTML الزاوي

ال form-signup.component.html يحتوي الملف على الكود التالي:

<فئة div ="شكل المحتوى">
<فئة النموذج ="شكل" # myForm ="ngForm">
<h1>أكمل النموذج للانضمام إلى مجتمعنا!</h1>
<فئة div ="شكل المدخلات">
<تسمية ل ="اسم االمستخدم" فئة ="تسمية النموذج">اسم المستخدم:</label>
<إدخال
 معرف ="اسم االمستخدم"
 اكتب ="نص"
صف دراسي= "إدخال النموذج"
 نائب ="ادخل اسم المستخدم"
 الاسم ="اسم االمستخدم"
 نموذج
 مطلوب
 # اسم المستخدم ="نموذج"
 />
<ع * ngIf ="اسم المستخدم غير صالح && اسم المستخدم">اسم المستخدم (مطلوب</ ص>
</div>
<فئة div ="شكل المدخلات">
<تسمية ل ="كلمه السر" فئة ="تسمية النموذج">كلمة المرور:</label>
<إدخال
 معرف ="كلمه السر"
 اكتب ="كلمه السر"
 الاسم ="كلمه السر"
صف دراسي= "إدخال النموذج"
 نائب ="أدخل كلمة المرور"
 نموذج
 مطلوب
 # كلمة المرور ="نموذج"
 [(ngModel)] ="نموذج"
 />
<ع * ngIf ="كلمة المرور غير صحيحة && كلمة المرور تمسها">كلمة المرور مطلوبة</ ص>
</div>
<فئة div ="شكل المدخلات">
<تسمية ل ="التحقق من صحة كلمة المرور" فئة ="تسمية النموذج">كلمة المرور:</label>
<إدخال
 معرف ="تأكيد كلمة المرور"
 اكتب ="كلمه السر"
 الاسم ="تأكيد كلمة المرور"
صف دراسي= "إدخال النموذج"
 نائب ="تأكيد كلمة المرور"
 نموذج
 مطلوب
 # password2 ="نموذج"
 ngValidateEqual ="كلمه السر"
 [(ngModel)] ="نموذج. تأكيد كلمة المرور"
 />
<div * ngIf ="(password2.dirty || password2.touched) && password2.invalid">
<ع * ngIf ="password2.hasError ('ليس متساوي') && كلمة المرور صالحة">
 كلمات السر فعلليستطابق
</ ص>
</div>
</div>
<زر
صف دراسي= "form-input-btn"
 اكتب ="إرسال"
 [معطل] ="myForm.invalid"
 routerLink ="/success"
>
 اشتراك
</button>
</form>
</div>

رد قالب HTML

ال Signup.js يحتوي الملف على الكود التالي:

يستورد تتفاعل من عند "تتفاعل"؛
يستورد useForm من عند "../useForm" ؛
يستورد التحقق من صحة من عند "../validateData" ؛
يستورد "./Signup.css"
مقدار ثابت الاشتراك = ({submitForm}) => {
مقدار ثابت {handleChange، القيم، handleSubmit، errors} = useForm (submitForm، validate) ؛
إرجاع (
<div className ="شكل المحتوى">
<شكل className ="شكل" onSubmit = {handleSubmit}>
<h1>أكمل النموذج للانضمام إلى مجتمعنا!</h1>
<div className ="شكل المدخلات">
<التسمية htmlFor ="اسم االمستخدم" className ="تسمية النموذج">اسم المستخدم:</label>
<إدخال
 معرف ="اسم االمستخدم"
 اكتب ="نص"
 الاسم ="اسم االمستخدم"
 className ="إدخال النموذج"
 نائب ="ادخل اسم المستخدم"
 القيمة = {values.username}
 onChange = {handleChange}
 />
{أخطاء اسم المستخدم &&<ص>{errors.username}</ ص>}
</div>
<div className ="شكل المدخلات">
<التسمية htmlFor ="كلمه السر" className ="تسمية النموذج"> كلمة المرور: </label>
<إدخال
 معرف ="كلمه السر"
 اكتب ="كلمه السر"
 الاسم ="كلمه السر"
 className ="إدخال النموذج"
 نائب ="أدخل كلمة المرور"
 القيمة = {قيم كلمة المرور}
 onChange = {handleChange}
 />
{أخطاء. كلمة المرور &&<ص>{errors.password}</ ص>}
</div>
<div className ="شكل المدخلات">
<التسمية htmlFor ="التحقق من صحة كلمة المرور" className ="تسمية النموذج"> كلمة المرور: </label>
<إدخال
 معرف ="التحقق من صحة كلمة المرور"
 اكتب ="كلمه السر"
 الاسم ="التحقق من صحة كلمة المرور"
 className ="إدخال النموذج"
 نائب ="تأكيد كلمة المرور"
 القيمة = {value.passwordvalidate}
 onChange = {handleChange}
 />
{errors.passwordvalidate &&<ص>{errors.passwordvalidate}</ ص>}
</div>
<زر className ="شكل المدخلات btn" اكتب ="إرسال">اشتراك</button>
</form>
</div>
 )
}
يصدّرإفتراضي اشتراك؛

ستلاحظ أن كلا التطبيقين يستخدمان كود HTML الأساسي ، باستثناء بعض الاختلافات الطفيفة. على سبيل المثال ، يستخدم التطبيق Angular سمة "class" القياسية لتحديد فئات CSS. تستخدم React خاصية "className" المخصصة الخاصة بها. يحول React هذا إلى سمة "class" القياسية في المخرجات النهائية. تلعب واجهة المستخدم دورًا مهمًا في نجاح أي تطبيق. نظرًا لأن كلا التطبيقين يستخدمان نفس بنية HTML وأسماء الفئات ، يمكن لكلا التطبيقين استخدام نفس ورقة الأنماط.

جميع الخصائص غير القياسية في القوالب أعلاه تتعلق بالتحقق من الصحة.

إنشاء التحقق من صحة النموذج للتطبيق الزاوي

للوصول إلى خصائص التحقق التي تعد جزءًا من نهج Angular المستند إلى القوالب ، ستحتاج إلى استيراد ملف النماذج في ال app.module.ts ملف.

ملف app.module.ts

يستورد {NgModule} من عند "@ الزاوي / الأساسية" ؛
يستورد {FormsModule} من عند "@ الزاوي / النماذج" ؛
يستورد {BrowserModule} من عند "@ angular / platform-browser" ؛
يستورد {ValidateEqualModule} من عند "ng- تحقق-يساوي"
يستورد {AppRoutingModule} من عند "./app-routing.module" ؛
يستورد {AppComponent} من عند "./app.component" ؛
يستورد {FormSignupComponent} من عند "./form-signup/form-signup.component" ؛
يستورد {FormSuccessComponent} من عند "./form-success/form-success.component" ؛
تضمين التغريدة({
 الإعلانات: [
 AppComponent ،
 FormSignupComponent ،
 FormSuccessComponent
 ],
 الواردات: [
 BrowserModule ،
 النماذج
 ValidateEqualModule ،
 AppRoutingModule
 ],
مقدمي: [],
التمهيد: [AppComponent]
})
يصدّرصف دراسيAppModule{ }

عن طريق استيراد ملف النماذج في الملف أعلاه ، يمكنك الآن الوصول إلى مجموعة من خصائص التحقق المختلفة. سوف تحتاج إلى إضافة نموذج الخاصية إلى حقول الإدخال في نموذج Angular HTML. إذا نظرت إلى النموذج Angular أعلاه ، سترى أن كل عنصر من عناصر الإدخال يحتوي على هذه الخاصية.

ال النماذج و نموذج منح المطور حق الوصول إلى خصائص التحقق مثل صالح و غير صالحة. يستخدم قسم الفقرة في نموذج Angular HTML امتداد الملف # اسم المستخدم = "ngModel" منشأه. ينتج تحذيرًا إذا كانت البيانات الموجودة في حقل الإدخال غير صالحة وقام المستخدم بتغييرها.

في ال app.module.ts ملف ، فسترى أيضًا ملف ValidateEqualModule، والذي يقارن بين كلمتين من كلمات المرور. للقيام بذلك ، سوف تحتاج إلى إنشاء كائن نموذج في form-signup.component.ts ملف.

ملف form-signup.component.ts

يستورد {مكون ، OnInit} من عند "@ الزاوي / الأساسية" ؛
@عنصر({
 المحدد: 'التطبيق-شكل-الاشتراك',
 templateUrl: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
يصدّر صف دراسيFormSignupComponentالأدواتOnInit{
البناء() { }
 ngOnInit (): فارغ {}
 النموذج = {
 كلمه السر: باطل,
 تأكيد كلمة المرور: باطل
 };
}

تستخدم كلمة المرور الثانية في نموذج Angular HTML امتداد الملف نموذج الكائن في الملف أعلاه ، لمقارنة قيمته بكلمة المرور الأولى.

ال معاق تضمن الخاصية الموجودة على زر الإرسال أنها تظل غير نشطة حتى يحتوي كل حقل إدخال على بيانات صالحة. يؤدي إرسال النموذج إلى نقل المستخدم إلى صفحة نجاح بمساعدة جهاز توجيه Angular.

ملف app.routing.module.ts

يستورد {NgModule} من عند "@ الزاوي / الأساسية" ؛
يستورد {RouterModule، Routes} من عند "@ الزاوي / جهاز التوجيه" ؛
يستورد {FormSignupComponent} من عند "./form-signup/form-signup.component" ؛
يستورد {FormSuccessComponent} من عند "./form-success/form-success.component" ؛
مقدار ثابت المسارات: المسارات = [{
 طريق: '',
 المكون: FormSignupComponent
},{
 طريق: 'نجاح',
 المكون: FormSuccessComponent
}];
تضمين التغريدة({
الواردات: [RouterModule.forRoot (المسارات)],
صادرات: [RouterModule]
})
يصدّرصف دراسيAppRoutingModule{ }

تحتوي وحدة التوجيه أعلاه على مسارين ؛ المسار الرئيسي للنموذج ومسار النجاح لمكون النجاح.

ملف app.component.html

<منفذ جهاز التوجيه></router-outlet>

يسمح منفذ جهاز التوجيه في ملف مكون التطبيق أعلاه للمستخدم بالتنقل بسهولة بين ملفات نموذج التسجيل و شكل النجاح المكونات التي تستخدم عناوين URL.

إنشاء التحقق من صحة النموذج لتطبيق React

يصدّرإفتراضيوظيفةالتحقق من صحة البيانات(القيم) {
يترك الأخطاء = {}
لو (!القيم.اسم االمستخدم.تقليم()) {
 أخطاء اسم المستخدم = "اسم المستخدم (مطلوب";
 }
لو (!القيم.كلمه السر) {
 أخطاء.كلمة المرور = "كلمة المرور مطلوبة";
 }
لو (!القيم.passwordvalidate) {
 errors.passwordvalidate = "كلمة المرور مطلوبة";
 } آخرلو (value.passwordvalidate! == values.password) {
 errors.passwordvalidate = "كلمات المرور فعلليستطابق";
 }
إرجاع أخطاء.
}

ال ValidateData.js يحتوي الملف على الكود أعلاه. يراقب كل حقل إدخال في النموذج للتأكد من أن كل حقل يحتوي على بيانات صحيحة.

ملف useForm.js

يستورد {useState ، useEffect} من عند 'تتفاعل'؛
مقدار ثابت useForm = (رد الاتصال والتحقق) => {
مقدار ثابت [القيم ، setValues] = useState ({
 اسم االمستخدم: '',
 كلمه السر: '',
 التحقق من صحة كلمة المرور: ''
 });
مقدار ثابت [أخطاء ، setErrors] = useState ({}) ،
مقدار ثابت [isSubmitting، setIsSubmitting] = useState (خاطئة)
مقدار ثابت handleChange = e => {
مقدار ثابت {الاسم ، القيمة} = e.target ؛
setValues ​​({
 ...القيم,
[اسم]: القيمة
 });
 }
مقدار ثابت handleSubmit = e => {
ه.منع افتراضي();
 setErrors (التحقق من صحة (القيم));
 تعيين هو تقديم (حقيقي);
 }
 useEffect (() => {
 إذا (مفاتيح الكائن (أخطاء). الطول 0 && يتم التقديم) {
 أتصل مرة أخرى()؛
 }
 }, [أخطاء ، رد ، يتم الإرسال]);
إرجاع {handleChange، القيم، handleSubmit، errors} ؛
}
يصدّرإفتراضي useForm.

العادة useForm الخطاف أعلاه يحدد ما إذا كان المستخدم قد أرسل النموذج بنجاح. يحدث هذا الحدث فقط إذا كانت جميع البيانات الموجودة في النموذج صالحة.

ملف Form.js

يستورد تتفاعل من عند "تتفاعل"؛
يستورد اشتراك من عند "./اشتراك"؛
يستورد نجاح من عند "./نجاح"
يستورد {useState} من عند "تتفاعل"؛
مقدار ثابت النموذج = () => {
مقدار ثابت [isSubmitted، setIsSubmitted] = useState (خاطئة);
وظيفةتقديم النموذج() {
 تم تقديمه (حقيقي);
 }
إرجاع (
<شعبة>
 {!يقدم؟ (<اشترك submitForm = {submitForm} />): (<نجاح />)}
</div>
 )
}
يصدّرإفتراضي استمارة؛

ال استمارة المكون أعلاه يبدل العرض بين ملف اشتراك المكون و نجاح المكون إذا قدم النموذج.

ملف App.js

يستورد استمارة من عند "./components/Form" ؛
وظيفةبرنامج() {
إرجاع (
<div className ="برنامج">
<استمارة/>
</div>
 );
}
يصدّرإفتراضي برنامج؛

واجهة مستخدم التطبيق الزاوي

تعرض واجهة المستخدم نموذجًا به إدخال واحد لاسم المستخدم ومدخلان لكلمة المرور.

عندما يحتوي النموذج على بيانات غير صالحة ، تعرض الصفحات رسائل خطأ:

عندما يحتوي النموذج على بيانات صالحة ، يمكن للمستخدم إرسالها بنجاح:

واجهة مستخدم تطبيق React

عندما يحتوي النموذج على بيانات غير صالحة:

عندما يحتوي النموذج على بيانات صحيحة:

أوجه التشابه والاختلاف بين React و Angular

تتشابه الأطر Angular و React بشكل ملحوظ وقادرة على إنتاج نتائج متطابقة. ومع ذلك ، ستختلف الأدوات التي قد تستخدمها لتحقيق هذه النتائج. Angular هو نظام أساسي للتطوير يوفر الوصول إلى أدوات مثل جهاز التوجيه ومكتبة النماذج. يتطلب React قدرًا أكبر من الإبداع من المطور لتحقيق نفس النتائج.

رد فعل مقابل. الزاوي: لماذا يكون التفاعل أكثر شيوعًا؟

اقرأ التالي

نبذة عن الكاتب