برنامج AngularJS Hello World: برنامجك التجريبي الأول

أفضل طريقة لرؤية قوة تطبيق AngularJS هي إنشاء برنامجك الأساسي الأول "Hello World" في AngularJS.

توجد العديد من بيئات التطوير المتكاملة التي يمكنك استخدامها لـ AngularJS فيما يلي بعض الأمثلة الشائعة لتطوير البرمجيات. في مثالنا، نستخدم Webstorm كما IDE لدينا.

1. Webstorm
2. Sublime Text
3. AngularJS Eclipse
4. البصرية ستوديو

مرحبًا بالعالم، AngularJS

ملاحظة حول الإصدار: انتهى الدعم طويل الأمد لـ AngularJS 1.x في 31 ديسمبر 2021، ويؤكد فريق تطوير الإطار ذلك. انتهى دعم AngularJS رسميًا في يناير 2022، مع الإصدار 1.8.3 كإصدار نهائي، ودون أي تحديثات أمنية لاحقة. يتم الحفاظ على كل خطوة وكل جزء من التعليمات البرمجية أدناه كما هو مكتوب تمامًا. المشاريع الجديدة تنتمي إلى Angular الحديث، حيث تبدأ العملية نفسها بـ ng serve ومكون مستقل ولا يزال يستخدم نفس الشيء {{ }} صيغة الاستيفاء.

يوضح المثال أدناه أسهل طريقة لإنشاء تطبيق "Hello World" الأول في AngularJS.

تُظهر لقطة الشاشة الموضحة أدناه كل جزء من هذا الملف، وتتطابق أرقامه السبعة مع Code قائمة التوضيحات أدناه. تم التقاطها من إصدار سابق 1.4.0، لذا يختلف سطر البرنامج النصي الخاص بها عن الإصدار المثبت في الكود.

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

Code التفسير:

1. في "ng- التطبيقتُستخدم الكلمة المفتاحية "" للدلالة على أن هذا التطبيق يُعتبر تطبيق AngularJS. ويمكن تسمية هذا التطبيق بأي اسم.
2. يُستخدم المتحكم لتخزين منطق العمل. في وسم h1، نريد الوصول إلى مراقب ، والتي ستحتوي على منطق لعرض "Hello World"، لذلك يمكننا القول، في هذا الوسم نريد الوصول إلى وحدة التحكم المسماة "HelloWorldCtrl".
3. نحن نستخدم متغير عضو يسمى "الرسالة" وهو ليس سوى عنصر نائب لعرض رسالة "Hello World".
4. يُستخدم وسم "script tag" للإشارة إلى ملف angular.js الذي يحتوي على جميع الوظائف اللازمة لـ AngularJS. وبدون هذه الإشارة، لن تعمل أي من وظائف AngularJS عند محاولة استخدامها.
5. "المتحكم" هو المكان الذي نُنشئ فيه منطق العمل الخاص بنا، وهو المتحكم. سيتم شرح تفاصيل كل كلمة مفتاحية في الفصول اللاحقة. من المهم ملاحظة أننا نُعرّف دالة تحكم تُسمى "HelloWorldCtrl" والتي يُشار إليها في الخطوة 2.
6. نقوم بإنشاء "دالة" سيتم استدعاؤها عندما يستدعي الكود الخاص بنا هذا المتحكم. يُعدّ الكائن $scope كائنًا خاصًا في AngularJS، وهو كائن عام يُستخدم داخل AngularJS. يُستخدم الكائن $scope لإدارة البيانات بين المتحكم والعرض.
7. نقوم بإنشاء متغير عضو يسمى "message"، ونقوم بتعيين قيمة "Hello World" له، ثم نقوم بربط متغير العضو بكائن النطاق.

نوت: التوجيه ng-controller هو كلمة أساسية محددة في AngularJS (الخطوة 2) وتُستخدم لتعريف وحدات التحكم في تطبيقك. في تطبيقنا هذا، استخدمنا الكلمة المفتاحية ng-controller لتعريف وحدة تحكم باسم 'HelloWorldCtrl'. سيتم إنشاء المنطق الفعلي لوحدة التحكم في (الخطوة 5).

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الإخراج:

سيتم عرض الرسالة "مرحبا بالعالم".

كيفية تحميل AngularJS: عبر شبكة توصيل المحتوى (CDN) أو ملف محلي

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

هناك طريقتان لإدخال هذا الملف.

1. قم بالإشارة إلى نسخة CDN. يشير المثال إلى code.angularjs.org وإصدار الدبابيس 1.6.9. لا يزال هذا المضيف يقدم إصدارات 1.x، وأعلاها هو 1.8.2، بينما Google لم تعد المكتبات المستضافة مدرجة ضمن قائمة AngularJS.
2. قم بتنزيل نسخة محلية. احفظ الملف بجانب صفحة HTML ووجّه وسم البرنامج النصي إليه. تضمن النسخة المحلية استمرار عمل المثال دون اتصال بالإنترنت، وهو أمر مهم عندما يحظر خادم وكيل الوصول إلى شبكة توصيل المحتوى (CDN).

<!-- Option 1: reference a CDN copy -->
<script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>

<!-- Option 2: reference a downloaded copy in the same folder -->
<script src="angular.min.js"></script>

استعمل angular.js أثناء التعلم و angular.min.js في مرحلة الإنتاج: يقوم الإصدار غير المضغوط بطباعة مكدس قابل للقراءة traces، بينما تشير التقارير الخاصة بالإصدار المصغر إلى متغيرات تمت إعادة تسميتها.

