First Application AngularJS كيفية كتابة تطبيق ب انجليولر جي إس جافا سكريبت
First Application AngularJS كيفية كتابة تطبيق ب انجليولر جي إس جافا سكريبت
First Application AngularJS كيفية كتابة تطبيق ب انجليولر جي إس جافا سكريبت
- Webstorm
- Sublime Text
- AngularJS Eclipse
- Visual Studio
تطبيقك الأول مرحبًا بالعالم في AngularJS
شرح كود انجليولر AngularJS
- الخطوة رقم ١
تُستخدم الكلمة الأساسية "ng-app" للإشارة إلى وجوب اعتبار هذا التطبيق أحد تطبيقات الزاوية AngularJS . يمكن إعطاء أي اسم لهذا التطبيق.
ملاحظة كلمة Angular تعني بالعربي الزاوية
- الخطوة رقم ٢
ng-controller المتحكم هو ما يستخدم للاحتفاظ بمنطق الأعمال. في علامة h1 ، نريد الوصول إلى وحدة التحكم ، والتي سيكون لها منطق لعرض "HelloWorld" ، لذلك يمكننا القول ، في هذه العلامة ، نريد الوصول إلى وحدة التحكم المسماة "HelloWorldCtrl".
نحن نستخدم متغير عضو يسمى "message" وهو ليس سوى عنصر لعرض رسالة "Hello World".
- الخطوة رقم ٣
استدعاء مكتبة الزاوية AngularJS وبدونها لن يعمل التطبيق، لاحظ الزاوية AngularJS تماما مثل jquery فهي مكتبة تسهل عليك برمجة وتصميم تطبيقات الويب.
تُستخدم "علامة البرنامج النصي script tag" للإشارة إلى البرنامج النصي angular.js الذي يحتوي على جميع الوظائف الضرورية لـ angular js. بدون هذا المرجع ، إذا حاولنا استخدام أي من وظائف AngularJS ، فلن تعمل.
- الخطوة الرابعة
Controller "المتحكم" هو المكان الذي ننشئ فيه منطق أعمالنا ، وهو المتحكم الخاص بنا. سيتم شرح تفاصيل كل كلمة رئيسية في الفصول اللاحقة. من المهم ملاحظة أننا نحدد طريقة تحكم تسمى 'HelloWorldCtrl' والتي تتم الإشارة إليها في الخطوة 2.
نحن نقوم بإنشاء "دالة function" سيتم استدعاؤها عندما يستدعي كودنا عن طريق وحدة التحكم هذه. كائن $scope هو كائن خاص في AngularJS وهو كائن عام يستخدم في Angular.js. يتم استخدام كائن النطاق $scope لإدارة البيانات بين وحدة التحكم والعرض.
نقوم بإنشاء متغير يسمى "message" ، مع تخصيص قيمة "HelloWorld" له وإرفاق متغير العضو بكائن $scope.
ملاحظة: التوجيه ng-controller هو كلمة أساسية محددة في AngularJS (الخطوة رقم 2) ويستخدم لتعريف وحدات التحكم في تطبيقك. هنا في تطبيقنا ، استخدمنا الكلمة الأساسية ng-controller لتعريف وحدة تحكم باسم "HelloWorldCtrl". سيتم إنشاء المنطق الفعلي لوحدة التحكم في (الخطوة رقم 5).
إذا تم تنفيذ الأمر بنجاح ، فسيتم عرض الإخراج التالي عند تشغيل التعليمات البرمجية الخاصة بك في المتصفح.
اقرأ أيضافي دليل برمجة انجليولر جي إس AngularJS
- الدورة التعليمية دروس انقيولر جي اس او جافا سكريبت AngularJS
- What is AngularJS? and How can make Applications Better؟ ما هو انجليولر جي اس؟ وكيف يمكن تحسين التطبيقات؟
- What is MVC architecture in AngularJS? ما هي بنية ومعمارية هيكل الطبقات الثلاثة التحكم والعرض والنموذج في انجولير جي إس جافا سكريبت ؟
<< الصفحة الرئيسية