Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular js دورة

6,651 views

Published on

دورة AngularJS باللغة العربية

Published in: Education

Angular js دورة

  1. 1. ‫الرحيم‬ ‫الرحمن‬ ‫هللا‬ ‫بسم‬ ‫دورة‬AngularJS ‫تقدٌم‬:‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬. ً‫اإللكترون‬ ‫البرٌد‬:aneeshikmat@2nees.com ً‫اإللكترون‬ ‫الموقع‬:www.2nees.com ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  2. 2. ‫الفهرس‬ •‫المقدمة‬(‫النقاط‬ ‫من‬ ‫الكثٌر‬ ‫لذكر‬ ‫األساسٌات‬ ‫الى‬ ‫باإلضافة‬ ‫جدا‬ ‫مهمة‬ ‫لشرحها‬ ‫نعود‬ ‫لن‬ ً‫الت‬..‫الرئٌسٌة‬ ‫المصطلحات‬ ‫تعرٌؾ‬ ‫مثل‬) •‫ال‬ ‫أساسٌات‬Angular •Expressions •Directives •Modules •Controller •Filters •‫إنشاء‬tabs‫ال‬ ‫خالل‬ ‫من‬angular •‫ال‬ ‫مع‬ ‫التعامل‬FORMS ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  3. 3. ‫الفهرس‬ •include-ng‫وال‬Custom Directive •http$ •ً‫ف‬ ‫الجداول‬ ‫مع‬ ‫التعامل‬AngularJS(AngularJS Table) •Create New ModuleAngularJS •‫الخاتمة‬ (‫من‬ ‫تحمٌلها‬ ‫ٌمكنك‬ ‫األمثلة‬ ‫مع‬ ‫الدورة‬2nees.com/ar/courses) ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  4. 4. ‫المقدمة‬ ‫فبأي‬ ،‫اإلنسان‬ ‫وخلق‬ ،‫البٌان‬ ‫م‬َّ‫ل‬َ‫وع‬ ،‫اللسان‬ ‫أعطى‬ ،‫العالمٌن‬ ‫رب‬ ‫هلل‬ ‫الحمد‬ ‫تكذبان‬ ‫ربكما‬ ‫أآلء‬..،‫والمجد‬ ‫الثناء‬ ‫أهل‬ ،‫أهل‬ ‫للحمد‬ ‫هو‬ ‫من‬ ‫ٌا‬ ‫الحمد‬ ‫لك‬ ‫عبد‬ ‫لك‬ ‫وكلنا‬ ‫العبد‬ ‫قال‬ ‫ما‬ ُّ‫أحق‬. ‫الحمد‬ ‫لك‬..‫ك‬َ‫ت‬‫نصر‬ ُ‫ٌطلب‬ ‫ضعٌؾ‬ ‫من‬.. ‫الحمد‬ ‫لك‬..‫ؼناك‬ ُ‫ٌطلب‬ ‫فقٌر‬ ‫من‬.. ‫الحمد‬ ‫لك‬..‫عزك‬ ُ‫ٌطلب‬ ٍ‫ذلٌل‬ ‫من‬.. ‫الحمد‬ ‫لك‬..‫بك‬ ٍ‫ظن‬ َ‫حسن‬ ‫إال‬ ‫دعوناك‬ ‫ما‬..‫وما‬ ،‫فٌك‬ ً‫ثقة‬ ‫إال‬ ‫رجوناك‬ ‫وما‬ ‫ووعٌدك‬ ‫بوعدك‬ ً‫ا‬‫تصدٌق‬ ‫إال‬ ‫خفناك‬..‫هلل‬ ‫فالحمد‬ ،‫ترضى‬ ‫حتى‬ ‫الحمد‬ ‫فلك‬ ‫محمد‬ ،‫إمام‬ ‫كل‬ ‫وإمام‬ ،‫األعالم‬ ‫علم‬ ‫على‬ ‫والسالم‬ ‫والصالة‬ ‫العالمٌن‬ ‫رب‬ ‫وبعد‬ ،‫أجمعٌن‬ ‫وصحبه‬ ‫آله‬ ‫وعلى‬ ‫وسلم‬ ‫علٌه‬ ‫هللا‬ ‫صل‬ ‫هللا‬ ‫عبد‬ ‫بن‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  5. 5. ‫المقدمة‬ ً‫وه‬ ،‫المواقع‬ ‫تطوٌر‬ ‫مجال‬ ً‫ف‬ ‫ورائعة‬ ‫جدٌدة‬ ‫بدورة‬ ‫الٌوم‬ ‫لكم‬ ‫نعود‬ ‫دروة‬AngularJS^_^‫ٌجب‬ ،‫هذه‬ ‫العمل‬ ‫بٌئة‬ ‫عن‬ ‫الحدٌث‬ ‫وقبل‬ ، ً‫وه‬ ‫الدورة‬ ‫هذه‬ ‫متطلبات‬ ‫تعرؾ‬ ‫أن‬ ‫علٌك‬: •HTML–CSS-JS •jQuery, PHP, Database(..‫ضرورٌة‬ ‫متطلبات‬ ‫لٌست‬) •‫ال‬ ‫جانب‬ ‫على‬ ‫مقترن‬ ‫عملنا‬ ‫سٌكون‬ ‫بالؽالب‬FRONT-END‫لكن‬ ‫الحصول‬ ‫وٌمكنك‬ ً‫محل‬ ‫سٌرفر‬ ‫وجود‬ ‫الى‬ ‫األمثلة‬ ‫بعض‬ ً‫ف‬ ‫سنحتاج‬ ‫مثل‬ ‫مواقع‬ ‫تطوٌر‬ ‫بٌئة‬ ‫تحمٌل‬ ‫خالل‬ ‫من‬ ‫علٌه‬wamp‫حسب‬ ‫ؼٌره‬ ‫أو‬ ‫بك‬ ‫الخاص‬ ‫التشؽٌل‬ ‫نظام‬..‫على‬ ‫األمثلة‬ ‫بعض‬ ‫لتنفٌذ‬ ‫وذلك‬ requests‫ال‬ ‫طرٌق‬ ‫عن‬ ‫بٌانات‬ ‫وجلب‬ajax‫أو‬json..‫الخ‬ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  6. 6. ‫المقدمة‬ ‫لل‬ ‫مهمة‬ ‫روابط‬AngularJS(‫المتواضعة‬ ‫الدورة‬ ‫هذه‬ ‫مراجع‬) •AngularJS API Docs •Guide to AngularJS Documentation •schools Angular3W •‫كتاب‬AngularJS Up & Running •Shaping up with angular(PDF has a nice description & examples) ‫تم‬ ‫تذكر‬ ‫لم‬ ‫أو‬ ‫ذكرت‬ ً‫الت‬ ‫الشروحات‬ ‫أو‬ ‫الكتب‬ ‫أو‬ ‫المواقع‬ ‫هذه‬ ‫جمٌع‬ ‫الحاجة‬ ً‫ٌلب‬ ‫بما‬ ‫استخدامها‬..‫كتاب‬ ‫من‬ ‫الشرح‬ ‫كان‬ ‫فمثال‬AngualarJS Up & Running..‫واألمثلة‬ ،ً‫الرسم‬ ‫الموقع‬ ‫روابط‬ ‫من‬ ‫وؼٌرها‬ ‫والدوال‬ ‫من‬Shaping up with angular‫و‬w3schools...‫الى‬ ‫باإلضافة‬ ‫هذه‬ ‫العمل‬ ‫بٌئة‬ ‫مع‬ ‫التعامل‬ ‫خالل‬ ‫ومن‬ ،‫المختلفة‬ ‫الملخصات‬.. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  7. 7. ‫المقدمة‬ ‫واآلن‬‫قبل‬‫البدء‬‫بهذه‬‫الدورة‬..‫أحب‬‫أن‬‫أنقل‬‫لكم‬‫قوال‬‫سمعته‬‫من‬”‫برٌػ‬ ‫بالك‬“‫ٌقول‬‫فٌه‬‫أن‬‫ال‬js‫ومكاتبها‬ً‫الت‬‫نعرفها‬‫مثل‬‫ال‬jQuery ‫نستخدمها‬‫لجعل‬‫صفحات‬‫الوٌب‬Dynamics‫بنائا‬‫على‬‫التالعب‬ ‫بالعناصر‬‫والمواقع‬‫وؼٌرها‬..‫لكن‬‫ال‬AngularJS‫هو‬‫فعلٌا‬‫ٌقوم‬ ‫على‬‫جعل‬‫ال‬HTML dynamic!!..‫وشخصٌا‬..‫استهجنت‬‫هذه‬ ‫الفكرة‬ً‫ف‬‫بداٌة‬‫األمر‬..‫لكن‬‫وبعد‬ً‫تعلم‬ً‫وتجربت‬‫لل‬Angularً‫فإن‬ ‫أقول‬‫أن‬‫هذا‬‫أقل‬‫ما‬‫ٌمكن‬‫قوله‬‫لشدة‬‫روعتها‬...‫وهذا‬‫ما‬‫ستشاهده‬‫أنت‬.. ^_^ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  8. 8. ‫المقدمة‬ ‫اآلن‬ ‫ببالنا‬ ‫ٌخطر‬ ‫أمر‬ ‫أول‬..‫ال‬ ‫أتعلم‬ ‫أن‬ ‫ٌجب‬ ‫لماذا‬Angular‫؟‬ ‫هو‬ ‫الجواب‬..‫موقعك‬ ‫من‬ ‫لتجعل‬ ‫سكربت‬ ‫الجافا‬ ‫تستخدم‬ ‫كنت‬ ‫اذا‬ Dynamic..‫هو‬ ‫األمثل‬ ‫فالخٌار‬angularً‫اآلت‬ ‫لك‬ ‫ٌتٌح‬ ‫ألنه‬: .1‫للمشروع‬ ‫البرمجة‬ ‫الشٌفرة‬ ‫تنظٌم‬ ‫على‬ ‫ٌساعدك‬. .2‫الهاتؾ‬ ‫مع‬ ‫متجاوبة‬ ‫مواقع‬ ‫انشاء‬ ‫على‬ ‫ٌساعدك‬Responsive .3‫ال‬ ‫خالل‬ ‫من‬ ‫ٌمكنك‬angular‫ال‬ ‫مع‬ ‫التعامل‬jQuery*_* .4‫األخطاء‬ ‫واكتشاؾ‬ ‫الفحص‬ ً‫ف‬ ‫جدا‬ ‫سهلة‬. ‫ال‬ ‫هو‬ ‫ما‬ ‫اذا‬Angular‫؟‬ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  9. 9. ‫المقدمة‬ ‫ال‬Angular‫عمل‬ ‫بٌئة‬ ً‫ه‬(Framework)‫نوعا‬ ‫لتضٌؾ‬ ‫مصممة‬ ‫ال‬ ‫على‬ ‫التفاعلٌة‬ ‫من‬HTML‫لتتعامل‬ ‫أنك‬ ‫ممزٌاتها‬ ‫من‬ ً‫وٌكف‬ ، ‫سكربت‬ ‫الجافا‬ ‫تتعلم‬ ‫أن‬ ً‫ٌكف‬ ‫معها‬(pure)‫التقسٌم‬ ‫مبدأ‬ ‫وٌقوم‬ ، ‫ال‬ ‫مبدأ‬ ‫على‬ ‫لها‬ ً‫البنائ‬MVC‫أو‬MVVM... ‫ال‬ ‫مفهوم‬MVC:‫ال‬ ‫هو‬ ‫ما‬ ‫تعرؾ‬ ‫أن‬ ‫ٌجب‬MVC‫ألنك‬ ،‫البدء‬ ‫قبل‬ ‫ال‬ ‫من‬ ‫قرٌبة‬ ‫لتكون‬ ‫ما‬ ‫نوعا‬ ‫مصممة‬ ‫عمل‬ ‫بٌئة‬ ‫مع‬ ‫ستتعامل‬MVC، ‫النوع‬ ‫هذا‬ ‫فهم‬ ‫ولهذا‬..‫ال‬ ‫فهم‬ ‫علٌك‬ ‫سٌسهل‬angular‫مهم‬ ‫أنه‬ ‫كما‬ ‫أخرى‬ ‫عمل‬ ‫بٌئات‬ ‫تعلم‬ ‫أحببت‬ ‫اذا‬ ‫األمام‬ ً‫ف‬ ‫لك‬.. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  10. 10. ‫المقدمة‬ MVC‫ل‬ ‫اختصار‬ ً‫ه‬Model-View-Controller‫ال‬ ‫أحد‬ ‫وهو‬ ، Design Pattern‫المشروع‬ ‫تقسٌم‬ ‫على‬ ‫فكرته‬ ‫وتقوم‬ ،‫شهرة‬ ‫األكثر‬ (‫منها‬ ‫الكبٌر‬ ‫وخصوصا‬)‫على‬ ‫ٌتعارؾ‬ ‫صؽٌرة‬ ‫منطقٌة‬ ‫وحدات‬ ‫الى‬ ‫نقاط‬ ً‫ه‬ ‫الوحدات‬ ‫هذه‬ ‫وتكون‬ ،‫والمطورٌن‬ ‫المبرمجٌن‬ ‫بٌن‬ ‫نسقها‬ ،‫وتحدٌثها‬ ‫وبنائها‬ ‫لألنظمة‬ ‫والتطوٌر‬ ‫المشاكل‬ ‫عن‬ ‫للبحث‬ ‫اإلنطالق‬ ‫الى‬ ‫مقسمة‬ ‫الوحدات‬ ‫هذه‬ ‫وتكون‬3ً‫وه‬ ‫قطع‬ ‫أو‬ ‫أجزاء‬: 1)model:‫وعادة‬ ،‫تطبٌق‬ ‫أو‬ ‫مشروع‬ ‫أي‬ ‫مركز‬ ‫إعتبارها‬ ‫ٌمكننا‬ ‫فعلٌا‬ ‫الخادم‬ ‫من‬ ‫جلبها‬ ‫ٌمكن‬ ً‫الت‬ ‫البٌانات‬ ‫على‬ ‫تحتوي‬(server( )‫عادة‬)، ‫هذا‬ ‫من‬ ‫جزء‬ ‫من‬ ‫قادمة‬ ‫ستكون‬ ‫ذلك‬ ‫بعد‬ ‫مستخدم‬ ‫أي‬ ‫ٌراها‬ ‫بٌانات‬ ‫وأي‬ ‫ال‬model‫من‬ ‫أكثر‬ ‫من‬ ‫أو‬model... ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  11. 11. ‫المقدمة‬ 2)view:ً‫وه‬ ،‫المستخدم‬ ‫معها‬ ‫ٌتعامل‬ ً‫الت‬ ‫الواجهة‬ ً‫ه‬Dynamic ‫ال‬ ‫من‬ ‫القادمة‬ ‫البٌانات‬ ‫بحسب‬ ‫معلوماتها‬ ‫وتتحدث‬ ،‫وتفاعلٌة‬model‫لذلك‬ ، ‫ال‬ ‫ٌحتوي‬ ‫ما‬ ‫على‬ ‫إعتمادا‬ ‫تصمم‬ ً‫فه‬model‫بٌانات‬ ‫من‬. 3)controller:‫البٌانات‬ ‫بٌن‬ ‫وتصل‬ ً‫تبن‬ ً‫الت‬ ‫المنطقٌة‬ ‫الوحدة‬ ً‫ه‬ ‫ال‬ ‫بٌن‬ ‫الربط‬ ‫عن‬ ‫المسؤولة‬ ‫أنها‬ ‫أي‬ ،‫لها‬ ‫المناسبة‬ ‫العرض‬ ‫وطرٌقة‬ ‫المختلفة‬ View‫وال‬Model^_^‫بفصل‬ ‫تقوم‬ ً‫الت‬ ً‫فه‬ ،‫ذلك‬ ‫الى‬ ‫باإلضافة‬ ، ‫ال‬ ‫من‬ ‫القادمة‬ ‫البٌانات‬ ‫وتقسٌم‬model‫وؼٌرها‬ ‫الالزمة‬ ‫التؽٌرات‬ ‫وإجراء‬ ‫لل‬ ‫وتعطٌها‬ ،‫األمور‬ ‫من‬view‫احتٌاجها‬ ‫حسب‬.. ‫ال‬ ‫هذا‬pattern‫نستخدم‬ ‫أن‬ ‫أمكننا‬ ‫أٌضا‬ ‫خالله‬ ‫فمن‬ ،‫لنا‬ ‫كبٌرة‬ ‫فائدة‬ ‫قدم‬ ‫العجلة‬ ‫بناء‬ ‫إعادة‬ ‫الى‬ ‫الحاجة‬ ‫دون‬ ‫مكان‬ ‫من‬ ‫أكثر‬ ً‫ف‬ ‫البرمجٌة‬ ‫ألشٌفرة‬ ^_^ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  12. 12. ‫المقدمة‬ ‫ال‬ ‫ممٌزات‬ ‫اآلن‬Angular: .1AngularJS is a Single Page Application (SPA) ‫ال‬ ‫هو‬ ‫ما‬ ‫تعرؾ‬ ‫ال‬ ‫كنت‬ ‫وإن‬SPA‫الذي‬ ‫التطبٌق‬ ‫أو‬ ‫الموقع‬ ‫فهو‬ ‫تحمٌل‬ ‫عملٌة‬ ‫أول‬ ً‫ف‬ ‫ٌحتاجها‬ ً‫الت‬ ‫المصادر‬ ‫جمٌع‬ ‫بتحمٌل‬ ‫ٌقوم‬ ‫للصفحة‬. .2‫البرمجٌة‬ ‫األسطر‬ ‫من‬ ‫أقل‬ ‫عدد‬ ‫الى‬ ‫تحتاج‬ ‫أنها‬ ‫أٌضا‬ ‫ممٌزاتها‬ ‫من‬ ‫ال‬ ‫أو‬ ‫سكربت‬ ‫الجافا‬ ‫مع‬ ‫مقارنة‬jQuery..‫فالشٌفرة‬ ‫أٌضا‬ ‫شٌفرة‬ ‫تعد‬ ‫بها‬ ‫الخاصة‬ ‫البرمجٌة‬clean_^*‫على‬ ‫تسٌر‬ ‫النك‬ ‫أخرى‬ ‫أماكن‬ ً‫ف‬ ‫استخدامها‬ ‫وٌمكن‬ ،‫هذه‬ ‫العمل‬ ‫لبٌئة‬ ‫المحدد‬ ‫النمط‬ ‫سهل‬ ‫بشكل‬ ‫وواضحة‬ ‫قلٌلة‬ ‫البرمجٌة‬ ‫الشٌفرة‬ ‫أن‬ ‫بما‬. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  13. 13. ‫المقدمة‬ .3‫ال‬ ‫بوجود‬angular‫من‬ ‫فقط‬ ‫تطبٌق‬ ‫أي‬ ‫فهم‬ ‫السهل‬ ‫من‬ ‫أصبح‬ ‫ال‬ ‫الى‬ ‫النظر‬HTML‫وال‬Controller‫وبالنسبة‬ ،‫المستخدم‬ ‫ال‬ ‫لمطورٌن‬angular‫لك‬ ‫تسمح‬ ‫آخر‬ ‫وبمعنى‬ ‫المٌزة‬ ‫هذه‬ ‫فإن‬ ‫بانشاء‬HTMLX‫خاللها‬ ‫من‬ ‫واضحة‬ ‫والتصنٌفات‬ ‫المسمٌات‬ ‫الن‬ ‫ال‬ ‫على‬ ‫اإلعتماد‬ ‫الى‬ ‫الحاجة‬ ‫حتى‬ ‫دون‬html5‫ال‬ ‫انتظار‬ ‫أو‬ html6... .4‫ال‬ ‫ٌعمل‬angular‫ال‬ ‫مع‬pure html‫المصمم‬ ‫ٌجد‬ ‫لن‬ ‫لذلك‬ ، ‫الصفحات‬ ‫هذه‬ ‫وتطوٌر‬ ‫تصمٌم‬ ً‫ف‬ ‫صعوبة‬. .5‫ال‬ ‫عن‬ ً‫التخل‬ ‫بصدد‬ ‫هنا‬ ‫لسنا‬ ‫نحن‬jQuery UI‫ال‬ ‫حتى‬ ‫أو‬ Bootstrap‫ال‬ ‫وإنما‬ ،Angular‫ما‬ ‫ٌقدم‬ ‫ثالث‬ ‫كطرؾ‬ ‫ٌندمج‬ ‫معا‬ ‫والخصائص‬ ‫المكاتب‬ ‫هذه‬ ‫دمج‬ ‫لٌتم‬ ‫خدمات‬ ‫من‬ ‫لدٌه‬^_^ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  14. 14. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫تفكر‬ ‫لحظة‬
  15. 15. ‫ال‬ ‫أساسيات‬Angular ‫اآلن‬..‫ال‬ ‫وشرح‬ ‫تحمٌل‬ ‫بعملٌة‬ ‫فعلٌا‬ ‫لنبدأ‬Angular^_^ ‫ال‬ ‫تحمٌل‬Angular: ً‫الرسم‬ ‫الموقع‬ ‫الى‬ ‫بالدخول‬ ‫قم‬https://angularjs.org/‫ثم‬ ‫ومن‬ ‫ب‬ ‫مسمى‬ ‫ملؾ‬ ‫هو‬ ‫التحمٌل‬ ‫ناتج‬ ‫سٌكون‬ ،‫تحمٌل‬ ‫على‬ ‫بالضؽط‬ ‫قم‬ angular.min.js... ‫للوقت‬ ‫إختصارا‬ ‫أٌضا‬..‫األمثلة‬ ‫تطبٌق‬ ‫عند‬..‫ال‬ ‫باستخدام‬ ‫تقوم‬ ‫أن‬ ‫أرٌدك‬ bootstrap‫الموقع‬ ‫خالل‬ ‫من‬ ‫ذلك‬ ‫وٌمكنك‬ http://getbootstrap.com/..‫من‬ ‫المطلوب‬ ‫الملؾ‬ ‫وسٌكون‬ ‫هو‬ ‫التحمٌل‬bootstrap.min.css.. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  16. 16. ‫ال‬ ‫أساسيات‬Angular ‫بعرض‬ ‫سنقوم‬ ‫اآلن‬template‫ال‬ ‫دورة‬ ً‫ف‬ ‫باستخدامه‬ ‫سنقوم‬ Angular..‫أن‬ ‫أرٌدك‬ ،‫بتحمٌلها‬ ‫قمنا‬ ً‫الت‬ ‫الملفات‬ ‫الى‬ ‫وباإلضافة‬ ‫أٌضا‬ ‫بانشاء‬ ‫تقوم‬style.css‫و‬app.js‫الصورة‬ ً‫ف‬ ‫كما‬.. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  17. 17. ‫ال‬ ‫أساسيات‬Angular ‫البدء‬ ‫قبل‬ ‫مهمة‬ ‫تعرٌفات‬( :‫عنوان‬ ‫كل‬ ‫الى‬ ‫الوصول‬ ‫لحٌن‬ ‫مبدئٌة‬ ‫تعرٌفات‬) ‫البدء‬ ‫أو‬ ‫الخوض‬ ‫قبل‬ ‫تعرفها‬ ‫ان‬ ‫علٌك‬ ‫ٌجب‬ ‫مهمة‬ ‫تعرٌفات‬ ‫عدة‬ ‫ٌوجد‬ ‫بال‬ ‫مفهوم‬ ‫أي‬ ‫بشرح‬angularً‫وه‬: 1)Template:‫ال‬ ‫بها‬ ‫وٌقصد‬HTML‫الخصائص‬ ‫مع‬ ‫المضافة‬... 2)Directives:‫ال‬ ‫عناصر‬ ‫بها‬ ‫وٌقصد‬HTML‫الٌها‬ ‫مضافا‬ custom attributes and elements... 3)Model:‫ال‬ ‫خالل‬ ‫من‬ ‫للمستخدم‬ ‫ستعرض‬ ً‫الت‬ ‫البٌانات‬ ‫بها‬ ‫وٌقصد‬ view‫المستخدم‬ ‫وبٌن‬ ‫بٌنها‬ ‫التفاعل‬ ‫ما‬ ‫على‬ ‫بنائا‬ ،‫بها‬ ‫الخاصة‬. 4)Scope:‫ال‬ ‫حفظ‬ ‫مكان‬ ‫وهو‬model‫ٌمكن‬ ‫الذي‬ ‫النطاق‬ ‫ٌحدد‬ ‫والذي‬ ‫من‬ ‫كل‬ ‫قبل‬ ‫من‬ ‫الٌه‬ ‫الوصول‬controllers, directives and expressions‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  18. 18. ‫ال‬ ‫أساسيات‬Angular 5)Expressions:‫ضمن‬ ‫والدوال‬ ‫المتؽٌرات‬ ‫الى‬ ‫بالوصول‬ ‫لك‬ ‫تسمح‬ ‫بال‬ ‫الخاص‬ ‫النطاق‬model‫قٌم‬ ‫اضافة‬ ‫على‬ ‫القدرة‬ ‫ٌعٌطٌنا‬ ‫وذلك‬ ، dynamic‫لل‬html.. 6)Filter:‫للمستخدم‬ ‫طباعتها‬ ‫المراد‬ ‫القٌمة‬ ‫بشكل‬ ‫التحكم‬ ‫لنا‬ ‫تتٌح‬ ‫هذه‬ (‫آخر‬ ‫بمعنى‬Format for Expressions.).. 7)View:‫المستخدم‬ ‫ٌشاهده‬ ‫ما‬ ‫وهو‬(DOM.) 8)Data Binding:‫الوقت‬ ً‫ف‬ ‫تبادل‬ ‫عملٌة‬ ‫الى‬ ‫ٌشٌر‬ ‫المصطلح‬ ‫هذا‬ ً‫الحقٌق‬(‫متزامن‬ ‫بشكل‬)‫ال‬ ‫من‬ ‫كل‬ ‫بٌن‬view‫وال‬model 9)Controller:‫بٌن‬ ً‫المنطق‬ ‫الربط‬ ‫خالل‬ ‫من‬ ‫بالتطبٌق‬ ‫بالتحكم‬ ‫ٌقوم‬ ‫ال‬view‫وال‬model.. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  19. 19. ‫ال‬ ‫أساسيات‬Angular 10)Module:‫مثل‬ ‫المشروع‬ ‫من‬ ‫مختلفة‬ ‫عدة‬ ‫ألجزاء‬ ‫الحاوي‬ ‫هو‬ controllers, services, filters, directives... ‫مالحظة‬:‫ال‬ ً‫تعن‬ng‫المشروع‬ ً‫ف‬ Angular Directive(‫الحقا‬ ‫التفاصٌل‬. )ً‫ف‬ ‫هللا‬ ‫بركة‬ ‫على‬ ‫لنبدأ‬ ‫اآلن‬ ‫ال‬ ً‫ف‬ ‫بسٌط‬ ‫مثال‬angular.. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  20. 20. ‫ال‬ ‫أساسيات‬Angular ‫السابق‬ ‫المثال‬ ‫شرح‬: (1ng-app:‫طرحناها‬ ً‫الت‬ ‫التعرٌفات‬ ‫حسب‬..‫هذه‬ ‫أن‬ ‫نكتشؾ‬ ‫عن‬ ‫عبارة‬ ‫الخاصٌة‬Directive..‫ال‬ ‫هذا‬ ‫ووظٌفة‬directive ‫ال‬ ‫تطبٌق‬ ‫تعرٌؾ‬ ً‫ه‬angular..‫أي‬ ‫لتطبٌق‬ ‫مهم‬ ‫وهذا‬ Expressions‫من‬ ‫ٌمكننا‬ ‫ذلك‬ ‫الى‬ ‫باإلضافة‬ ،‫ٌعمل‬ ‫لن‬ ‫وبدونه‬ ، ‫ال‬ ‫اسم‬ ‫تمثل‬ ‫القٌمة‬ ‫هذه‬ ،‫قٌمة‬ ‫اسناد‬modulesً‫الرئٌس‬ ‫للمشروع‬..‫تعالى‬ ‫هللا‬ ‫بإذن‬ ‫الحقا‬ ‫هذه‬ ‫على‬ ‫لمثال‬ ‫وسنتطرق‬.. (2{{}}..‫ال‬ ‫لتعرٌؾ‬ ‫تستخدم‬ ‫هذه‬Expressions..‫أول‬ ‫وهو‬ ‫تعالى‬ ‫هللا‬ ‫بإذن‬ ‫عنه‬ ‫بالحدٌث‬ ‫سنقوم‬ ‫موضوع‬..‫حٌز‬ ‫معا‬ ‫لنبدأ‬ ‫واآلن‬ ً‫الفعل‬ ‫العمل‬.. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫المثال‬ ‫شاهد‬
  21. 21. Expressions ‫ال‬ ‫إن‬Angular‫ال‬ ‫والى‬ ‫من‬ ‫البٌانات‬ ‫مزامنة‬ ‫على‬ ‫ٌقوم‬html‫من‬ ‫خالل‬Expressions...‫لل‬ ‫بمكان‬ ‫باألهمٌة‬ ‫فهو‬ ‫ولهذا‬Angular.. ‫ال‬ ‫قواعد‬Expressions: (1‫ال‬ ‫كتابة‬ ‫علٌك‬ ‫ٌجب‬Expressions‫ال‬ ‫داخل‬{{ }} (2ng-bind‫استخدامها‬ ‫وٌمكن‬ ،‫أٌضا‬ ‫البٌانات‬ ‫مزامنة‬ ‫بعملٌة‬ ‫تقوم‬ ‫ال‬ ‫مثل‬Expressions (3‫ال‬ ً‫ف‬ ‫تماما‬ ً‫ه‬ ‫كما‬ ‫النتائج‬ ‫طباعة‬ ‫سٌتم‬Expressions.. (4‫ال‬Expressions‫ال‬ ً‫ف‬Angular‫ال‬ ‫تشبه‬Expressions ‫وأحرؾ‬ ‫أرقام‬ ‫احتواء‬ ‫على‬ ‫القدرة‬ ‫حٌث‬ ‫من‬ ‫سكربت‬ ‫الجافا‬ ً‫ف‬ ‫المختلفة‬ ‫والعملٌات‬...‫مثل‬(“anees” + “hikmat”.. ) ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  22. 22. Expressions ‫مثال‬1: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  23. 23. Expressions ‫مثال‬2: ‫مالحظة‬:ng-init‫ابتدائٌة‬ ‫قٌمة‬ ‫إلعطاء‬ ‫تستخدم‬. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  24. 24. Expressions ‫مثال‬3: ‫ال‬Expressions‫ال‬ ً‫ف‬Angular‫ال‬ ‫من‬ ‫القٌم‬ ‫استدعاء‬ ‫من‬ ‫ٌمكنها‬ objects‫المصفوفات‬ ‫من‬ ‫أو‬..‫مهم‬ ‫أمر‬ ‫وهذا‬..‫األوقات‬ ‫أؼلب‬ ً‫ف‬ ‫ألننا‬ ‫مع‬ ‫سنتعامل‬JSON..‫وال‬JSON‫إما‬ ‫سٌكون‬ ‫الؽالب‬ ً‫ف‬objects ‫بٌنهما‬ ‫خلٌط‬ ‫أو‬ ‫مصفوفات‬ ‫أو‬..‫هذه‬ ‫على‬ ‫أٌضا‬ ‫مثاال‬ ‫سنورد‬ ‫لذلك‬ ‫المهمة‬ ‫المالحظة‬..^_^ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫المثال‬ ‫شاهد‬
  25. 25. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫تفكر‬ ‫لحظة‬
  26. 26. Directives ‫أي‬ ‫أن‬ ‫سبق‬ ‫فٌما‬ ‫تحدثنا‬attribute‫ب‬ ‫تسبق‬ng-‫تدل‬ ‫أو‬ ً‫تعن‬ ‫فهذه‬ ‫على‬angular..‫هذه‬ ‫فإن‬ ،‫اآلن‬ ‫قلٌال‬ ‫أوضح‬ ‫أصبحت‬ ‫الفكرة‬ ‫أن‬ ‫وبما‬ ‫ال‬ng-‫هو‬ ‫نراه‬ ‫ما‬ ‫أن‬ ‫بالتحدٌد‬ ‫تخبرنا‬directive..^_^ ‫ال‬ ‫من‬ ‫العدٌد‬ ‫هناك‬ ‫تأكٌد‬ ‫بكل‬directive‫وتحدثنا‬ ،‫والمهمة‬ ‫المختلفة‬ ‫األمام‬ ً‫وف‬ ‫اآلن‬ ‫أٌضا‬ ‫الٌها‬ ‫وسنضٌؾ‬ ،‫السابقة‬ ‫الشرائح‬ ً‫ف‬ ‫بعضها‬ ‫عن‬ ‫ال‬ ‫من‬ ‫العدٌد‬ ‫الموضوع‬ ‫هذا‬ ‫وبعد‬Directive‫تعالى‬ ‫هللا‬ ‫بإذن‬...‫واآلن‬ ‫ال‬ ‫أهم‬ ‫إحدى‬ ‫سنذكر‬directive..‫ال‬ ‫وهو‬ng-model..‫ال‬ ‫هذا‬ directive‫عمل‬ ‫على‬ ‫ٌقوم‬data bind(‫للبٌانات‬ ‫تزامن‬)‫عناصر‬ ‫مع‬ ‫ال‬ ‫مثل‬ ‫التحكم‬input text‫وال‬text-area‫وال‬input..‫الخ‬ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  27. 27. Directives ‫مثال‬1( :‫ال‬ ‫خالل‬ ‫من‬ ‫مباشرة‬ ‫وتحدٌثها‬ ‫القٌمة‬ ‫أخذ‬ ‫ٌتم‬ ‫كٌؾ‬ ‫هنا‬ ‫الحظ‬ Directive‫وال‬Expression^_^ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  28. 28. Directives ‫مثال‬2:‫أٌضا‬ ‫هناك‬directive‫وهو‬ ‫رائع‬ng-repeat‫ووظٌفته‬ ، ‫دوران‬ ‫بعمل‬ ‫القٌام‬ ً‫ه‬^_^...‫المثال‬ ‫شاهد‬: ‫ال‬ ‫ٌمثل‬items‫المعلومات‬ ‫هنا‬ ‫شكل‬ ‫على‬ ‫جلبها‬ ‫المراد‬object.. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫المثال‬ ‫شاهد‬
  29. 29. Directives ‫مهمة‬ ‫مالحظات‬: (1ng-init‫هذا‬ ‫لكن‬ ،‫للعناصر‬ ‫اإلبتدائٌة‬ ‫القٌم‬ ‫إلسناد‬ ‫تستخدم‬ ‫أنها‬ ‫قلنا‬ ‫ال‬Directive‫ال‬ ‫نستخدم‬ ً‫وإنم‬ ،‫عادة‬ ‫استخدامه‬ ‫من‬ ‫نكثر‬ ‫ال‬ controllers‫اإلبتدائٌة‬ ‫القٌم‬ ‫اسناد‬ ‫أو‬ ‫إلعطاء‬(..‫األمر‬ ‫ؼالب‬ ً‫ف‬) (2‫ال‬ ‫من‬ ‫العدٌد‬ ‫هناك‬directive‫األخرى‬..‫علٌها‬ ‫اإلطالع‬ ‫ٌمكنك‬ ‫سابقا‬ ‫أرفقتها‬ ً‫الت‬ ‫المراجع‬ ‫من‬..‫ال‬ ‫عدد‬ ‫ذكر‬ ‫تعالى‬ ‫هللا‬ ‫بإذن‬ ‫وسٌتم‬ ‫الدورة‬ ‫هذه‬ ‫ٌنساب‬ ‫بما‬ ‫اإلمكان‬ ‫قدر‬ ‫به‬ ‫بأس‬...‫هذا‬ ‫ادراج‬ ‫وتم‬ ‫لل‬ ‫كمقدمة‬ ‫الموضوع‬module‫وال‬controllers.. https://docs.angularjs.org/guide/directive ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  30. 30. Modules ‫ال‬ ‫عن‬ ‫تحدثنا‬module‫ذلك‬ ‫لك‬ ‫أكرر‬ ‫كما‬ ،‫أٌضا‬ ‫السابقة‬ ‫الشرائح‬ ً‫ف‬ ‫لل‬ ‫النظر‬ ‫عن‬ ‫به‬ ‫تفكر‬ ‫ما‬ ‫أول‬ ‫إن‬ ،‫آخر‬ ‫وبأسلوب‬ ‫الموضوع‬ ‫ألهمٌة‬ modules‫ال‬ ً‫ف‬ ‫تستخدم‬ ‫طرٌقة‬ ‫أنها‬angular‫إحتواء‬ ‫أو‬ ‫لضم‬ ‫اسم‬ ‫أو‬ ‫عنوان‬ ‫تحت‬ ‫موجودة‬ ‫البرمجٌة‬ ‫الشٌفرات‬ ‫من‬ ‫مترابطة‬ ‫مجموعة‬ ‫بال‬ ‫الخاص‬ ‫اإلسم‬ ‫هو‬ ،‫واحد‬module^_^‫اآلخرٌن‬ ‫ٌشاهد‬ ‫ولذلك‬ ، ‫وأسرع‬ ‫أسهل‬ ‫فهمها‬ ‫وٌكون‬ ،‫بسهولة‬ ‫بك‬ ‫الخاصة‬ ‫البرمجٌة‬ ‫الشٌفرة‬^_^ ‫ال‬ ‫حول‬ ‫مهمتان‬ ‫جزئٌتان‬ ‫وهناك‬moduleً‫وه‬ (1‫ال‬ ‫تعرٌؾ‬ ‫ٌمكننا‬ ‫أنه‬controller‫وال‬services‫وال‬directives ‫لكل‬module.. (2‫انشاء‬ ‫أٌضا‬ ‫ٌمكننا‬modules‫ال‬ ‫علٌها‬ ‫تعتمد‬ ‫أخرى‬module‫الذي‬ ‫ببنائه‬ ‫قمنا‬..module can also depend on other modules as dependencies ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  31. 31. Modules ‫السابقة‬ ‫الشرٌحة‬ ً‫ف‬ ‫الكالم‬ ‫إطالة‬ ‫عن‬ ‫أعتذر‬..‫الموضوع‬ ‫ألهمٌة‬ ‫لكن‬ ..‫التنفٌذ‬ ‫عند‬ ‫جدا‬ ‫بسٌط‬ ‫أمر‬ ‫الى‬ ‫هو‬ ‫ما‬ ،‫الكثٌر‬ ‫الكالم‬ ‫هذا‬ ‫أن‬ ‫وستجد‬^_^ ‫بال‬ ‫اإلتصال‬ ‫أو‬ ‫تحمٌل‬ ‫ٌتم‬ ‫كٌؾ‬ ‫واآلن‬module‫؟‬ ‫ال‬ ‫خالل‬ ‫من‬ ‫ذلك‬ ‫ٌكون‬ng-app..‫ارسال‬ ً‫ه‬ ‫والفكرة‬‫الخاص‬ ‫اإلسم‬ ‫بال‬module‫ال‬ ‫الى‬directive ng-app... ‫أوضح‬ ‫الصورة‬ ‫ولتصبح‬..‫انشاء‬ ‫ٌمكننا‬ ‫كٌؾ‬ ‫شاهد‬module.. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫ال‬ ‫علٌها‬ ‫أطلقنا‬ ‫ما‬ ‫هذه‬ Dependencies‫الشرٌحة‬ ً‫ف‬ ‫السابقة‬..‫ال‬ ‫نضع‬ ‫هنا‬module ‫على‬ ‫تعتمد‬ ً‫الت‬ ‫األخرى‬module ‫ببنائه‬ ‫ثمنا‬ ‫الذي‬...
  32. 32. Modules ‫اآلن‬..‫ال‬ ‫الى‬ ‫عدت‬ ‫اذا‬template‫سأستخدمه‬ ً‫بأنن‬ ‫قلت‬ ‫الذي‬..‫ستجد‬ ‫ملؾ‬ ‫هناك‬app.js..‫ال‬ ‫بوضع‬ ‫سنقوم‬ ‫الملؾ‬ ‫هذا‬module‫بداخله‬ ً‫التال‬ ‫الشكل‬ ‫على‬: ‫واآلن‬..‫بعد؟‬ ‫ماذا‬ ‫ال‬ ‫نخبر‬ ‫أن‬ ‫علٌنا‬ ‫ٌجب‬ng-app‫بوجود‬module‫اسمه‬store‫حتى‬ ‫ال‬ ‫استخدام‬ ‫طرٌق‬ ‫عن‬ ‫ٌتم‬ ‫ذلك‬ ‫وقلنا‬ ،‫ومناداته‬ ‫به‬ ‫اإلتصال‬ ‫ٌستطٌع‬ module..‫المثال‬ ‫شاهد‬:ng-app="store" ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  33. 33. Modules ‫اآلن‬ ‫الملؾ‬ ‫شكل‬( :‫ال‬ ‫وبناء‬ ‫انشاء‬ ‫طرٌقة‬ ‫شرح‬ ‫من‬ ‫انتهٌنا‬ ‫نكون‬ ‫وبهذا‬ module‫الصفحات‬ ‫داخل‬)‫الموضوع‬ ‫سهولة‬ ‫الحظت‬ ‫هل‬^_^.. ‫بأول‬ ‫أوال‬ ‫اآلن‬ ً‫مع‬ ‫بالتطبٌق‬ ‫تقوم‬ ‫أن‬ ‫المهم‬..‫من‬ ‫ستبدأ‬ ‫اإلضافات‬ ‫ألن‬ ‫هنا‬..._^* ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  34. 34. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫تفكر‬ ‫لحظة‬
  35. 35. Controller ‫ال‬ ‫عن‬ ‫الحدٌث‬ ً‫ف‬ ‫أجزلنا‬ ‫لقد‬controller‫أٌضا‬..ً‫ف‬ ‫العجٌب‬ ‫لكن‬ ‫وهذا‬ ،‫اآلن‬ ‫الى‬ ‫مثال‬ ‫أي‬ ‫الى‬ ‫أتطرق‬ ‫أو‬ ‫أتحدث‬ ‫لم‬ ً‫أنن‬ ،‫الموضوع‬ ‫ال‬ ‫تعرٌؾ‬ ‫طرٌقة‬ ‫شرح‬ ‫من‬ ‫اإلنتهاء‬ ‫أنتظر‬ ‫كنت‬ ً‫ألن‬ ،‫صحٌح‬ module‫الصحٌح‬ ‫بشكله‬ ‫الموضوع‬ ‫فهم‬ ‫لنا‬ ‫ٌتسنى‬ ‫حتى‬^_^‫واآلن‬ ، ‫ال‬ ‫الحظت‬ ‫اذا‬module‫فارغ‬ ‫أنه‬ ‫فستجد‬ ،‫السابق‬....‫علٌنا‬ ‫ٌجب‬ ‫ولذلك‬ ‫وجوده‬ ‫من‬ ‫نستفٌد‬ ‫حتى‬ ‫ملئه‬..‫اآلن‬ ‫وسنمأله‬..‫وهو‬ ‫المكونات‬ ‫أهم‬ ‫بإحدى‬ ‫ال‬Controller_^..* ‫ال‬ ‫فهذا‬Controller‫وؼٌرها‬ ‫السٌرفر‬ ‫من‬ ‫البٌانات‬ ‫ٌجلب‬ ‫الذي‬ ‫هو‬ ‫ال‬ ‫طرٌق‬ ‫عن‬ ‫للمستخدم‬ ‫وٌستعرضها‬ ‫ٌفصلها‬ ‫ثم‬ ‫ومن‬view‫ٌحدد‬ ‫الذي‬ ‫وهو‬ ، ‫أي‬ ‫عن‬ ‫المسؤول‬ ‫أنه‬ ‫كما‬ ،‫للمستخدم‬ ‫تظهر‬ ‫أن‬ ‫ٌجب‬ ً‫الت‬ ‫البٌانات‬ ‫من‬ ‫أي‬ ‫وال‬ ‫المستخدم‬ ‫بٌن‬ ‫بٌن‬ ‫ٌحصل‬ ‫تفاعل‬view‫أمر‬ ‫أي‬ ‫لتنفٌذ‬_^..* ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  36. 36. Controller ‫واآلن‬..‫بانشاء‬ ‫لنقوم‬Controller: ‫ال‬ ‫تعرٌؾ‬ ‫سهولة‬ ‫الحظ‬controller‫ال‬ ‫باستخدام‬ ‫عرفته‬ ً‫أنن‬ ‫والحظ‬ ، app‫ال‬ ‫وهذا‬app‫ال‬ ‫ٌحفظ‬ ‫الذي‬ ‫المتؽٌر‬ ‫هو‬object‫بال‬ ‫الخاص‬ module..،‫البرمجٌة‬ ‫الشٌفرة‬ ‫كتابة‬ ً‫ف‬ ‫وأرتب‬ ‫أسهل‬ ‫آراها‬ ‫الطرٌقة‬ ‫هذه‬ ‫ب‬ ‫كود‬ ‫سكربت‬ ‫الجافا‬ ‫احتوٌت‬ ‫أٌضا‬ ‫ولذلك‬(function()…_^* ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  37. 37. Controller ‫المتجر‬ ً‫ف‬ ‫عرضه‬ ‫سٌتم‬ ‫منتج‬ ‫بتعرٌؾ‬ ‫سأقوم‬ ‫واآلن‬(store)، ‫ال‬ ‫دور‬ ‫كٌؾ‬ ،‫اآلن‬ ‫وسنشاهد‬controller‫الرائع‬...‫المثال‬ ‫شاهد‬: (‫ال‬ ‫طرٌق‬ ‫عن‬ ‫القٌم‬ ‫بارجاع‬ ‫سنقوم‬controller‫ال‬ ‫خالل‬ ‫من‬ function‫ال‬ ً‫ه‬ ‫الراجعة‬ ‫قٌمته‬ ‫جعلنا‬ ‫الذي‬product) ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  38. 38. Controller ‫اآلن‬..‫خالل‬ ‫من‬ ‫وعرضها‬ ‫السابقة‬ ‫القٌمة‬ ‫الى‬ ‫الوصول‬ ‫سنستطٌع‬ ‫كٌؾ‬ ‫ال‬html‫؟‬..‫اإلجابة‬ ‫على‬ ‫مصرا‬ ‫كنت‬ ‫اذا‬..‫التالٌة‬ ‫الصورة‬ ‫فشاهد‬: (‫التنفٌذ‬ ‫أثناء‬ ‫معا‬ ‫لنبقى‬ ‫بالصور‬ ‫عرضه‬ ‫ٌتم‬ ‫ما‬ ‫وكتابة‬ ‫تطبٌق‬ ‫تنسى‬ ‫ال‬) ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  39. 39. Controller ‫السابقة‬ ‫الصورة‬ ‫شرح‬: 1)StoreController‫ال‬ ‫اسم‬ ‫هو‬Controller‫بانشائه‬ ‫قمنا‬ ‫الذي‬ ‫ال‬ ‫داخل‬module store... 2)as store‫بانشاء‬ ‫قمنا‬ ‫هنا‬store‫لل‬ ‫مرادؾ‬ ‫اسم‬ ‫أنه‬ ‫على‬ StoreController..‫اإلسم‬ ‫مع‬ ‫التعامل‬ ً‫ٌمكنن‬ ‫وبهذا‬store‫وكأنه‬ StoreController..‫البرمجٌة‬ ‫الشٌفرات‬ ‫لتنفٌذ‬ ‫أسهل‬ ‫وهذا‬.. ‫مهمة‬ ‫مالحظة‬:‫ال‬ ‫ٌعمل‬ ‫لن‬StoreController‫نطاق‬ ‫ضمن‬ ‫اال‬ ‫لل‬ ‫والنهاٌة‬ ‫البدائٌة‬div‫به‬ ‫الخاص‬..‫ال‬ ‫بوضع‬ ‫قمنا‬ ‫لو‬ ‫لذلك‬ {{store.product.cost}}‫ال‬ ‫هذا‬ ‫خارج‬ ‫كمثال‬div..‫شًء‬ ‫ٌطبع‬ ‫فلن‬ ^_^...‫ال‬ ‫اسم‬ ‫أٌضا‬ ‫نضع‬ ‫لم‬ ‫أننا‬ ‫لو‬ ‫ماذا‬ ‫لكن‬module‫؟‬ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  40. 40. Controller ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  41. 41. Controller ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫للنتٌجة‬ ‫جٌدا‬ ‫انتبه‬^_^
  42. 42. Controller ‫بكل‬..‫اإلحتماالت‬ ‫من‬ ‫العدٌد‬ ‫تجربة‬ ‫ٌمكنك‬ ‫تأكٌد‬..‫تطرقت‬ ً‫لكن‬ ‫بها‬ ‫الوقوع‬ ً‫ف‬ ‫الخطأ‬ ‫ٌكثر‬ ‫قد‬ ‫الحتماالت‬^_^.. ‫المثال‬ ‫شاهد‬( :‫البرمجٌة‬ ‫الشٌفرة‬ ‫وكتابة‬ ‫تطبٌق‬ ‫تستطٌع‬ ‫أنك‬ ‫من‬ ‫وتأكد‬ ‫تلٌها‬ ً‫الت‬ ‫للمستوٌات‬ ‫اإلنتقال‬ ‫قبل‬).. ‫خطٌرة‬ ‫نقطة‬ ‫لشرح‬ ‫التالٌة‬ ‫للشرٌحة‬ ‫انتقل‬ ‫ذلك‬ ‫وبعد‬^_^... ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫المثال‬ ‫شاهد‬
  43. 43. Controller ‫شاهد‬ ‫هذه‬ ‫المالحظة‬ ‫الخطٌرة‬: ‫تعرٌؾ‬ ‫لطرٌقة‬ ‫انتبه‬ ‫ال‬ ‫داخل‬ ‫الرسائل‬ Controller ^_^.. ‫عدم‬ ‫والحظ‬ ‫ال‬ ‫ظهور‬bye ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  44. 44. Controller ‫السابقة؟‬ ‫الرسالة‬ ‫تظهر‬ ‫لم‬ ‫لماذا‬ ‫المطلوبة‬ ‫النتٌجة‬ ‫الى‬ ‫نصل‬ ‫حتى‬ ‫األحداث‬ ‫تسلسل‬ ‫لنعٌد‬^_^ (1‫بوضع‬ ‫قمنا‬ng-app‫ال‬ ‫اسم‬ ‫على‬ ‫وتحتوي‬module store(‫لم‬ ‫فقط‬ ‫الصفحة‬ ‫حجم‬ ‫استؽالل‬ ‫لؽاٌات‬ ‫السابقة‬ ‫بالصفحة‬ ‫اظهارها‬ ‫ٌتم‬) (2‫بانشاء‬ ‫قمنا‬controller‫بعنوان‬ aneesMessageControler.. (3‫ال‬ ‫استخدام‬ ‫خالل‬ ‫من‬ ‫عرفت‬ ‫األولى‬ ،‫رسالتٌن‬ ‫بوضع‬ ‫قمنا‬ ‫ثم‬this ‫ال‬ ‫استخدام‬ ‫خالل‬ ‫من‬ ‫واألخر‬var‫أنها‬ ‫على‬local variable (4‫ال‬ ‫خالل‬ ‫من‬ ‫القٌم‬ ‫هذه‬ ‫بجلب‬ ‫قمنا‬html‫ال‬ ‫طرٌق‬ ‫عن‬ controller‫ال‬ ‫لكن‬localvar‫ٌطبع‬ ‫لم‬(..bye) ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  45. 45. Controller ‫اذن‬...‫السابق‬ ‫التتبع‬ ‫خالل‬ ‫من‬..‫ال‬ ‫أن‬ ً‫وه‬ ،‫مهمة‬ ‫لنتٌجة‬ ‫نصل‬ Local variable‫ال‬ ‫أو‬inner variable‫الٌها‬ ‫الوصول‬ ‫ٌمكن‬ ‫ال‬ ‫ٌجب‬ ،‫القٌم‬ ‫أو‬ ‫المتؽٌرات‬ ‫الى‬ ‫الوصول‬ ‫ولنستطٌع‬ ،‫ولذلك‬ ،‫هذه‬ ‫بالطرٌقة‬ ‫المحجوزة‬ ‫الكلمة‬ ‫نستخدم‬ ‫أن‬this‫ال‬ ‫عمل‬ ‫تعمل‬ ً‫ه‬ ‫وهنا‬ ،var‫من‬ ‫صالحٌة‬ ً‫تعط‬ ‫أنها‬ ‫اال‬ ،‫متؽٌر‬ ‫بتعرٌؾ‬ ‫تقوم‬ ‫أنها‬ ‫أي‬ ،‫المبدأ‬ ‫حٌث‬ ‫الٌها‬ ‫للوصول‬^_^ ‫عملٌا‬ ‫المثال‬ ‫شاهد‬ ‫واآلن‬^_^: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫المثال‬ ‫شاهد‬
  46. 46. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫تفكر‬ ‫لحظة‬
  47. 47. Controller ‫اآلن‬..‫من‬ ‫مجموعة‬ ‫تحتوي‬ ‫مصفوفة‬ ‫من‬ ‫القٌم‬ ‫استرجاع‬ ‫أردنا‬ ‫لو‬ ‫ماذا‬ ‫ال‬objects‫؟‬ ً‫التال‬ ‫الشكل‬ ‫خالل‬ ‫من‬ ‫ذلك‬ ‫ٌمكنك‬ ‫تأكٌد‬ ‫وبكل‬ ،‫طبعا‬^_^: (‫للشرائح‬ ‫استكمالك‬ ‫قبل‬ ‫النتائج‬ ‫وانظر‬ ‫البرمجٌة‬ ‫الشٌفرة‬ ‫بتنفٌذ‬ ‫قم‬^_^) ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  48. 48. Controller ‫بها‬ ‫الخاصة‬ ‫والنتائج‬ ‫السابقة‬ ‫الشرٌحة‬ ‫الحظت‬ ‫هل‬^_^‫؟‬ ‫تلك؟‬ ‫الحل‬ ‫بطرٌقة‬ ‫رأٌك‬ ‫ما‬ ‫المنطق‬ ‫من‬ ‫هل‬ ‫لكن‬ ،‫صحٌح‬ ‫بشكل‬ ‫معك‬ ‫سٌعمل‬ ‫السابق‬ ‫الحل‬ ‫تأكٌد‬ ‫بكل‬ ‫؟‬ ‫واحدة‬ ‫واحدة‬ ‫المصفوفة‬ ‫من‬ ‫القٌم‬ ‫استدعاء‬ ‫أو‬ ‫بتكرار‬ ‫أقوم‬ ‫أن‬ ‫ال‬ ‫من‬ ‫وجدٌد‬ ‫آخر‬ ‫جمال‬ ‫أٌضا‬ ‫ٌظهر‬ ‫وهنا‬ ،‫ال‬ ‫طبعا‬Angular‫وهو‬ ‫الدوران‬ ‫طرٌق‬ ‫عن‬ ‫القٌم‬ ‫جمٌع‬ ‫باستدعاء‬ ‫لك‬ ‫تسمح‬ ‫خاصٌة‬ ‫وجود‬^_^ ‫ذلك‬ ‫كٌؾ‬ ً‫سألتن‬ ‫وإن‬^_^..‫استخدام‬ ‫علٌك‬ ‫أنه‬ ‫سأخبرك‬directive ‫وهو‬ ‫وبسٌط‬ ‫واحد‬ng-repeat_^.. * ‫مثاال‬ ‫لنشاهد‬^_^ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  49. 49. Controller ‫مثال‬:‫هنا‬ ‫الحظ‬ng-repeat=“…” ‫ال‬course Loop‫الدوران‬ ‫عند‬ ‫بالقٌمة‬ ‫الخاص‬ ‫المتؽٌر‬ ‫اسم‬.. in aneesCourse.courses‫ال‬ ‫اسم‬ ‫تمثل‬ ‫هذه‬Alias‫بال‬ ‫الخاص‬ controller‫مجموعة‬ ‫ٌحتوي‬ ‫الذي‬ ‫المتؽٌر‬ ‫اسم‬ ‫الى‬ ‫باإلضافة‬ ‫ال‬ ‫ملؾ‬ ً‫ف‬ ‫القٌم‬app.js(..this.courses... ) (‫السابق‬ ‫المثال‬ ‫نفس‬ ‫هذا‬..‫ال‬ ‫باستخدام‬ ‫لكن‬ng-repeat) ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫المثال‬ ‫شاهد‬
  50. 50. Controller ‫اآلن‬..^_^..‫السابقة‬ ‫الدورات‬ ‫لتحمٌل‬ ‫زر‬ ‫بإضافة‬ ‫نقوم‬ ‫أن‬ ‫رأٌك‬ ‫ما‬^_^ ‫الزر‬ ‫سٌكون‬ ‫طبعا‬–ً‫وهم‬-_*-‫الشرح‬ ‫لؽاٌات‬:P.. ‫هو‬ ‫بالضبط‬ ‫أٌضا‬ ‫أرٌده‬ ‫ما‬..ً‫ل‬ ‫المسموح‬ ‫للدورات‬ ‫التحمٌل‬ ‫زر‬ ‫اظهار‬ ‫فقط‬ ‫بتحمٌلها‬^_^..‫الدورات‬ ‫لعبض‬ ‫ظاهرا‬ ‫ٌكون‬ ‫لن‬ ‫الزر‬ ‫أن‬ ‫أي‬.. ‫اآلن‬ ‫والسؤال‬_^..*‫هو‬ ‫والجواب‬ ‫هذا؟‬ ‫كٌؾ‬ng-show*_* ‫المثال‬ ‫شاهد‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  51. 51. Controller ‫لدٌنا‬ ‫ٌوجد‬ ،‫السابقة‬ ‫للخاصٌة‬ ‫المقابل‬ ً‫ف‬ng-hide^_^..‫وبنفس‬ ‫ال‬ ‫كانت‬ ‫حالة‬ ً‫ف‬ ‫األسلوب‬ng-hide‫تساوي‬true‫أنها‬ ً‫ٌعن‬ ‫فهذا‬ ‫مخفٌة‬ ‫ستكون‬^_^..‫سرٌعا‬ ‫مثاال‬ ‫لنستعرض‬ ‫واآلن‬( :‫لتصل‬ ‫بتطبٌقه‬ ‫قم‬ ‫لنتٌجة‬) ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  52. 52. Controller ^_^..‫السابق‬ ‫المثال‬ ‫بتطبٌق‬ ‫قمت‬ ‫اذا‬..‫باستخدام‬ ‫تقوم‬ ‫أن‬ ‫اآلن‬ ‫رأٌك‬ ‫ما‬ ‫ال‬ ‫مع‬ ‫استخدامها‬ ‫ٌمكننا‬ ً‫والت‬ ‫الموجودة‬ ‫المتؽٌرات‬ ‫بعض‬ng-repeat ^_^... $first‫و‬$middle‫و‬$last‫هذه‬3‫نوعها‬ ‫متؽٌرات‬boolean، ‫ال‬first‫وال‬ ‫العناصر‬ ‫أول‬ ‫العنصر‬ ‫كان‬ ‫اذا‬ ‫لتحدٌد‬middle‫جمٌع‬ ‫وال‬ ‫والنهاٌة‬ ‫البداٌة‬ ‫بٌن‬ ‫العناصر‬last‫العناصر‬ ‫نهاٌة‬ ً‫ف‬_* $index‫القٌمة‬ ‫موقع‬ ‫ارجاع‬ ‫على‬ ‫ٌقوم‬... $even‫و‬$oddً‫زوج‬ ‫أم‬ ‫فردي‬ ‫العنصر‬ ‫هل‬ ‫فحص‬ ‫على‬ ‫تقوم‬.. ‫المتحققة‬ ‫الفائدة‬ ‫مقدار‬ ‫تخٌل‬^_^.. ‫أن‬ ‫تأكٌد‬ ‫بكل‬true‫و‬ ‫الشرط‬ ‫ٌحقق‬ ً‫تعن‬false‫الشرط‬ ‫ٌحقق‬ ‫ال‬ ‫أنه‬^^ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  53. 53. Controller ‫مثال‬( :‫المثال‬ ‫شاهد‬ ‫ثم‬ ‫بتطبٌقه‬ ‫قم‬) ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫المثال‬ ‫شاهد‬
  54. 54. Controller ‫اآلن‬..‫من‬ ‫واستخدامها‬ ‫معها‬ ‫التعامل‬ ‫من‬ ‫ٌمكننا‬ ‫جمٌلة‬ ‫حركة‬ ‫أٌضا‬ ‫هناك‬ ‫ال‬ ‫خالل‬repeat..‫ال‬ ‫عناصر‬ ‫تكرار‬ ‫امكانٌة‬ ً‫ف‬ ‫الخاصٌة‬ ‫هذه‬ ‫وتكمن‬ html‫الدوران‬ ‫أثناء‬.. ‫ال‬ ‫باستخدام‬ ‫هذا‬ ‫وٌكون‬ng-repeat-start=“”‫وال‬ ng-repeat-end... ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  55. 55. Controller ‫ممم‬...‫بعد‬ ‫ماذا‬^_^‫معا؟‬ ‫بتطبٌقها‬ ‫نقوم‬ ‫أن‬ ‫رأٌك‬ ‫ما‬ ‫رائعة‬ ‫فكرة‬ ‫هناك‬ ، ‫هناك‬directive‫اسمه‬ng-click..‫ٌمثل‬ ‫وهذا‬event... ‫اآلن‬..‫ال‬ ‫هذا‬ ‫على‬ ‫مثاال‬ ‫لنشاهد‬event^_^ ‫الفكرة‬ ‫سهولة‬ ‫الحظت‬ ‫هل‬^_^.. ‫لل‬ ‫المباشر‬ ‫التنفٌذ‬ ‫هذا‬ ‫لكن‬ng-click..‫أو‬ ‫ارسال‬ ‫أردنا‬ ‫لو‬ ‫ماذا‬ ‫لكن‬ ‫ال‬ ‫خالل‬ ‫من‬ ‫قٌم‬ ‫استقبال‬app.js‫؟‬ ‫المتؽٌرات‬ ‫مع‬ ‫نتعامل‬ ‫كنا‬ ‫كما‬ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  56. 56. Controller ‫السابق‬ ‫السؤال‬ ‫على‬ ‫ولإلجابة‬..‫التالٌة‬ ‫الصورة‬ ‫شاهد‬: ‫من‬ ‫القٌمة‬ ‫نأخذ‬ ً‫لك‬function..‫ال‬ ‫باستخدام‬ ‫قمنا‬this‫ألجل‬ ‫وذلك‬ ‫ال‬scope^_^..‫واستقبالها‬ ‫وارسالها‬ ‫للقٌم‬ ‫الوصول‬ ‫أستطٌع‬ ‫وبهذا‬.. ‫المثال‬ ‫لنشاهد‬ ‫واآلن‬ ‫وانتبه‬ ً‫عمل‬ ‫بشكل‬ ‫جزئٌة‬ ‫لكل‬^_^: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫المثال‬ ‫شاهد‬
  57. 57. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫تفكر‬ ‫لحظة‬
  58. 58. Filters ً‫البدٌه‬ ‫السؤال‬..^_^..‫ال‬ ‫هو‬ ‫ما‬AngularJS Filters‫؟‬ ‫لٌتم‬ ‫البٌانات‬ ‫شكل‬ ‫أو‬ ‫البٌانات‬ ‫لمعالجة‬ ‫تستخدم‬ ‫مزٌة‬ ً‫ه‬ ‫بساطة‬ ‫بكل‬ ‫ال‬ ‫هذه‬ ‫تطبٌق‬ ‫وٌتم‬ ،‫والفهم‬ ‫القرائة‬ ‫سهل‬ ‫بشكل‬ ‫للمستخدم‬ ‫عرضها‬ Filters‫ال‬ ‫داخل‬Expressions‫ال‬ ‫داخل‬ ‫أو‬services or controller...‫البٌانات‬ ‫لشكل‬ ‫النهائٌة‬ ‫المرحلة‬ ً‫ه‬ ‫تكون‬ ‫ما‬ ‫وعادة‬ ‫للمستخدم‬ ‫الناتجة‬..‫أو‬ ‫الوقت‬ ‫بصٌؽة‬ ‫الخاص‬ ‫الفلتر‬ ‫علٌها‬ ‫األمثلة‬ ‫ومن‬ ‫العملة‬..‫الخ‬ ‫فلو‬ ،‫متعددة‬ ‫بأشكال‬ ‫البٌانات‬ ‫تخزٌن‬ ‫علٌنا‬ ‫ٌوفر‬ ‫أنه‬ ‫الفلتر‬ ‫مزاٌا‬ ‫من‬ ‫أٌضا‬ ‫محتوى‬ ‫لدٌنا‬ ‫كان‬dynamic..‫ال‬ ‫داخل‬ ‫الفلتر‬ ‫نضع‬ ‫أن‬ ً‫ٌكف‬ ‫فإنه‬ view‫بالفلتر‬ ‫تم‬ ‫كما‬ ‫هذه‬ ‫البٌانات‬ ‫عرض‬ ‫وسٌتم‬..‫تعدٌل‬ ‫أمر‬ ‫ٌجعل‬ ‫وهذا‬ ‫اٌضا‬ ‫أسهل‬ ‫البٌانات‬ ‫شكل‬.._^..* ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  59. 59. Filters ‫مالحظة‬:‫ال‬ ‫أحد‬ ‫استخدام‬ ‫ٌمكننا‬Filtersً‫ف‬ ‫أصال‬ ‫المبنٌة‬ ‫أو‬ ‫الموجودة‬ ‫ال‬AngularJS‫ال‬ ‫بناء‬ ‫ٌمكنك‬ ‫أو‬Filter‫بك‬ ‫الخاص‬^_^ ‫ال‬Filtersً‫ه‬ ‫الموجودة‬: 1)Currency:‫عملة‬ ‫شكل‬ ‫على‬ ‫الرقم‬ ‫جعل‬ ‫على‬ ‫الفلتر‬ ‫هذا‬ ‫ٌقوم‬(‫أي‬ ‫مثل‬ ‫العملة‬ ‫مع‬ ‫نتعامل‬ ‫كأننا‬$1,234.56)‫الخاص‬ ‫الرمز‬ ‫وٌكون‬ ‫محلٌا‬ ‫المستخدمة‬ ‫باللؽة‬ ‫الخاص‬ ‫الرمز‬ ‫هو‬ ‫بالعملة‬(‫الحالة‬ ‫اإلفتراضٌة‬... ) ‫الفلتر‬ ‫هذا‬ ‫على‬ ‫مثاال‬ ‫لنشاهد‬ ‫واآلن‬ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  60. 60. Filters ‫العامة‬ ‫الصٌؽة‬: ‫المثال‬ ‫شاهد‬( :‫ال‬symbol‫وال‬ ‫اختٌاري‬fractionSize‫اختٌاري‬).. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  61. 61. Filters 2)number:‫رقم‬ ‫بصٌؽة‬ ً‫الرقم‬ ‫النص‬ ‫جعل‬ ‫على‬ ‫الفلتر‬ ‫هذا‬ ‫ٌقوم‬ ‫الخانات‬ ‫عدد‬ ‫تحدٌد‬ ‫ٌمكن‬ ‫كما‬ ،‫الفئات‬ ‫بٌن‬ ‫تفصل‬ ‫فواصل‬ ‫ٌحتوي‬ ‫باألعشار‬ ‫الخاصة‬..‫رقما‬ ‫للفلتر‬ ‫المسندة‬ ‫القٌمة‬ ‫تكن‬ ‫لم‬ ‫واذا‬..‫ارجاع‬ ‫سٌتم‬ Empty(‫شًء‬ ‫ال‬ ‫أي‬..‫فارؼة‬ ‫المخرجات‬ ‫وستصبح‬.. )‫استخدمنا‬ ‫وإذا‬ ‫كلمة‬Infinity‫أو‬–Infinity‫الخاصة‬ ‫اإلشارة‬ ‫ارجاع‬ ‫فسٌتم‬ ‫بالماالنهاٌة‬.. ‫العامة‬ ‫الصٌؽة‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  62. 62. Filters ‫المثال‬ ‫شاهد‬: ‫الماالنهاٌة‬ ‫بخصوص‬..‫ال‬ ‫على‬ ‫تعمل‬ ‫لن‬ ‫فإنها‬local‫قمت‬ ‫حال‬ ً‫ف‬ ‫الى‬ ‫التؽٌٌرات‬ ‫ببعض‬..‫المزٌد‬ ‫على‬ ‫اإلطالع‬ ‫ٌمكنك‬‫هنا‬ ‫من‬ ‫مباشرة‬ ‫وتطبٌقه‬ ‫المثال‬ ‫رؤٌة‬ ‫ٌمكنك‬ ‫أو‬‫هنا‬ ‫من‬... ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  63. 63. Filters 3)uppercase & lowercase:^_^‫هذا‬ ‫ٌقوم‬ ‫هههه‬ ‫فلتر‬ ‫أسهل‬ ‫الى‬ ‫إما‬ ‫األحرؾ‬ ‫حالة‬ ‫تؽٌٌر‬ ‫على‬ ‫الفلتر‬uppercase‫الى‬ ‫أو‬ lowercase..._^* ‫العامة‬ ‫الصٌؽة‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  64. 64. Filters ‫مثال‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  65. 65. Filters 4)date:‫أٌضا‬ ‫سهلة‬..‫الخاص‬ ‫الشكل‬ ‫لتؽٌٌر‬ ‫الفلتر‬ ‫هذا‬ ‫نستخدم‬ ‫بالتارٌخ‬..ً‫ه‬ ‫له‬ ‫العامة‬ ‫والصٌؽة‬: ً‫ه‬ ‫اإلفتراضٌة‬ ‫الحالة‬mediumDate‫شكل‬ ‫تحدٌد‬ ‫عدم‬ ‫حال‬ ً‫ف‬ ‫المراد‬ ‫التارٌخ‬.. Date،‫معٌن‬ ‫تارٌخ‬ ‫عن‬ ‫أو‬ ‫الثانٌة‬ ‫أجزاء‬ ‫عن‬ ‫ٌعبر‬ ‫رقم‬ ‫أو‬ ‫نص‬ ‫تمثل‬ ‫ال‬ ‫مثل‬ ‫بالوقت‬ ‫الخاصة‬ ‫األنظمة‬ ‫أحد‬ ‫ٌعتمد‬ ‫أن‬ ‫إما‬ ،‫آخر‬ ‫بمعنى‬ISO‫أو‬ ً‫الثوان‬ ‫أجزاء‬ ‫عدد‬ ‫على‬ ‫بنائا‬ ‫المراد‬ ‫التارٌخ‬ ‫وضع‬ ‫ٌتم‬.. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  66. 66. Filters ‫مثال‬: ‫المختلفة‬ ‫الوقت‬ ‫صٌػ‬ ‫مشاهدة‬ ‫ٌمكنك‬‫هنا‬ ‫من‬.. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  67. 67. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫تفكر‬ ‫لحظة‬
  68. 68. Filters 5)orderBy:‫كانت‬ ‫إن‬ ‫معٌنة‬ ‫مصفوفة‬ ‫قٌم‬ ‫لترتٌب‬ ‫المزٌة‬ ‫هذه‬ ‫تستخدم‬ ‫رقمٌة‬ ‫أو‬ ‫نصٌة‬ ‫قٌم‬ ‫ذات‬ ‫المصفوفة‬ ‫هذه‬..ً‫النص‬ ‫الترتٌب‬ ‫ٌكون‬ ‫أبجدٌا‬.._^*ً‫ه‬ ‫العامة‬ ‫والصٌؽة‬: ‫ال‬reverse‫بشكل‬ ‫الترتٌب‬ ‫اعادة‬ ‫من‬ ‫من‬ ‫لنا‬ ‫تسمح‬ ‫اختٌارٌة‬ ‫مزٌة‬ ً‫ه‬ ‫من‬ ‫ترتٌب‬ ً‫ٌعن‬ ،ً‫عكس‬A – Z‫من‬ ‫ٌصبح‬ ً‫عكس‬Z 0 A..‫والقٌمة‬ ً‫ٌعن‬ ‫منطقٌة‬ ‫به‬ ‫الخاصة‬(true or false.. ) ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  69. 69. Filters ‫مثال‬1: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  70. 70. Filters‫مثال‬2: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  71. 71. Filters ‫ال‬ ‫شرح‬ ‫من‬ ‫تعالى‬ ‫هللا‬ ‫بإذن‬ ‫انتهٌنا‬ ‫نكون‬ ‫بهذا‬orderBy..‫لكن‬ ‫الحظتها‬ ‫وأظنك‬ ‫مهمة‬ ‫كمالحظة‬..‫األمثلة‬ ‫ذكرت‬ ‫عندما‬ ً‫أنن‬ ً‫وه‬ ‫والسبب‬ ‫الٌه‬ ‫أتطرق‬ ‫ولم‬ ‫السكربت‬ ‫أستخدم‬ ‫لم‬ ‫سبقت‬ ً‫الت‬ ‫العامة‬ ‫والصٌػ‬ ‫ال‬ ‫فهم‬ ‫من‬ ‫اإلنتهاء‬ ‫حتى‬ ‫األمر‬ ‫تبسٌط‬ ‫محاولة‬ ‫الى‬ ‫ٌعود‬ ‫ذلك‬ ً‫ف‬ angular‫ٌعمل‬ ‫كٌؾ‬..‫جزئٌة‬ ‫آخر‬ ‫من‬ ‫تعالى‬ ‫هللا‬ ‫بإذن‬ ‫اإلنتهاء‬ ‫وحٌن‬ ‫بالفلتر‬..‫خالل‬ ‫من‬ ‫فلتر‬ ‫واستخدام‬ ‫بناء‬ ‫طرٌقة‬ ‫ٌوضح‬ ‫مثال‬ ‫بطرح‬ ‫سنقوم‬ ‫سكربت‬ ‫الجافا‬..‫ال‬ ‫مثل‬ ‫مهم‬ ‫مفهوم‬ ‫شرح‬ ‫وسٌتم‬$filter‫وال‬$scope ..‫وؼٌرها‬..‫لذلك‬..‫ذكرنا‬ ‫كما‬ ‫المسٌر‬ ‫نحاول‬ ‫دعنا‬...‫استطعت‬ ‫وإن‬ ‫جدا‬ ‫ممتاز‬ ‫فهذا‬ ‫لوحدك‬ ‫تطبٌقها‬ ‫أو‬ ‫تعلمها‬..‫العامة‬ ‫الصٌؽة‬ ‫فهم‬ ‫فبعد‬ ‫ال‬ ‫ٌعمل‬ ‫وكٌؾ‬Anguale(‫خالل‬ ‫من‬ ‫بذلك‬ ‫القٌام‬ ‫تستطٌع‬ ‫أنك‬ ‫ٌفترض‬ ‫بالسكربت‬ ‫الخاصٌة‬ ‫العامة‬ ‫الصؽٌة‬^_^).. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  72. 72. Filters 6)limitTo:‫جدٌدة‬ ‫مصفوفة‬ ‫أو‬ ‫نص‬ ‫انشاء‬ ‫على‬ ‫المزٌة‬ ‫هذه‬ ‫تقوم‬ (‫فقط‬ ‫نسخة‬)‫كأكبر‬ ‫أو‬ ‫لإلقتطاع‬ ‫تحدٌده‬ ‫تم‬ ‫الذي‬ ‫العناصر‬ ‫عدد‬ ‫تحتوي‬ ‫علٌه‬ ‫بالحصول‬ ‫لنا‬ ‫ٌسمح‬ ‫ممكن‬ ‫عدد‬..‫البدء‬ ‫مكان‬ ‫بتحدٌد‬ ‫البدء‬ ‫وٌمكن‬ ‫المصوفة‬ ‫بداٌة‬ ‫من‬ ‫النسخ‬ ‫ٌتم‬ ‫حتى‬ ‫بالعد‬–‫النص‬ ‫أو‬-(‫موجب‬)‫نهاٌة‬ ‫من‬ ‫أو‬ ‫المصفوفة‬–‫النص‬ ‫أو‬-(‫سالبة‬ ‫القٌمة‬ ‫كانت‬ ‫اذا‬... )‫الكالم‬ ‫شرح‬ ‫ولٌسهل‬ ..‫العامة‬ ‫الصٌؽة‬ ‫الحظ‬: Limit:‫للعناصر‬ ‫األعلى‬ ‫الحد‬(..‫عدد‬)‫و‬begin:‫قٌمتها‬ ‫اختٌارٌة‬ ‫مزٌة‬ ‫اإلفتراضٌة‬0‫المصوفة‬ ‫أو‬ ‫النص‬ ‫مهاٌة‬ ‫من‬ ‫ابدأ‬ ً‫تعن‬ ‫هنا‬ ‫السالبة‬ ‫القٌمة‬ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  73. 73. Filters ‫مثال‬1: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  74. 74. Filters ‫مثال‬2: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  75. 75. Filters 7)json:‫سكربت‬ ‫الجافا‬ ‫متؽٌر‬ ‫بتحوٌل‬ ‫القٌام‬ ‫من‬ ‫الفلتر‬ ‫هذا‬ ‫لنا‬ ‫ٌسمح‬ ‫نوع‬ ‫من‬object‫الى‬JSON string..^_^..،‫اآلن‬ ‫تتسائل‬ ‫وقد‬ ‫؟‬ ‫أصال‬ ‫التحوٌل‬ ‫هذا‬ ‫الى‬ ‫أحتاج‬ ‫أن‬ ‫ٌمكن‬ ‫لماذا‬! ‫جدا‬ ً‫منطق‬ ‫سؤال‬ ‫وهو‬..‫سهلة‬ ‫وإجابته‬^_^..‫هذا‬ ‫نستخدم‬ ‫أننا‬ ً‫وه‬ ‫لعمل‬ ‫ؼالبا‬ ‫األسلوب‬debugging(‫حالة‬ ً‫ف‬ ‫وتصحٌحها‬ ‫القٌم‬ ‫فحص‬ ‫مشكلة‬ ‫أي‬ ‫وجود‬)^_^.. ‫العامة‬ ‫الصٌؽة‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  76. 76. Filters ‫مثال‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  77. 77. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫تفكر‬ ‫لحظة‬
  78. 78. Filters 8)filter:‫بال‬ ‫ٌوجد‬Filters‫اسمه‬ ‫فلتر‬filter^_^‫هذا‬ ‫وٌقوم‬ ، ‫مصفوفة‬ ‫أنه‬ ‫على‬ ‫وارجاعه‬ ‫المصفوفة‬ ‫من‬ ‫جزء‬ ‫اقتطاع‬ ‫على‬ ‫الفلتر‬ ‫تصفٌته‬ ‫تمت‬ ‫ما‬ ‫على‬ ‫بنائا‬ ‫جدٌدة‬..‫اسم‬ ‫عن‬ ‫البحث‬ ‫مثل‬anees‫ضمن‬ ‫من‬ ‫قائمة‬taher, anees, anas, saddam..‫كتابة‬ ‫حال‬ ً‫ف‬ ،‫الخ‬ an..‫تحتوي‬ ‫جدٌدة‬ ‫مصفوفة‬ ‫لنا‬ ‫سٌظهر‬anees‫و‬anas..‫الخ‬ ‫العامة‬ ‫الصٌؽة‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  79. 79. Filters ‫العامة‬ ‫الصٌؽة‬ ‫شرح‬: ‫بال‬ ‫ٌقصد‬expression‫ال‬ ‫هو‬string, object, functionً‫الت‬ ‫المصفوفة‬ ‫من‬ ‫العناصر‬ ‫إلختٌار‬ ‫استخدامها‬ ‫ٌمكن‬... ‫ال‬ ‫أما‬comparator‫فحص‬ ‫خاللها‬ ‫من‬ ‫ٌتم‬ ً‫الت‬ ‫المقارنة‬ ‫بها‬ ‫فٌقصد‬ ‫عنها‬ ‫البحث‬ ‫المراد‬ ‫والقٌمة‬ ‫المصفوفة‬ ً‫ف‬ ‫العنصر‬ ‫بٌن‬ ‫الكامل‬ ‫التطابق‬.. ‫تكون‬ ‫أن‬ ‫إما‬ ً‫وه‬true‫أو‬false|undefined‫أو‬ function(actual, expected)...‫ال‬ ‫هذا‬ ‫ٌقوم‬ ‫بحٌث‬function ‫بإرجاع‬true‫التطابق‬ ‫حالة‬ ً‫ف‬..‫ال‬ ‫استخدمنا‬ ‫حال‬ ً‫وف‬true‫مباشرة‬ ‫ل‬ ‫اختصار‬ ‫فإنها‬function(actual, expected) { return angular.equals(actual, expected)} ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  80. 80. Filters ‫مثال‬1: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  81. 81. Filters ‫مثال‬2:‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫نتائج‬ ‫ٌوجد‬ ‫ال‬(..‫اإلسم‬ ‫ٌتطابق‬ ‫أن‬ ‫ٌجب‬) ‫التالٌة‬ ‫الشرٌحة‬ ً‫ف‬ ‫البرمجٌة‬ ‫الشٌفرة‬(..‫الشرح‬ ‫ألهمٌة‬)
  82. 82. Filters ‫كل‬ ‫أستخدم‬ ‫أن‬ ً‫ٌمكنن‬ ‫أنه‬ ‫الحظ‬object‫البحث‬ ‫بعملٌة‬ ‫للقٌام‬ ‫حدى‬ ‫على‬ ^_^‫من‬ ‫البحث‬ ‫مربعات‬ ‫ألحد‬ ‫العناصر‬ ‫جمٌع‬ ‫تحدٌد‬ ً‫ٌمكنن‬ ً‫أنن‬ ‫كما‬ ، ‫ال‬ ‫استخدام‬ ‫خالل‬$...‫السابق‬ ‫للمثال‬ ‫البرمجٌة‬ ‫الشٌفرة‬ ‫شاهد‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  83. 83. Filters ‫اآلن‬..‫تعالى‬ ‫هللا‬ ‫بإذن‬ ‫نكون‬..‫ال‬ ‫موضوع‬ ‫من‬ ‫إنتهٌنا‬Filter..‫لكن‬ ‫سابقا‬ ‫بتأجٌلها‬ ‫قمنا‬ ‫جزئٌة‬ ‫الى‬ ‫التنوٌه‬ ‫علٌنا‬ ‫ٌبقى‬..‫ال‬ ‫استخدام‬ ً‫وه‬ filter‫سكربت‬ ‫الجافا‬ ‫خالل‬ ‫من‬..‫انشاء‬ ‫حتى‬ ‫أو‬custom filter‫من‬ ‫سكربت‬ ‫الجافا‬ ‫خالل‬..‫ان‬ ‫وكما‬ ،‫تعالى‬ ‫هللا‬ ‫بإذن‬ ‫الٌه‬ ‫سنتطرق‬ ‫ما‬ ‫وهذا‬ ‫ال‬ ‫داخل‬ ‫استخدامها‬ ‫تعلمنا‬ ‫عامة‬ ‫صٌؽة‬ ‫هناك‬html..‫عامة‬ ‫صٌؽة‬ ‫هناك‬ ‫سكربت‬ ‫للجافا‬..‫هذه‬ ‫ألن‬ ،‫واحد‬ ‫مثال‬ ‫الى‬ ‫عنها‬ ‫أشرح‬ ‫لن‬ ‫تأكٌد‬ ‫وبكل‬ ‫تعلمناه‬ ‫ما‬ ‫تشابه‬ ‫الفكرة‬^_^‫سكربت‬ ‫الجافا‬ ‫استخدمنا‬ ‫أننا‬ ‫واإلختالؾ‬ ، ‫بالعملٌة‬ ‫للقٌام‬_^... * ‫التالٌة‬ ‫الشرٌحة‬ ‫الى‬ ‫اإلنتقال‬ ‫قبل‬..‫األمثلة‬ ‫جمٌع‬ ‫استعرض‬..‫على‬ ‫وتوقؾ‬ ‫منها‬ ‫جزئٌة‬ ‫كل‬..‫فكرة‬ ‫تمثل‬ ‫جزئٌة‬ ‫فكل‬..‫كذلك‬ ‫البرجٌة‬ ‫والشٌفرة‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫المثال‬ ‫شاهد‬
  84. 84. Filters ‫سكربت‬ ‫الجافا‬ ‫من‬ ‫الفلتر‬ ‫استخدام‬(:،‫اختٌارٌة‬ ‫تبقى‬ ‫اإلختٌارٌة‬ ‫الخٌارات‬ ‫واإللزامٌة‬..‫كذلك‬ ‫تبقى‬..‫سابقا‬ ‫شرحنا‬ ‫كما‬^_^)‫الصٌؽة‬ ‫شاهد‬ ‫كمثال‬ ‫سكربت‬ ‫للجافا‬ ‫العامة‬‫هنا‬ ‫من‬ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  85. 85. Filters ‫واآلن‬..‫انشاء‬ ً‫وه‬ ‫تعالى‬ ‫هللا‬ ‫بإذن‬ ‫جزئٌة‬ ‫آخر‬custom filter^_^ ‫إنشاء‬ ‫من‬ ‫نتمكن‬ ً‫لك‬filter‫ال‬ ً‫ف‬ ‫دالة‬ ‫هناك‬ ،‫بنا‬ ‫خاص‬angular ً‫وه‬ ‫ذلك‬ ‫من‬ ‫تمكننا‬.filter()^_^‫كل‬ ً‫ف‬ ‫استخدامها‬ ‫وٌمكننا‬ ، module‫ال‬ ‫داخل‬ ‫بإنشائه‬ ‫نقوم‬angular... ً‫التال‬ ‫الشكل‬ ‫الى‬ ‫أنظر‬ ‫اآلن‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  86. 86. Filters ‫واآلن‬..‫رقم‬ ‫أي‬ ‫بتربٌع‬ ‫ٌقوم‬ ‫بسٌط‬ ‫فلتر‬ ‫بانشاء‬ ‫ولنقم‬ ،‫عملٌا‬ ‫مثاال‬ ‫لنأخذ‬.. ‫ال‬filter‫بانشاء‬ ‫الخاصة‬ ‫الدالة‬ ‫اسم‬custom filter.._^* ‫ال‬makeSquareNumber‫ٌربع‬ ‫سنجعله‬ ‫الفلتر‬ ‫وهذا‬ ،‫الفلتر‬ ‫اسم‬ ‫الرقم‬_^...* ‫مالحظة‬:‫ادخال‬ ‫مثل‬ ،‫الممكنة‬ ‫الخطأ‬ ‫حاالت‬ ‫األمثلة‬ ً‫ف‬ ‫اإلعتبار‬ ‫بعٌن‬ ‫آخذ‬ ‫ال‬ ‫وؼٌرها‬ ‫رقم‬ ‫بدل‬ ‫نص‬..‫سكربت‬ ‫بالجافا‬ ‫تعرفها‬ ‫أن‬ ‫ٌجب‬ ‫األمور‬ ‫هذه‬ ‫ألن‬ ‫ال‬ ‫بدورة‬ ‫ولٌس‬angular... ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  87. 87. Filters ‫السابق‬ ‫المثال‬ ‫على‬ ‫مالحظات‬: (1‫انشاء‬ ‫ٌتم‬makeSquareNumber‫ك‬global‫ٌمكنك‬ ‫فلتر‬ ‫ال‬ ‫خالل‬ ‫من‬ ‫اال‬ ‫الفلتر‬ ‫هذا‬ ‫استخدام‬ ‫ٌمكن‬ ‫وال‬ ،‫استخدامه‬app ‫مودٌول‬*.._* (2‫تمثل‬ ً‫الت‬ ‫األرقام‬ ‫معالجة‬ ‫المثال‬ ‫هذا‬ ً‫ف‬ ‫سٌتم‬object‫ولٌس‬ ،‫واحد‬ ‫وؼٌرها‬ ‫مصفوفات‬.. ‫السابق‬ ‫المثال‬ ‫استخدام‬ ‫طرٌقة‬ ‫هنا‬ ‫واآلن‬( :‫ال‬ ‫أستخدم‬ ً‫أنن‬ ‫كٌؾ‬ ‫والحظ‬ filter‫ك‬ ‫العنصر‬ ‫مع‬object‫الدوران‬ ‫جملة‬ ‫داخل‬).. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  88. 88. Filters ‫مثال‬2:‫ال‬ ‫مع‬ ‫سٌعمل‬ ‫لفلتر‬ ‫مثال‬ ‫بانشاء‬ ‫اآلن‬ ‫سنقوم‬repeat‫نفسها‬ ‫ال‬ ‫من‬ ‫بدال‬object...‫المصفوفة‬ ‫عناصر‬ ‫فلترة‬ ‫على‬ ‫سٌقوم‬ ‫المثال‬ ‫هذا‬ ‫بالحرؾ‬ ‫بها‬ ‫الخاصة‬ ‫األحرؾ‬ ‫تبدأ‬ ً‫الت‬“a”(..ً‫ف‬ ‫المثال‬ ‫تكملة‬ ‫التالٌة‬ ‫الشرٌحة‬) ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  89. 89. Filters ‫حقٌقة‬..‫هو‬ ‫به‬ ‫قمنا‬ ‫ما‬ ‫ففعلٌا‬ ،‫بجدٌدة‬ ‫لٌست‬ ‫السابق‬ ‫المثال‬ ‫من‬ ‫الفكرة‬ ‫إن‬ ‫هو‬ ‫الشرط‬ ‫هذا‬ ،‫شرط‬ ‫واجراء‬ ‫المصفوفة‬ ‫عناصر‬ ‫ألخذ‬ ‫دوران‬ ‫عملٌة‬ ً‫الت‬ ‫النتائج‬ ‫تمثل‬ ،‫أخرى‬ ‫مصفوفة‬ ‫داخل‬ ‫حفظ‬ ‫به‬ ‫الخاص‬ ‫والناتج‬ ،‫الفلتر‬ ‫ستعرض‬..‫كاملة‬ ‫المصفوفة‬ ‫الفلتر‬ ‫هذا‬ ‫ٌستقبل‬ ،‫وبهذا‬..^_^ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  90. 90. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫تفكر‬ ‫لحظة‬
  91. 91. Filters ‫واآلن‬..‫؟‬ ‫ماذا‬^_^ ‫معٌن‬ ‫سؤال‬ ‫لذهنك‬ ‫ٌتبادر‬ ‫الم‬..‫؟‬ ‫ذهنك‬ ً‫ف‬ ‫ٌدر‬ ‫الم‬..،‫مثال‬ ،‫الفلتر‬ ‫مع‬ ‫متؽٌرات‬ ‫استخدام‬ ً‫ٌمكنن‬ ‫كٌؾ‬ ‫ال‬ ‫عن‬ ‫تحدثنا‬ ‫عندما‬JSON filter..‫كلمة‬ ‫نضع‬ ‫كنا‬json‫ثم‬:4‫أي‬ ‫بمقدار‬ ‫المسافة‬ ‫اجعل‬4‫فراؼات‬..‫متؽٌر‬ ‫اضافة‬ ‫مثال‬ ‫اآلن‬ ً‫ٌمكنن‬ ‫كٌؾ‬ ‫التضاعؾ‬ ‫مقدار‬ ‫أحدد‬ ‫بحٌث‬ ،‫الرقم‬ ‫لمثال‬ ‫هذا‬ ‫مثل‬..‫قوة‬2‫أو‬3‫أو‬4 ..‫أحدد‬ ‫أن‬ ،ً‫الثان‬ ‫المثال‬ ً‫وف‬ ‫الطرٌقة‬ ‫بنفس‬ ‫أٌضا‬ ً‫ٌمكنن‬ ‫وكٌؾ‬ ،‫الخ‬ ‫علٌه‬ ‫بنائا‬ ‫بالفلترة‬ ‫سأقوم‬ ‫الذي‬ ‫الحرؾ‬..‫مثل‬“b”‫أو‬“c”..‫الخ‬ ‫جدا‬ ‫بسٌط‬ ‫األمر‬ ‫هذا‬..‫التحكم‬ ‫على‬ ‫كبٌرة‬ ‫قدرة‬ ‫ٌعطٌك‬ ‫بحٌث‬ ،‫ورائع‬ ‫بك‬ ‫الخاص‬ ‫بالفلتر‬..^_^..‫اآلن‬ ‫مثاال‬ ‫لنشاهد‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  92. 92. ‫المثال‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com Filters
  93. 93. Filters ‫السابق‬ ‫المثال‬ ً‫ف‬ ‫الحظ‬..‫خالل‬ ‫من‬ ‫ارسالها‬ ‫تم‬ ً‫الت‬ ‫القٌم‬ ‫استقبلت‬ ً‫أنن‬ ‫المرفوعة‬ ‫القوة‬ ‫وهو‬ ‫الزامٌا‬ ‫الخٌارات‬ ‫أحد‬ ‫جعلت‬ ‫ذلك‬ ‫وبعد‬ ،‫الفلتر‬ ‫للرقم‬ ً‫وبإرجاع‬ ،‫للرقم‬1‫إنطباق‬ ‫لعدم‬ ‫القٌمة‬ ‫بهذه‬ ‫الفلتر‬ ً‫أنه‬ ‫فأنا‬ ‫خطأ‬ ‫رسالة‬ ‫عرض‬ ‫أٌضا‬ ً‫وٌمكنن‬ ،‫الشروط‬..‫التحكم‬ ‫ٌمكنك‬ ‫ترٌد‬ ‫كما‬ ‫بذلك‬..ً‫الثان‬ ‫الخٌار‬ ‫بٌنما‬..‫اختٌاري‬ ‫الرسالة‬ ‫حقل‬ ‫بجعل‬ ‫قمت‬.. ‫الخصائص‬ ‫مع‬ ‫سهولة‬ ‫بكل‬ ‫التعامل‬ ‫أٌمكننا‬ ‫كٌؾ‬ ‫الحظ‬_^* ‫واآلن‬..‫ال‬ ‫مع‬ ‫الفكرة‬ ‫هذه‬ ‫لنستخدم‬repeat‫أٌضا‬*_.. * ً‫الثان‬ ‫المثال‬ ‫لنشاهد‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  94. 94. Filters ‫مثال‬2: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  95. 95. Filters ‫ال‬ ‫عن‬ ‫المتواضع‬ ‫حدٌثنا‬ ‫من‬ ‫تعالى‬ ‫هللا‬ ‫بإذن‬ ‫إنتهٌنا‬ ‫نكون‬ ‫بهذا‬Filters، ‫السابقة‬ ‫األمثلة‬ ‫جمٌع‬ ‫بتطبٌق‬ ‫التزمت‬ ‫أنك‬ ‫بك‬ ‫رجائا‬ ً‫وكل‬.. ‫ٌمكنك‬ ،ً‫عمل‬ ‫بشكل‬ ‫والعمل‬ ‫ذكرها‬ ‫تم‬ ً‫الت‬ ‫األمثلة‬ ‫جمٌع‬ ‫لمشاهدة‬ ‫اآلن‬ ‫هنا‬ ‫النقر‬...‫وال‬ ‫البرمجٌة‬ ‫والشٌفرة‬ ‫بالنتائج‬ ‫النظر‬ ‫امعان‬ ‫ٌرجى‬ console.. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫المثال‬ ‫شاهد‬
  96. 96. ng-src Directive ‫الدروس‬ ‫بٌن‬ ‫وكفاصل‬ ‫وسرٌعة‬ ‫سهلة‬ ‫فقرة‬ ً‫ف‬ ‫اآلن‬:P..‫خطر‬ ‫هل‬ ‫ال‬ ‫باستخدام‬ ‫ٌمكننا‬ ‫كٌؾ‬ ‫ببالك‬angular‫ال‬ ‫تحدٌد‬path‫للصورة‬.‫؟‬ ‫حسنا‬..‫الطرٌقة‬ ‫هذه‬ ‫نرى‬ ‫أو‬ ‫نجرب‬ ‫أن‬ ‫رأٌك‬ ‫ما‬: ‫لها‬ ‫تجربتك‬ ‫بعد‬.. ‫وخمن‬ ‫للخطأ‬ ‫انظر‬ ‫؟‬ ‫الخطأ‬ ‫هذا‬ ‫لماذا‬ ‫للشرٌحة‬ ‫انتقل‬ ‫بعدها‬ ‫التالٌة‬^_^ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  97. 97. ng-src Directive ‫ال‬ ً‫ف‬ ‫لدٌك‬ ‫خطأ‬ ‫وسٌظهر‬ ،‫الصورة‬ ‫تظهر‬ ‫لن‬ ‫طبعا‬console*_*، ‫؟‬ ‫لماذا‬ ‫سٌحاول‬ ‫وهنا‬ ،‫سكربت‬ ‫مع‬ ‫نتعامل‬ ‫أننا‬ ‫تنسى‬ ‫ال‬ ‫وبالنهاٌة‬ ‫بساطة‬ ‫بكل‬ ‫ال‬ ‫تنفٌذ‬ ‫قبل‬ ‫الصورة‬ ‫تحمٌل‬ ‫المتصفح‬Exeprission..‫ٌجب‬ ‫لهذا‬ ‫المشكلة‬ ‫لهذه‬ ‫أخرى‬ ‫طرٌقا‬ ‫أو‬ ‫حال‬ ‫نجدث‬ ‫أن‬ ‫علٌنا‬^_^..‫الحل‬ ‫وٌكون‬ ‫خالل‬ ‫من‬ng-src..‫المطلوبة‬ ‫الصورة‬ ‫بتحدٌد‬ ‫من‬ ‫لنا‬ ‫ستسمح‬ ‫فهذه‬ ‫عملٌة‬ ‫فعال‬ ً‫وه‬ ،‫وجلبها‬resource..^_^.. ‫المثال‬ ‫لمشاهدة‬ ‫لنذهب‬ ‫واآلن‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  98. 98. ng-src Directive ‫مثال‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫المثال‬ ‫شاهد‬
  99. 99. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫تفكر‬ ‫لحظة‬
  100. 100. ‫إنشاء‬tabs‫ال‬ ‫خالل‬ ‫من‬angular^_^ ‫اآلن‬..‫ال‬ ‫من‬ ‫المزٌد‬ ‫عن‬ ‫لنتحدث‬directive...‫عملٌا‬ ‫تطبٌقا‬ ‫ولنشاهد‬ ‫إنشاء‬ ‫وهو‬ ،‫جمٌال‬tabs‫المحتوى‬ ‫بٌن‬ ‫للتنقل‬( ..‫أننا‬ ‫ننسى‬ ‫ال‬ ‫طبعا‬ ‫نستخدم‬bootstrap‫للوقت‬ ‫اختصارا‬ ‫الدورة‬ ‫أول‬ ‫ذكرنا‬ ‫كما‬).. ‫ال‬ ‫باستخدام‬ ً‫وتفاعل‬ ً‫عمل‬ ‫تطبٌق‬ ‫هذا‬ ‫طبعا‬angular..‫بسٌط‬ ‫وهو‬ ‫جدا‬ ‫مهمة‬ ‫فكرة‬ ‫وسٌشرح‬..ً‫التال‬ ‫الموضوع‬ ‫الى‬ ‫اإلنتقال‬ ‫قبل‬_^* ً‫مع‬ ‫وسر‬ ‫إنتبه‬ ‫لذلك‬”‫حبة‬ ‫حبة‬^_^”..‫المثال‬ ‫شاهد‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  101. 101. ‫إنشاء‬tabs‫ال‬ ‫خالل‬ ‫من‬angular^_^ ‫جدا‬ ‫بسٌط‬ ‫السابق‬ ‫المثال‬..‫الموجودة‬ ‫الروابط‬ ‫أحد‬ ‫على‬ ‫النقر‬ ‫عند‬..‫سٌقوم‬ ‫ال‬ ‫قٌمة‬ ‫بتؽٌر‬tab‫بال‬ ‫الخاص‬ ‫الحاوي‬ ‫أسفل‬ ‫مطبوعة‬ ‫وستشاهدها‬ Tab..‫النتٌجة‬ ‫شاهد‬: ‫ال‬ ‫قٌمة‬ ‫أن‬ ‫ستالحظ‬ ‫السابقة‬ ‫للصورة‬ ‫عدت‬ ‫اذا‬tabً‫ه‬2‫النقر‬ ‫عند‬ ‫علٌها‬^_^..‫ال‬ ‫أن‬ ‫هو‬ ‫حصل‬ ‫ما‬ ‫وفعلٌا‬Expristion‫تحدٌث‬ ‫بعمل‬ ‫قام‬ (updated)‫ال‬ ‫باستخدام‬ ‫النقر‬ ‫عند‬ ‫مباشرة‬ ‫به‬ ‫الخاصة‬ ‫للقٌمة‬ Ng-click...‫واآلن‬..‫بكل‬ ‫الخاص‬ ‫المحتوى‬ ‫ولنعرض‬ ‫الرقم‬ ‫لنستبدل‬ tab...‫حاول‬ ‫؟‬ ‫تذكر‬ ‫؟‬ ‫ذلك‬ ‫ٌتم‬ ‫كٌؾ‬ ‫لكن‬..‫التالٌة‬ ‫للشرٌحة‬ ‫انتقل‬ ‫ثم‬*_* ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  102. 102. ‫إنشاء‬tabs‫ال‬ ‫خالل‬ ‫من‬angular^_^ ‫اآلن‬..‫ال‬ ‫باستخدام‬ ‫سنقوم‬ng-show‫سابقا‬ ‫ذكرناها‬ ً‫الت‬!!.. ‫ذلك؟‬ ‫كٌؾ‬.. !‫ال‬ ‫من‬ ‫القٌمة‬ ‫أخذ‬ ‫خالل‬ ‫من‬ ‫بساطة‬ ‫بكل‬tab‫النقر‬ ‫عند‬ ‫ال‬ ‫داخل‬ ‫ومقارنتها‬ng-show..^_^...‫المثال‬ ‫شاهد‬: ‫بعرض‬ ‫قمنا‬ ‫أننا‬ ‫الحظ‬ ‫ال‬ ‫على‬ ‫بنائا‬ ‫المحتوى‬tab ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  103. 103. ‫إنشاء‬tabs‫ال‬ ‫خالل‬ ‫من‬angular^_^ ‫السابق‬ ‫التطبٌق‬ ً‫ف‬ ‫مشكلة‬ ‫هناك‬ ‫لكن‬^_^..‫؟‬ ‫الحظتها‬ ‫هل‬ ‫ل‬ ‫محتوى‬ ‫أي‬ ‫عرض‬ ‫ٌتم‬ ‫لم‬ ‫أنه‬ ً‫ه‬ ‫المشكلة‬tab‫قٌمنا‬ ‫عند‬ ‫اال‬ ‫بالنقر‬..‫لل‬ ‫ابتدائٌة‬ ‫قٌمة‬ ‫تحدٌد‬ ‫خالل‬ ‫من‬ ‫بساطة‬ ‫بكل‬ ‫تحل‬ ‫مشكلة‬ ‫وهذه‬ tab‫باستخدام‬^^^__^^^ng-init...‫المثال‬ ‫الحظ‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  104. 104. ‫إنشاء‬tabs‫ال‬ ‫خالل‬ ‫من‬angular^_^ ‫واآلن‬..‫المستخدم‬ ‫مع‬ ‫التفاعلٌة‬ ‫من‬ ‫نوعا‬ ‫المثال‬ ً‫نعط‬ ‫أن‬ ‫رأٌك‬ ‫ما‬.._^* ‫الكالس‬ ‫اضافة‬ ‫مثل‬active‫لل‬tab‫باختٌارها‬ ‫قام‬ ً‫الت‬^_^..‫الٌس‬ ‫بذلك‬ ‫القٌام‬ ‫المنطق‬ ‫من‬^_^..‫المثال‬ ‫شاهد‬: (ng-class)‫هو‬directive‫ال‬ ‫خالل‬ ‫من‬ ‫كالس‬ ‫إلضافة‬ ‫ٌستخدم‬ angular_^* ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  105. 105. ‫إنشاء‬tabs‫ال‬ ‫خالل‬ ‫من‬angular^_^ ‫اآلن‬^_^..‫؟‬ ‫السابق‬ ‫التسلسل‬ ً‫ف‬ ‫رأٌك‬ ‫ما‬ ‫إكتمل‬ ‫المثال‬ ‫أن‬ ‫أعتقد‬..‫من‬ ‫أنا‬ ً‫ألن‬ ‫لٌس‬ ‫طبعا‬ ،‫وواضح‬ ‫سهل‬ ‫وهو‬ ‫المثال‬ ‫كتبت‬..‫ال‬ ‫ألن‬ ‫بل‬angular‫المهام‬ ‫علٌنا‬ ‫تبسط‬:P ‫عنه‬ ‫بسؤال‬ ‫أرؼب‬ ‫ما‬ ‫اآلن‬...‫السابق؟‬ ‫الشكل‬ ‫ٌعجبك‬ ‫هل‬ ‫؟‬ ‫هذه‬ ‫العمل‬ ‫طرٌقة‬ ً‫ف‬ ً‫منطق‬ ‫خطأ‬ ‫بوجود‬ ‫تشعر‬ ‫وهل‬ ‫نظٌفة‬ ‫البرمجٌة‬ ‫الشٌفرة‬ ‫بأن‬ ‫تشعر‬ ‫وهل‬“Clean”‫؟‬ ‫ربما‬ ‫أو‬ ‫ال‬ ‫ثم‬ ‫ربما‬ ‫أو‬ ‫نعم‬ ‫ثم‬ ‫ربما‬ ‫أو‬ ‫ال‬ ‫ب‬ ‫إجابتك‬ ‫تكون‬ ‫أن‬ ‫ٌجب‬ ‫طبعا‬ ^_^...‫لٌست‬ ً‫ه‬ ‫طبعا‬”‫حزٌرة‬”..‫للشٌفرة‬ ً‫منطق‬ ‫تخٌل‬ ً‫ه‬ ‫وإنما‬ ‫بسٌطا‬ ‫ٌكون‬ ‫قد‬ ‫السابق‬ ‫فالشكل‬..‫كلٌا‬ ‫إعتمادا‬ ‫إعتمدنا‬ ‫الوقت‬ ‫بذات‬ ‫لكننا‬ ‫ال‬ ‫على‬html..ً‫منطق‬ ‫خطأ‬ ‫لنا‬ ‫ٌسبب‬ ‫وهذا‬..‫ال‬ ‫أٌن‬controller‫؟‬! ‫البرمجٌة‬ ‫الشٌفرة‬ ‫تعتبر‬ ‫لن‬ ‫وبهذا‬clean.. !‫أنه‬ ‫وبما‬html‫تكرار‬ ‫علٌه‬ ‫سٌتوجب‬ ‫كل‬ ً‫ف‬ ‫العملٌة‬ ‫هذه‬html..‫ال‬ ‫أستخدم‬ ‫ال‬ ‫لماذا‬controller‫من‬ ‫العملٌة‬ ‫وأنفذ‬ ‫صفحة‬ ‫كل‬ ً‫ف‬ ‫خالله‬html..^_^‫علٌه‬ ‫ٌجاب‬ ‫أو‬ ‫ٌسأل‬ ‫أن‬ ‫ٌجب‬ ‫ما‬ ‫هو‬ ‫هذا‬&_& ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  106. 106. ‫إنشاء‬tabs‫ال‬ ‫خالل‬ ‫من‬angular^_^ ‫الخطوات‬ ‫اتبع‬ ‫أفضل‬ ‫صٌؽة‬ ‫أو‬ ‫مثالٌة‬ ‫صٌؽة‬ ‫الى‬ ‫الصٌؽة‬ ‫ولتحوٌل‬ ‫التالٌة‬: 1) ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  107. 107. ‫إنشاء‬tabs‫ال‬ ‫خالل‬ ‫من‬angular^_^ 2)‫متؽٌر‬ ‫انشاء‬ ‫هو‬ ‫بساطة‬ ‫بكل‬ ‫منا‬ ‫المطلوب‬ ‫سٌكون‬ ،‫الخطوة‬ ‫هذه‬ ً‫ف‬ ‫ال‬ ‫قٌمة‬ ‫وتعدٌل‬ ‫الوصول‬ ‫ٌمكننا‬ ‫خالله‬ ‫من‬tab‫بالنقر‬ ‫قمنا‬ ً‫الت‬ ‫المتؽٌر‬ ‫أن‬ ‫تالحظ‬ ‫لذلك‬ ،‫علٌها‬tab3‫بنائا‬ ‫قٌمته‬ ‫تؽٌرت‬ ‫من‬ ‫هو‬ ‫على‬setTab‫ال‬ ‫من‬ ‫استقبالها‬ ‫تم‬ ً‫الت‬html..^_^ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  108. 108. ‫إنشاء‬tabs‫ال‬ ‫خالل‬ ‫من‬angular^_^ 3)‫عند‬ ‫فعلٌا‬ ،‫هنا‬ ‫الحظ‬ ‫فإننا‬ ‫عملٌة‬ ‫أي‬ ‫من‬ ‫التحقق‬ ‫قٌمة‬ ‫نرجع‬ 1‫أو‬0 ‫خطأ‬ ‫أو‬ ‫صح‬ ‫ٌكون‬ ‫علٌها‬ ‫وبنائا‬ ً‫المنطق‬ ‫الناتج‬..‫وهنا‬ ‫كذلك‬..‫التحقق‬ ‫سٌتم‬ ‫علٌه‬ ‫النقر‬ ‫تم‬ ‫ما‬ ‫هل‬ ‫الحالٌة‬ ‫ٌساوي‬..‫اذا‬ ‫نعم‬..‫ال‬ ‫أضؾ‬active ‫المطلوب‬ ‫المحتوى‬ ‫وأظهر‬ ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  109. 109. ‫إنشاء‬tabs‫ال‬ ‫خالل‬ ‫من‬angular^_^ ‫للمثال‬ ‫الكامل‬ ‫الشكل‬ ‫شاهد‬ ‫واآلن‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫المثال‬ ‫شاهد‬
  110. 110. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫تفكر‬ ‫لحظة‬
  111. 111. ‫ال‬ ‫مع‬ ‫التعامل‬FORMS ‫واآلن‬..‫نستذكر‬ ‫أن‬ ‫علٌنا‬ ،‫المهمة‬ ‫الجزئٌة‬ ‫بهذه‬ ‫وللبدء‬Directive‫مهم‬ ‫ال‬ ‫وهو‬ ،‫جدا‬ng-model‫سابقا‬ ‫عنه‬ ‫تحدثنا‬ ‫تأكٌد‬ ‫وبكل‬ ،..‫اآلن‬ ‫لكن‬ ‫بٌتا‬ ‫الشعر‬ ‫من‬ ‫سنزٌدكم‬^_^‫ال‬ ‫مع‬ ‫استخدامه‬ ‫ٌمكننا‬ ‫كٌؾ‬ ‫ونشاهد‬ ، Controller‫ال‬ ‫مع‬ ‫دوره‬ ‫وأهمٌة‬ ،Forms_^... * •‫تذكٌر‬:‫ال‬ ‫عن‬ ‫سابقا‬ ‫تحدثنا‬model-ng‫بعمل‬ ‫القٌام‬ ‫ووظٌفتها‬ ، data-bind‫التحكم‬ ‫عناصر‬ ‫مع‬.. ‫ال‬ ‫استخدام‬ ‫أو‬ ‫التفاعل‬ ‫طرٌقة‬ ‫على‬ ،‫سرٌعا‬ ‫مثاال‬ ‫لنشاهد‬ ‫واآلن‬ Ng-model‫ال‬ ‫مع‬Controller.._^* ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  112. 112. ‫ال‬ ‫مع‬ ‫التعامل‬FORMS ‫مثال‬:‫المثال‬ ‫الى‬ ‫أنظر‬ ‫اآلن‬..‫ال‬ ‫استخدمت‬ ً‫أنن‬ ‫سوى‬ ‫جدٌد‬ ‫شًء‬ ‫ال‬ Alias name‫بال‬ ‫الخاص‬controllar‫ال‬ ‫داخل‬ng-model‫قبل‬ ‫التسمٌة‬ ‫إطالق‬..‫اإلسم‬ ‫فأصبح‬formCtrl0.powerNumber.. ‫المثال‬ ‫طبق‬ ‫اآلن‬(‫مهم‬)‫التالٌة‬ ‫للشرٌحة‬ ‫اإلنتقال‬ ‫قبل‬:P ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  113. 113. ‫ال‬ ‫مع‬ ‫التعامل‬FORMS ‫اآلن‬..‫ال‬ ‫أن‬ ‫وهو‬ ،‫أمرا‬ ‫ستالحظ‬{{formCtrl.powerNumber} ‫مكانها‬ ‫الفعلٌة‬ ‫القٌمة‬ ‫وتعوض‬ ً‫تختف‬ ‫ثم‬ ،‫الصفحة‬ ‫تحمٌل‬ ‫أثناء‬ ‫ستظهر‬! ‫ال‬ ‫وضع‬ ‫هو‬ ‫هذا‬ ً‫ف‬ ‫والسبب‬angular js‫أو‬js‫نهاٌة‬ ً‫ف‬ ‫عموما‬ ‫ال‬ ‫إؼالق‬ ‫قبل‬ ‫أو‬ ‫الصفحة‬body..‫الملؾ‬ ‫هذا‬ ‫تحمٌل‬ ‫ٌتم‬ ‫لن‬ ‫فإنه‬ ‫وبهذا‬ ‫أوامر‬ ‫من‬ ‫قبله‬ ‫ما‬ ‫تنفٌذ‬ ‫بعد‬ ‫اال‬..‫ال‬ ‫سٌظهر‬ ‫لذلك‬Expression‫السابق‬ ً‫ٌختف‬ ‫ثم‬ ‫ومن‬..‫المسألة‬ ‫هذه‬ ‫ولحل‬..‫ال‬ ‫ملفات‬ ‫بوضع‬ ‫تقوم‬ ‫أن‬ ‫ٌمكنك‬js ‫ال‬ ً‫ف‬header..‫ال‬ ‫استخدام‬ ‫ٌمكنك‬ ‫أو‬ng-clock_^.. * ‫ال‬ ‫فكرة‬ ‫بساطة‬ ‫وبكل‬ng-clockً‫ه‬css!!‫وبالتحدٌد‬display ‫بقٌمة‬none^_^..‫ال‬ ‫خالل‬ ‫من‬ ‫عملٌات‬ ‫أو‬ ‫طبعا‬ ‫تفاعل‬ ‫وجود‬ ‫مع‬ ‫لكن‬ angular..‫أنت‬ ‫ٌهمك‬ ‫ما‬ ‫لكن‬..‫مثاال‬ ‫شاهد‬ ،‫استخدامه‬ ‫طرٌقة‬ ‫هو‬:_^* ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  114. 114. ‫ال‬ ‫مع‬ ‫التعامل‬FORMS ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫الصفحة‬ ‫تحمٌل‬ ‫بعد‬ ‫الصفحة‬ ‫تحمٌل‬ ‫قبل‬
  115. 115. ‫ال‬ ‫مع‬ ‫التعامل‬FORMS ‫واآلن‬^_^..‫بال‬ ‫لنبدأ‬Formsً‫فعل‬ ‫بشكل‬^_^.. ‫البسٌط‬ ‫المثال‬ ‫هذا‬ ‫شاهد‬..ً‫ف‬ ‫وأهمها‬ ‫فكرة‬ ‫أول‬ng-submitً‫والت‬ ، ‫عمل‬ ‫ٌتم‬ ‫خاللها‬ ‫من‬submit‫الفورم‬ ‫هذا‬ ‫لمحتوٌات‬..‫قمت‬ ً‫انن‬ ‫والحظ‬ ‫ال‬ ‫دور‬ ‫ٌظهر‬ ‫بدأ‬ ‫كٌؾ‬ ‫والحظ‬ ،‫بها‬ ‫أرؼب‬ ً‫الت‬ ‫العملٌة‬ ‫بإجراء‬ng-model ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  116. 116. ‫ال‬ ‫مع‬ ‫التعامل‬FORMS ‫واآلن‬..‫سؤال‬ ‫ببالنا‬ ‫سٌخطر‬..‫ال‬ ‫نستخدم‬ ‫لم‬ ‫لماذا‬ng-click‫؟‬ ‫هنا‬! ‫؟‬ ‫استخدامها‬ ‫الممكن‬ ‫من‬ ‫الٌس‬..‫به‬ ‫وقمنا‬ ‫سابقا‬ ‫تعلمناه‬ ‫عما‬ ‫فرق‬ ‫ٌوجد‬ ‫ال‬ ‫ال‬ ‫خالل‬ ‫من‬ng-click‫؟‬ ً‫صدٌق‬ ‫ٌا‬ ‫صحٌح‬ ‫قلته‬ ‫ما‬ ‫جمٌع‬^_^..‫بعض‬ ‫اآلن‬ ‫لك‬ ‫سأشرح‬ ‫لكن‬ ‫ال‬ ‫استخدمت‬ ‫لماذا‬ ‫توضح‬ ً‫الت‬ ‫المهمة‬ ‫النقاط‬ng-submit‫تمثل‬ ً‫والت‬ ‫ال‬ ‫بٌن‬ ‫فروقات‬ng-click‫وال‬ng-submit^_^ 1)‫ال‬ ‫نستخدم‬ng-submit‫ال‬ ‫مع‬form element‫بٌنما‬ ،‫تحدٌدا‬ ‫ال‬ ‫نستخدم‬ng-click‫آخر‬ ‫عنصر‬ ‫أي‬ ‫مع‬..‫ال‬ ‫أن‬ ‫ذلك‬ ً‫ف‬ ‫والسبب‬ submit‫ال‬ ‫محتوٌات‬ ‫لجمٌع‬ ‫ٌكون‬form(..‫تقول‬ ‫القاعدة‬ Form is Submitted, Not Button..^_^) ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  117. 117. ‫ال‬ ‫مع‬ ‫التعامل‬FORMS 2)‫ال‬ ‫ٌنطلق‬trigger‫بال‬ ‫الخاص‬ng-submit‫ال‬ ‫خالل‬ ‫من‬click ‫ال‬ ‫خالل‬ ‫من‬ ‫أو‬enter‫عنصر‬ ‫أي‬ ‫فوق‬..‫ال‬ ‫بٌنما‬ng-click‫اذا‬ ‫لل‬ ‫وضعها‬ ‫تم‬button‫ال‬ ‫على‬ ‫النقر‬ ‫عند‬ ‫الى‬ ‫الحدث‬ ‫ٌنطلق‬ ‫فلن‬ btn.. ‫واآلن‬..ً‫وه‬ ‫مهمة‬ ‫جزئٌة‬ ‫الى‬ ‫لننتقل‬: Form Validation and States ‫والتحقق‬ ‫التحكم‬ ‫وكٌفٌة‬ ،‫حدوثها‬ ‫الممكن‬ ‫األخطاء‬ ‫عن‬ ‫سنتحدث‬ ‫وهنا‬ ‫ال‬ ‫باستخدام‬ ‫العملٌات‬ ‫من‬ ‫وؼٌرها‬angular^_^.. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  118. 118. ‫ال‬ ‫مع‬ ‫التعامل‬FORMS ‫واآلن‬..‫بها‬ ‫ونقطة‬ ‫خاصٌة‬ ‫لكل‬ ‫وانتبه‬ ،‫البرمجٌة‬ ‫الشٌفرة‬ ‫هذه‬ ‫شاهد‬:^_^ ‫هنا‬ ‫الحظ‬..‫استخدام‬ ‫خالل‬ ‫من‬ ‫بالفورم‬ ‫اإلعتٌادي‬ ‫التحقق‬ ‫بإطفاء‬ ‫قمنا‬ ‫أوال‬ ‫ال‬novalidate‫ال‬ ً‫ف‬ ‫والموجودة‬HTML5.. ‫ال‬ ‫باستخدام‬ ‫قمنا‬ ‫ذلك‬ ‫بعد‬required‫من‬ ‫سنتحقق‬ ‫خاصٌة‬ ‫على‬ ‫كمثال‬ ‫الموجودة‬ ‫الحقول‬ ً‫ف‬ ‫تحققها‬.. ‫ثم‬ ‫الفورم‬ ‫اسم‬ ‫استخدمنا‬ ‫ذلك‬ ‫وبعد‬.‫ثم‬$valid‫فهو‬ ،‫مهم‬ ‫المتؽٌر‬ ‫وهذا‬ ‫للفورم‬ ‫بالتحقق‬ ‫الخاصة‬ ‫النهائٌة‬ ‫النتٌجة‬ ‫ارجاع‬ ‫عن‬ ‫المسؤول‬..--< ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  119. 119. ‫ال‬ ‫مع‬ ‫التعامل‬FORMS ‫واآلن‬..‫السابقة‬ ‫البرمجٌة‬ ‫الشٌفرة‬ ‫تنفٌذ‬ ‫شاهد‬:^_^ ‫للضرورة‬ ‫المثال‬ ‫بتنفٌذ‬ ‫قم‬ ‫التؽٌرات‬ ‫معنا‬ ‫تتابع‬ ‫حتى‬ ‫بأول‬ ‫أوال‬^_^... ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  120. 120. ‫ال‬ ‫مع‬ ‫التعامل‬FORMS ‫اآلن‬..‫الحظت‬ ‫اذا‬..‫بال‬ ‫الخاصة‬ ‫النتٌجة‬ ‫فإن‬$valid‫إما‬ ‫مباشرة‬ ‫تظهر‬ false‫وإما‬ture‫معها‬ ‫التعامل‬ ‫تم‬ ً‫الت‬ ‫المعطٌات‬ ‫حسب‬..‫والسؤال‬ ‫اآلن‬-__-‫؟‬..‫ال‬ ‫عملٌة‬ ‫لمنع‬ ‫القٌمة‬ ‫هذه‬ ‫استخدام‬ ً‫ٌمكنن‬ ‫كٌؾ‬ submitting‫؟‬ ‫بالفورم‬ ‫الخاصة‬ ‫كشرط‬ ‫بوضعها‬ ‫ذلك‬ ‫ٌكون‬^_^...ً‫التال‬ ‫بالشكل‬: ‫واآلن‬..‫الجزئٌة‬ ‫هذه‬ ‫على‬ ‫عملٌا‬ ‫مثاال‬ ‫لمشاهدة‬ ‫سوٌا‬ ‫لنذهب‬_^* ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  121. 121. ‫ال‬ ‫مع‬ ‫التعامل‬FORMS ‫مثال‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  122. 122. ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com ‫تفكر‬ ‫لحظة‬
  123. 123. ‫ال‬ ‫مع‬ ‫التعامل‬FORMS ‫واآلن‬_^.. *‫ال‬ ً‫وه‬ ‫مهمة‬ ‫جزئٌة‬ ‫الى‬class‫الحقول‬ ً‫ف‬ ‫تتؽٌر‬ ً‫الت‬ ‫والحقل‬ ‫المستخدم‬ ‫بٌن‬ ‫التفاعل‬ ‫عملٌة‬ ‫أثناء‬^_^ً‫ف‬ ‫أهمٌتها‬ ‫وتكمن‬ ، ‫الخطأ‬ ‫بها‬ ‫حصل‬ ً‫الت‬ ‫الحقول‬ ‫تمٌٌز‬..‫منها‬ ‫التحقق‬ ‫تم‬ ً‫الت‬ ‫والحقول‬ ‫بنجاح‬..‫جدا‬ ‫سهل‬ ‫أمر‬ ‫هذا‬ ‫وعمل‬.._^..*‫هو‬ ‫معرفته‬ ‫علٌك‬ ‫ما‬ ‫كل‬ ‫المطلوبة‬ ‫والحالة‬ ‫التفاعل‬ ‫لحظة‬ ‫تؽٌٌرها‬ ‫ٌتم‬ ً‫الت‬ ‫الكالس‬..‫ثم‬ ‫ومن‬ ‫ال‬ ‫طرٌق‬ ‫عن‬ ‫اللون‬ ‫تحدٌد‬css^_^.. ‫واآلن‬..‫معها‬ ‫التعامل‬ ‫ٌمكننا‬ ً‫الت‬ ‫الكالس‬ ‫مجموعة‬ ‫معا‬ ‫لنشاهد‬.. (‫ال‬ ‫بعملٌات‬ ‫تتعلق‬ ‫عنها‬ ‫نتحدث‬ ً‫الت‬ ‫الكالس‬input..‫تسمى‬ ‫لذلك‬ input class.. ) ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  124. 124. ‫ال‬ ‫مع‬ ‫التعامل‬FORMS ‫ال‬Input Classً‫ه‬ ‫عنها‬ ‫سنتحدث‬ ً‫الت‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
  125. 125. ‫ال‬ ‫مع‬ ‫التعامل‬FORMS ‫مثال‬: ‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com

×