طريقة جيدة لبدء تعلم AngularJS هي إنشاء التطبيق الكلاسيكي "Hello World!":
1. قم بإنشاء ملف HTML باستخدام محرر النص المفضل لديك ، على سبيل المثال: HelloWorld.html.
2. انسخ رمز المصدر التالي إلى ملف HTML الخاص بك.
3. افتح ملف HTML هذا في متصفح الويب.
رمز المصدر:
نسخة الكود كما يلي:
<! doctype html>
<html ng-app>
<head>
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</head>
<body>
مرحبا بالعالم'}}!
</body>
</html>
يرجى تشغيل الرمز أعلاه في متصفحك لمعرفة التأثير.
الآن دعونا نلقي نظرة فاحصة على الكود ونرى ما يحدث. عند تحميل الصفحة ، تخبر App tag ng-app AngularJS بمعالجة صفحة HTML بأكملها وتغذي التطبيق:
نسخة الكود كما يلي:
<html ng-app>
يقوم هذا الخط بتحميل نص AngularJS:
نسخة الكود كما يلي:
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
(للحصول على تفاصيل حول AngularJS معالجة صفحة HTML بأكملها ، يرجى الاطلاع على Bootstrap.)
أخيرًا ، الجسم الموجود في العلامة هو قالب التطبيق ، ويظهر تحياتنا في واجهة المستخدم:
نسخة الكود كما يلي:
مرحبا بالعالم'}}!
لاحظ أن محتوى {{}} الموسومة بأقواس مزدوجة هو التعبير المربوطة في التحية ، وهي سلسلة بسيطة 'World'.
أدناه ، دعونا نلقي نظرة على مثال أكثر إثارة للاهتمام: ربط تعبير ديناميكي لنص التحية الخاص بنا باستخدام AngularJS.
مرحبا angularjs العالم!
يوضح هذا المثال ربط البيانات ثنائية الاتجاه لـ AngularJS:
1. تحرير وثيقة HelloWorld.html التي تم إنشاؤها في وقت سابق.
2. انسخ رمز المصدر التالي إلى ملف HTML الخاص بك.
3. تحديث نافذة المتصفح.
رمز المصدر:
نسخة الكود كما يلي:
<! doctype html>
<html ng-app>
<head>
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</head>
<body>
اسمك: <input type = "text" ng-model = "yourname" placeholder = "world">
<hr>
مرحبا {{yourname || 'عالم'}}!
</body>
</html>
يرجى تشغيل الرمز أعلاه في متصفحك لمعرفة التأثير.
يحتوي هذا المثال على الملاحظات المهمة التالية:
1. تعليمات إدخال النص <الإدخال ng-model = "yourname" /> مرتبط بمتغير نموذج يسمى yourname.
2. علامة الدعامة المزدوجة أضف متغير نموذجك لتحية النص.
3. لا تحتاج إلى تسجيل مستمع حدث أو إضافة معالج حدث للتطبيق!
حاول الآن كتابة اسمك في مربع الإدخال وسيتم تحديث الاسم الذي تكتبه على الفور وعرضه في التحية. هذا هو مفهوم ملزمة بيانات AngularJS ثنائية الاتجاه. تنعكس أي تغييرات على مربع الإدخال فورًا على متغير النموذج (اتجاه واحد) ، وينعكس أي تغييرات على متغير النموذج على الفور في نص التحية (الاتجاه الآخر).
AngularJS تحليل التطبيق
يصف هذا القسم المكونات الثلاثة لتطبيقات AngularJS ويشرح كيفية تعيينها إلى نمط تصميم النماذج-المراقبة:
قوالب
القالب هو ملف تكتبه في HTML و CSS لتقديم عرض التطبيق. يمكنك إضافة عنصر جديد وعلامات السمة إلى HTML كتوجيهات لمرجم AngularJS. برنامج التحويل البرمجي AngularJS قابل للتمديد تمامًا ، مما يعني أنه مع AngularJs ، يمكنك إنشاء علامات HTML الخاصة بك في HTML!
منطق التطبيق والسلوك
منطق التطبيق والسلوك هما وحدات التحكم التي تحددها في JavaScript. يختلف AngularJS عن تطبيقات Ajax القياسية ، فأنت لست بحاجة إلى كتابة مستمع أو وحدة تحكم DOM لأنها مدمجة بالفعل في AngularJs. هذه الميزات تجعل منطق التطبيق الخاص بك سهل الكتابة واختباره وصيانته وفهمه.
بيانات النموذج (البيانات)
يمتد النموذج من خصائص الكائنات المنتشر AngularJS. قد تكون البيانات الموجودة في النموذج كائن JavaScript أو صفيفًا أو نوعًا بدائيًا ، ولا يهم ، من المهم أن ينتمي جميعًا إلى كائنات AngularJS.
يحافظ AngularJS على التزامن ثنائي الاتجاه بين نموذج البيانات وواجهة واجهة واجهة العرض من خلال النطاق. بمجرد أن تتغير حالة النموذج ، ستقوم AngularJs على الفور بتحديث المنعكس في واجهة العرض والعكس بالعكس.
بالإضافة إلى ذلك ، يوفر AngularJS أيضًا بعض ميزات الخدمة المفيدة للغاية:
1. تشمل الخدمات الأساسية حقن التبعية ، XHR ، ذاكرة التخزين المؤقت ، توجيه URL وخدمات المتصفح التجريدية.
2. يمكنك أيضًا تمديد وإضافة خدمات التطبيق الخاصة بك.
3. يمكن أن تجعل هذه الخدمات مناسبة للغاية لكتابة تطبيقات الويب.