نحن الآن نستعد لكتابة تطبيق 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">
<title> ملف HTML الخاص بي </title>
<link Rel = "STYLESHEET" href = "css/app.css">
<link rel = "stylesheet" href = "css/bootstrap.css">
<script src = "lib/Angular/Angular.js"> </script>
</head>
<body>
<p> لا شيء هنا {{'بعد' + '!'}} </p>
</body>
</html>
ماذا يفعل الرمز؟
توجيه 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:
1. حذف تطبيق العينة ؛
2. إضافة صور الهاتف المحمول إلى التطبيق/IMG/الهواتف/؛
3. إضافة ملف بيانات الهاتف المحمول (JSON) إلى التطبيق/الهواتف/؛
4. أضف ملفات Twitter Bootstrap إلى App/CSS/و APP/IMG/.
يمارس
حاول إضافة تعبير جديد حول العمليات الرياضية إلى index.html:
نسخة الكود كما يلي:
<p> 1 + 2 = {{1 + 2}} </p>
لخص
الآن دعنا نذهب إلى الخطوة 1 وأضف بعض المحتوى إلى تطبيق الويب.