نحن الآن نستعد لكتابة تطبيق AngularJS - phonecat. في هذه الخطوة (الخطوة 0) ، ستصبح على دراية بملفات التعليمات البرمجية المهمة ، وتعلم بدء بيئة تطوير تحتوي على مشاريع بذور AngularJS ، وتشغيل التطبيق على جانب المتصفح.
أدخل دليل Angular-Phonecat وقم بتشغيل الأمر التالي:
git checkout -f step -0
سيقوم هذا الأمر بإعادة ضبط دليل العمل لمشروع Phonecat. يوصى بتشغيل هذا الأمر في كل خطوة تعليمية ، وتغيير الرقم في الأمر إلى الرقم المقابل لخطوة التعلم ، وسيقوم الأمر بمسح أي تغييرات أجريت في دليل العمل.
قم بتشغيل الأمر التالي:
نود البرامج النصية/الويب server.js
لبدء الخادم ، ستطالبك محطة سطر الأوامر بخادم HTTP الذي يعمل على http: // localhost: 8000. من فضلك لا تغلق المحطة. إغلاق المحطة سيغلق الخادم. أدخل http: // localhost: 8000/app/index.html في متصفحك للوصول إلى تطبيق phonecat الخاص بنا.
الآن ، في المتصفح ، كان يجب أن ترى تطبيقنا الأولي ، وهو أمر بسيط ، لكنه يعني أن مشروعنا جاهز للتشغيل.
"لا شيء هنا حتى الآن!" يتم إنشاء عرض في التطبيق من رمز HTML التالي ، والذي يحتوي على العناصر الرئيسية لـ AngularJS ، وهو بالضبط ما نحتاج إلى تعلمه.
app/index.html
<! doctype html> <html lang = "en" ng-app> <head> <meta charset = "utf-8" src = "lib/Angular/Angular.js"> </script> </head> <body> <p> لا شيء هنا {{'ماذا يفعل الرمز؟
توجيه NG-APP:
<html lang = "en" ng-app>
يمثل التوجيه NG-APP نطاق نص AngularJS. إن إضافة سمة NG-APP في <html> يعني أن <html> بالكامل هو نطاق البرنامج النصي AngularJS. يمكن للمطورين أيضًا استخدام توجيهات NG-APP محليًا ، مثل <Div ng-App> ، ويتم تشغيل البرامج النصية AngularJS فقط في ذلك <Div>.
علامة Script AngularJS:
<script src = "lib/Angular/Angular.js"> </script>
يتم تحميل هذا السطر من الكود في البرنامج النصي Angular.js. عندما يقوم المتصفح بتحميل صفحة HTML بأكملها ، سيتم تنفيذ البرنامج النصي Angular.js. بعد تشغيل البرنامج النصي Angular.js ، سيبحث عن علامة HTML التي تحتوي على توجيه NG-App. تحدد هذه العلامة نطاق تطبيق AngularJS.
تعبير مزدوج الأقواس المربوطة:
<p> لا شيء هنا {{'بعد' + '!'}} </p>
يوضح هذا السطر من الكود الوظيفة الأساسية لقالب AngularJS - الربط ، والذي يتكون من أقواس مزدوجة {{}} والتعبير "بعد ' +'! '.
يخبر هذا الربط AngularJS أنه يحتاج إلى حساب التعبيرات وإدراج النتيجة في DOM. في الخطوات التالية ، سنرى أنه يمكن تحديث DOM في الوقت الفعلي مع تغير نتائج عملية التعبير.
تعبير التعبير AngularJS هو قصاصة تشبه JavaScript ، يتم تشغيل تعبيرات AngularJS فقط في نطاق AngularJs ، وليس في DOM بأكمله.
قم بتشغيل تطبيق AngularJS
يعد تشغيل تطبيقات AngularJS تلقائيًا من خلال توجيهات NGAPP وسيلة موجزة لتناسب معظم المواقف. في التطوير المتقدم ، مثل استخدام البرامج النصية لتحميل التطبيق ، يمكنك أيضًا استخدام Bootstrap لتشغيل تطبيقات AngularJS يدويًا.
هناك ثلاث نقاط مهمة في عملية تمهيد تطبيق AngularJS:
1. سوف يستخدم الحاقن لإنشاء حقن التبعية لهذا التطبيق ؛
2. الحاقن سيخلق نطاق الجذر كنطاق نموذج التطبيق الخاص بنا ؛
3. سوف يربط AngularJs DOM في نطاق الجذر ، بدءًا من علامات HTML المميزة بـ NGAPP ، والتعامل تدريجياً مع التوجيهات والروابط في DOM.
بمجرد تمهيد تطبيق AngularJS ، سيستمر في الاستماع إلى أحداث HTML التي تثير HTML ، مثل أحداث النقر فوق الماوس ، أحداث الصحافة الرئيسية ، استجابات HTTP الواردة ، وما إلى ذلك. بمجرد حدوث مثل هذه الأحداث ، ستكتشف AngularJs تلقائيًا التغييرات وإجراء المعالجة والتحديثات المقابلة.
هيكل التطبيق أعلاه بسيط للغاية. تحتوي حزمة القالب على توجيه واحد فقط وربط ثابت واحد ، والنموذج فارغ أيضًا. بعد ذلك ، لنجرب تطبيقًا أكثر تعقيدًا قليلاً!
ماذا تفعل هذه الملفات في دليل العمل الخاص بي؟
يأتي التطبيق أعلاه من مشروع AngularJS Seed ، يمكننا عادة استخدام مشروع AngularJS Seed لإنشاء مشاريع جديدة. يتضمن مشروع البذور أحدث قاعدة رمز AngularJS ، ومكتبة الاختبار ، والبرامج النصية ، ومثال بسيط للتطبيق يحتوي على التكوين الأساسي المطلوب لتطوير تطبيق ويب نموذجي.
بالنسبة لهذا البرنامج التعليمي ، قمنا بإجراء التغييرات التالية على مشروع SegularJS Seed:
حذف تطبيق العينة ؛
يمارس
حاول إضافة تعبير جديد حول العمليات الرياضية إلى index.html:
<p> 1 + 2 = {{1 + 2}} </p>
لخص
الآن دعنا نذهب إلى الخطوة 1 وأضف بعض المحتوى إلى تطبيق الويب.
ما سبق هو المعلومات التي تقوم بفرز جهاز تحميل التشغيل AngularJS. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!