ما هو AngularJS؟
AngularJS هو إطار هيكلي مصمم لتطبيقات الويب الديناميكية. يتيح لك استخدام HTML كلغة قالب ، ومن خلال تمديد بناء جملة HTML ، يمكنك إنشاء مكونات التطبيق بشكل أكثر وضوحًا وإيجازًا. ابتكارها هو أنه يستخدم ربط البيانات وحقن التبعية ، مما يلغي الحاجة إلى كتابة الكثير من التعليمات البرمجية. يتم تنفيذ كل هذه من خلال JavaScript من جانب المتصفح ، مما يجعله أيضًا مدمجًا تمامًا مع أي تقنية من جانب الخادم.
تم تصميم AngularJS للتغلب على أوجه القصور في HTML في تطبيقات البناء. HTML هي لغة إعلانية جيدة مصممة لعرض النص الثابت ، لكنها ستكون ضعيفة إذا كنت ترغب في إنشاء تطبيقات ويب. لذلك قمت ببعض الأعمال (قد تعتقد أنه كان خدعة صغيرة) للحصول على المتصفح لفعل ما أريد. تنسيق
عادةً ما نستخدم التقنيات التالية لحل أوجه القصور في تقنية الويب الثابتة في بناء التطبيقات الديناميكية:
1. مكتبة الفصل - مكتبة الفصل هي مجموعة من الوظائف التي يمكن أن تساعدك في كتابة تطبيقات الويب. إن الرمز الخاص بك هو الذي يقودك ، ويعود لك الأمر إلى تحديد موعد استخدام مكتبة الفصل. تشمل مكتبات الفصل: jQuery ، إلخ.
2. Framework - Framework هو تطبيق ويب خاص ومنفذ ، تحتاج فقط إلى ملء منطق أعمال محدد. يلعب Framework دورًا رائدًا هنا ، ويدعو الكود الخاص بك بناءً على منطق التطبيق المحدد. تشمل الإطارات: خروج المغلوب ، sproutcore ، إلخ.
يستخدم AngularJS نهجًا مختلفًا ، يحاول تعويض أوجه القصور في HTML نفسها في تطبيقات البناء. يسمح AngularJS للمتصفحات بالتعرف على بناء جملة جديد باستخدام بنية نسميها معرفات. على سبيل المثال:
1. استخدم بناء الأسعار المزدوجة {{}} لربط البيانات ؛
2. استخدم بنية التحكم في DOM لتكرار أو إخفاء شظايا DOM ؛
3. نماذج الدعم والتحقق من النماذج ؛
4. أن تكون قادرًا على ربط الكود المنطقي بعناصر DOM ذات الصلة ؛
5. يمكن تقسيم HTML إلى مكونات قابلة لإعادة الاستخدام.
حلول من طرف إلى طرف
يحاول AngularJS أن يصبح حلاً شاملاً في تطبيقات الويب. هذا يعني أنه ليس مجرد جزء صغير من تطبيق الويب الخاص بك ، ولكنه حل كامل من طرف إلى طرف. سيجعل هذا AngularJs يبدو "عنيدًا" عند إنشاء تطبيق يحتوي على Crud (إضافة إنشاء واستعلام الاستعلام وتحديث التحديث وحذف الحذف) (النص الأصلي ، وهذا يعني أنه لا توجد طرق أخرى). ولكن على الرغم من "العناد" ، فإنه لا يزال يضمن أن "العناد" هو في نقطة الانطلاق في بناء التطبيق الخاص بك ، ولا يزال بإمكانك التغيير بمرونة. بعض ميزات AngularJS المتميزة هي كما يلي:
1. تشمل جميع المحتويات الممكنة التي يمكن استخدامها لإنشاء تطبيق CRUD: ربط البيانات ، ومعرفات القالب الأساسية ، والتحقق من النماذج ، والتوجيه ، والربط العميق ، وإعادة استخدام المكون ، وحقن التبعية.
2. تشمل جوانب الاختبار: اختبار الوحدة ، والاختبار الشامل ، والمحاكاة وأطر الاختبار الآلي.
3. تطبيق البذور مع تخطيط الدليل واختبار البرامج النصية كنقطة انطلاق.
جاذبية AngularJS
يقوم AngularJS بتبسيط تطوير التطبيق من خلال تقديم مستوى أعلى من التجريد للمطورين. مثل التقنيات التجريدية الأخرى ، فإن هذا يفقد أيضًا بعض المرونة. بمعنى آخر ، ليست كل التطبيقات مناسبة للاستخدام مع AngularJS. ينظر AngularJS بشكل أساسي في بناء تطبيقات Crud. لحسن الحظ ، ما لا يقل عن 90 ٪ من تطبيقات الويب هي تطبيقات CRUD. ولكن لفهم ما هو مناسب للبناء مع AngularJS ، يجب أن تفهم ما هو غير مناسب للبناء مع AngularJs.
مثل الألعاب ومحرري الواجهة الرسومية ، تختلف التطبيقات التي تحتوي على عمليات DOM المتكررة والمعقدة تمامًا عن تطبيقات CRUD. أنها ليست مناسبة للبناء مع AngularJS. قد يكون من الأفضل استخدام بعض التقنيات الأخف والأبسط مثل jQuery مثل هذا.
مثيل AngularJS بسيط
فيما يلي تطبيق CRUD نموذجي يحتوي على نموذج. يتم التحقق من قيمة النموذج أولاً ثم تستخدم لحساب القيمة الإجمالية ، والتي يتم تنسيقها في النمط المحلي. فيما يلي بعض المفاهيم الشائعة للمطورين ، عليك أن تفهم أولاً:
1. ربط نموذج البيانات (نموذج البيانات) إلى العرض (UI) ؛
2. اكتب ، اقرأ وتحقق من إدخال المستخدم ؛
3. حساب القيم الجديدة بناءً على النموذج ؛
4. توطين تنسيق الإخراج.
index.html:
نسخة الكود كما يلي:
<! doctype html>
<html ng-app>
<head>
<script src = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<script src = "script.js"> </script>
</head>
<body>
<div ng-controller = "InvoiceCntl">
<b> فاتورة: </b>
<br>
<br>
<griding>
<tr> <td> الكمية </td> <td> التكلفة </td> </tr>
<tr>
<td> <input type = "integer" min = "0" ng-model = "qty" المطلوبة> </td>
<td> <input type = "number" ng-model = "cost" المطلوبة> </td>
</r>
</table>
<hr>
<b> المجموع: </b> {{qty * Cost | عملة}}
</div>
</body>
</html>
script.js:
نسخة الكود كما يلي:
دالة InvoicEcntl (نطاق $) {
$ scope.qty = 1 ؛
$ scope.cost = 19.95 ؛
}
الاختبار الشامل:
نسخة الكود كما يلي:
(يجب إظهار الربط الزاوي "، الدالة () {
توقع (ملزمة ('qty * cost')).
المدخلات ('qty'). أدخل ('2') ؛
المدخلات ("التكلفة"). أدخل ("5.00") ؛
توقع (ربط ('qty * cost')).
}) ؛
الدالة InvoiceCntl ($ scope) {$ scope.qty = 1 ؛ $ scope.cost = 19.95 ؛}
تأثير الجري:
نسخة الكود كما يلي:
فاتورة:
تكلفة الكمية
المجموع: {{qty * التكلفة | عملة}}
جرب المثال أعلاه ، ودعونا نلقي نظرة على كيفية عمل هذا المثال معًا. في علامة "، نستخدم معرف" تطبيق NG "للإشارة إلى أن هذا تطبيق AngularJS. سيؤدي هذا المعرف "App` إلى" angularjs ** إلى تهيئة التطبيق تلقائيًا. نستخدم علامة `` لتحميل برنامج AngularJS: <script src = "http://code.angularjs.org/angular-1.1.0.min.js">
من خلال إعداد خاصية NG-Model في علامة <pection> ، ستقوم AngularJs تلقائيًا بربط البيانات في اتجاهين. لقد أجرينا أيضًا بعض التحقق من البيانات البسيط في نفس الوقت:
نسخة الكود كما يلي:
الكمية: <input type = "integer" min = "0" ng-model = "qty" مطلوب>
التكلفة: <إدخال نوع = "رقم" ng-model = "التكلفة" المطلوبة>
تبدو أداة مربع الإدخال هذا عاديًا ، لكنها ليست عادية إذا كنت تتعرف على النقاط التالية:
1. عندما يتم تحميل الصفحة ، ستقوم AngularJs بإنشاء متغيرات بنفس الاسم وفقًا لاسم النموذج (الكمية ، التكلفة) المعلنة في القطعة. يمكنك التفكير في هذه المتغيرات مثل M (نموذج) في نمط تصميم MVC ؛
2. لاحظ أن المدخلات في القطعة أعلاه لها قدرات خاصة. إذا لم تقم بإدخال البيانات أو أن بيانات الإدخال غير صالحة ، فسيتحول مربع الإدخال هذا تلقائيًا إلى اللون الأحمر. هذه الميزة الجديدة من مربع الإدخال تجعل من السهل على المطورين تنفيذ وظائف التحقق من المجال المشتركة في تطبيقات CRUD.
أخيرًا ، يمكننا إلقاء نظرة على الأقواس المزدوجة الغامضة:
نسخة الكود كما يلي:
المجموع: {{qty * التكلفة | عملة}}
هذه العلامة {{expression}} هي ربط بيانات AngularJS. يمكن أن تكون التعبيرات الموجودة فيه مزيجًا من التعبير ومرشح ({{Expression | filter}}). يوفر AngularJS مرشحات لتنسيق بيانات الإدخال والإخراج.
في المثال أعلاه ، يطلب التعبير في {{}} AngularJs مضاعفة البيانات التي تم الحصول عليها من مربع الإدخال ، ثم تنسيق نتيجة الضرب إلى نمط العملة المحلية ، ثم إخراجها إلى الصفحة.
تجدر الإشارة إلى أننا لا ندعو أي طرق AngularJS ولا تكتب منطقًا محددًا مثل استخدام إطار عمل ، لكننا أكملنا الوظائف المذكورة أعلاه. وراء هذا التنفيذ هو أن المتصفح يقوم بمزيد من العمل من قبل لإنشاء صفحات ثابتة ، مما يسمح له بتلبية احتياجات تطبيقات الويب الديناميكية. يخفض AngularJS عتبة تطوير تطبيقات الويب الديناميكية إلى النقطة التي لا توجد فيها حاجة لمكتبات الفصل أو الأطر.
AngularJS's "Zen Tao (Concept)"
يعتقد Angular أنه عند بناء مشاهدات (UIS) وكتابة منطق البرمجيات ، ستكون الكود التصريحي أفضل بكثير من الكود الضروري ، على الرغم من أن التعليمات البرمجية الضرورية مناسبة للغاية للتعبير عن منطق العمل.
1. عمليات فصل DOM ومنطق التطبيق هي فكرة جيدة للغاية ، والتي يمكن أن تحسن بشكل كبير من توليف الرمز ؛
2. إنها فكرة جيدة جدًا لعلاج الاختبار والتطوير بالتساوي. تعتمد صعوبة الاختبار إلى حد كبير على بنية الكود ؛
3. فك تشفير جانب العميل والخادم هو ممارسة جيدة بشكل خاص. يمكن أن يمكّن كلا الجانبين من التطور بالتوازي وتمكين إعادة استخدام كلا الجانبين ؛
4. إذا كان بإمكان الإطار توجيه المطورين خلال عملية التطوير بأكملها: من تصميم واجهة المستخدم ، وكتابة منطق الأعمال ، ثم الاختبار ، فسيكون ذلك مفيدًا للمطورين ؛
5. من الجيد دائمًا "تبسيط المجمع إلى تبسيط ، وتبسيطه إلى صفر".
يمكن لـ AngularJs تحريرك من الكابوس التالي:
1. استخدم عمليات الاسترجاعات: سيؤدي استخدام عمليات الاسترجاع إلى تعطيل قابلية قراءة الكود الخاص بك ، وجعل الكود مجزأًا ، ومن الصعب رؤية منطق العمل الأصلي. إنه لأمر جيد إزالة بعض التعليمات البرمجية الشائعة ، مثل عمليات الاسترجاعات. يمكن أن يسمح لك الكود الذي يجب أن تكتبه بسبب تصميم لغة JavaScript بشكل كبير أن تسمح لك برؤية منطق تطبيقك بشكل أكثر وضوحًا.
2. اكتب رمزًا يدويًا لتشغيل عناصر DOM: يعد تشغيل DOM جزءًا أساسيًا للغاية من تطبيقات AJAX ، لكنه دائمًا "مرهق" ومعرض للخطأ. يمكن أن تتغير واجهة واجهة المستخدم الموضحة بطريقة تعريفية مع تغيير حالة التطبيق ، مما يتيح لك تحرير نفسك من كتابة رمز تشغيل DOM منخفض المستوى. في معظم التطبيقات المكتوبة في AngularJS ، لم يعد المطورون بحاجة إلى كتابة رموز تعمل DOM بأنفسهم ، ولكن لا يزال بإمكانك كتابتها إذا كنت تريد.
3. اقرأ وكتابة البيانات إلى واجهة واجهة المستخدم: جزء كبير من تطبيقات AJAX هو عمليات CRUD. تتمثل العملية الكلاسيكية في تكوين بيانات الخادم في كائنات داخلية ، ثم قم بتجميع الكائن في نماذج HTML ، ويقوم المستخدم بتعديل النموذج ثم التحقق من النموذج. إذا كان هناك أي خطأ ، فسوف يعرض الخطأ ، ثم إعادة تنظيم البيانات في كائنات داخلية وإعادتها إلى الخادم. هناك الكثير من التعليمات البرمجية التي يجب تكرارها في هذه العملية ، مما يجعل الرمز دائمًا يصف عملية التنفيذ بأكملها للتطبيق ، بدلاً من منطق العمل المحدد وتفاصيل العمل.
4. قبل البدء ، يجب عليك كتابة الكثير من التعليمات البرمجية الأساسية: عادةً ما تحتاج إلى كتابة الكثير من التعليمات البرمجية الأساسية لتنفيذ تطبيق "Hello World". باستخدام AngularJS ، ستوفر بعض الخدمات التي تتيح لك البدء في كتابة تطبيقك بسهولة ، ويتم إضافة هذه الخدمات تلقائيًا إلى تطبيقك مع حقن التبعية التبعية على غرار حقن التبعية ، مما يتيح لك إدخال التطوير المحدد لتطبيقك بسرعة. ما هو صحيح بشكل خاص هو أنه يمكنك فهم عملية التهيئة للاختبار الآلي بالكامل.