بمجرد تحميل الملف، ng-app يبدأ تشغيل الإطار. يبحث AngularJS عن هذه السمة عند اكتمال تحميل المستند، ويعتبر العنصر الذي يحملها جذر التجميع، ويقوم بتهيئة الوحدة المسماة في قيمتها. ويترتب على ذلك ثلاث نتائج:

• فقط الأول ng-app يتم تهيئة الصفحة تلقائيًا. أما الصفحة الثانية، فيتم تجاهلها إلا إذا angular.bootstrap يتم استدعاؤها يدويًا.
• يجب أن يشير الاسم إلى وحدة نمطية مسجلة لدى وحدة angularوإلا فإن وحدة التحكم تُبلغ [$injector:modulerr].
• تثبيت الإبريق ng-app على html العنصر، كما هو الحال في المثال، يجعل المستند بأكمله تحت AngularJS؛ حاوية أضيق تعمل أيضًا.

كيفية عمل تعابير {{ }} وربط ng-model

الأقواس المزدوجة حول message لا تحتوي عناصر الوسم h1 على عناصر نائبة يتم ملؤها مرة واحدة عند تحميل الصفحة. يقوم AngularJS بتحويل عقدة النص هذه إلى عنصر مراقبة على العناصر المحيطة بها. نطاقلذا فإن الناتج المُعالَج tracks $scope.message طالما بقيت الصفحة موجودة.

تتم الدورة في ثلاث خطوات.

1. يقوم المتحكم بكتابة قيمة على $scope.
2. تقوم عملية التلخيص بمقارنة كل تعبير تمت مراقبته بنتيجته السابقة.
3. يتم إعادة عرض كل تعبير تغيرت قيمته في مكانه.

وبالتالي، فإن التعبير المُقحم يكون أحادي الاتجاه، من النطاق إلى العرض. أما الربط ثنائي الاتجاه فيحتاج إلى نانوغرام نموذجأطلقت حملة توجيهات مصمم لعناصر التحكم في النماذج. أضف <input ng-model="message"> بجانب العنوان، اكتب في المربع، وسيتغير العنوان مع كل ضغطة مفتاح، لأن ng-model يكتب قيمة الحقل مرة أخرى على نفس خاصية النطاق التي يراقبها التعبير.

تُقيّد التعبيرات عمدًا. فهي تقرأ خصائص النطاق، وتستدعي أساليب النطاق، وتتسامح مع القيم غير المعرّفة بصمت، ومع ذلك لا يمكنها تعريف المتغيرات، أو استخدام عبارات التحكم في التدفق، أو الوصول إلى الكائنات العامة مثل window.

كيفية إصلاح صفحة فارغة أو صفحة غير معروضة {{ }}

يفشل أول برنامج AngularJS بإحدى طريقتين واضحتين: إما أن تبقى الصفحة فارغة، أو أن يظهر النص الحرفي {{message}} يظهر هذا الخطأ في المكان الذي من المفترض أن يظهر فيه "Hello World". كلا الأمرين يعني أن إطار العمل لم يتحكم في ترميز HTML. اتبع الخطوات التالية بالترتيب، مع فتح وحدة تحكم المتصفح.

1. تأكد من تحميل المكتبة. افتح لوحة الشبكة وابحث عن angular.js طلب. يؤدي ظهور خطأ 404 أو عدم إمكانية الوصول إلى شبكة توصيل المحتوى (CDN) إلى ترك الأقواس على الشاشة دون تغيير.
2. تحقق من مسار البرنامج النصي. يُشير المسار النسبي إلى المجلد الذي يحتوي على ملف HTML، لذا فإن النسخة الموجودة في js المجلد الفرعي يحتاج js/angular.min.js.
3. تحقق من ng-app. لا يُؤثر غياب السمة أو وجود خطأ إملائي فيها على أداء Bootstrap. يتم وضع واصلة بين السمة والشرطة. ng-app في لغة الترميز، على الرغم من أن التوجيه مكتوب بنمط CamelCase في Javaالنصي.
4. اقرأ خطأ وحدة التحكم. [$injector:modulerr] هذا يعني أن الوحدة المسماة بواسطة ng-app لم يتم تسجيلها مطلقًا. [ng:areq] يعني ذلك عادةً أن اسم وحدة التحكم في الترميز لا يتطابق مع الاسم الذي تم تمريره إلى .controller().
5. ابحث عن تطبيق ng-app ثانٍ. يتم تهيئة العنصر الأول فقط، لذا فإن وجود نسخة متبقية على عنصر داخلي يؤدي إلى تعطيل ذلك الجزء من الصفحة بصمت.

هناك سببان آخران يفسران معظم التقارير المتبقية.

• بروتوكول الملفات. يعمل هذا المثال المكون من ملف واحد بشكل جيد عند فتحه مباشرةً من القرص، ولكن أي قالب يتم جلبه عبر XHR يتم حظره بواسطة قواعد المصدر في المتصفح. قم بعرض المجلد عبر HTTP بمجرد ظهور القوالب.
• لمحة سريعة عن تقويم الأسنان. عندما يتم عرض الترميز قبل أن يقوم الإطار بتجميعه، يكون التعبير الخام مرئيًا للحظة. أضف ng-cloak إلى العنصر، أو استبدل التعبير بـ ng-bind="message"، والتي لا تعرض ترميزها الخاص أبدًا.

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

الأسئلة الشائعة