Angular js دورة

بسم هللا الرحمن الرحيم

AngularJSدورة

.أنس حكمت أبو حمد: تقدم

[email protected]: البرد اإللكترون

www.2nees.com: الموقع اإللكترون

2nees.com( دورة مجانة)أنس حكمت أبو حمد

الفهرس

مهمة جدا باإلضافة الى األساسات لذكر الكثر من النقاط ) المقدمة•

(مثل تعرؾ المصطلحات الرئسة..الت لن نعود لشرحها

Angularأساسات ال •

•Expressions

•Directives

•Modules

•Controller

•Filters

angularمن خالل ال tabsإنشاء •

FORMSالتعامل مع ال •


الفهرس

•include-ng والCustom Directive

•http$

AngularJS (AngularJS Table)التعامل مع الجداول ف •

•Create New ModuleAngularJS

الخاتمة•

(2nees.com/ar/coursesالدورة مع األمثلة مكنك تحملها من )


المقدمة

الحمد هلل رب العالمن، أعطى اللسان، وعلم البان، وخلق اإلنسان، فبأي

لك الحمد ا من هو للحمد أهل، أهل الثناء والمجد،..أآلء ربكما تكذبان

.أحق ما قال العبد وكلنا لك عبد

..من ضعؾ طلب نصرتك.. لك الحمد

..من فقر طلب ؼناك.. لك الحمد

..من ذلل طلب عزك.. لك الحمد

وما رجوناك إال ثقة فك، وما.. ما دعوناك إال حسن ظن بك.. لك الحمد

فلك الحمد حتى ترضى، فالحمد هلل.. خفناك إال تصدقا بوعدك ووعدك

رب العالمن والصالة والسالم على علم األعالم، وإمام كل إمام، محمد

:بن عبد هللا صل هللا عله وسلم وعلى آله وصحبه أجمعن، وبعد


المقدمة

نعود لكم الوم بدورة جددة ورائعة ف مجال تطور المواقع، وه

، وقبل الحدث عن بئة العمل هذه، جب^_^ AngularJSدروة

: علك أن تعرؾ متطلبات هذه الدورة وه

•HTML–CSS - JS

•jQuery, PHP, Database (..لست متطلبات ضرورة)

لكن FRONT-ENDبالؽالب سكون عملنا مقترن على جانب ال •

سنحتاج ف بعض األمثلة الى وجود سرفر محل ومكنك الحصول

أو ؼره حسب wampعله من خالل تحمل بئة تطور مواقع مثل

وذلك لتنفذ بعض األمثلة على ..نظام التشؽل الخاص بك

requests وجلب بانات عن طرق الajax أوjson ..الخ


المقدمة(مراجع هذه الدورة المتواضعة) AngularJSروابط مهمة لل

•AngularJS API Docs•Guide to AngularJS Documentation•schools Angular3WAngularJS Up & Runningكتاب ••Shaping up with angular (PDF has a nice description

& examples )

جمع هذه المواقع أو الكتب أو الشروحات الت ذكرت أو لم تذكر تم

AngualarJSفمثال كان الشرح من كتاب ..استخدامها بما لب الحاجة Up & Running ..والدوال وؼرها من روابط الموقع الرسم، واألمثلة

باإلضافة الى... w3schoolsو Shaping up with angularمن

..الملخصات المختلفة، ومن خالل التعامل مع بئة العمل هذه


AngularJS API Docs

https://docs.angularjs.org/guide/

http://www.w3schools.com/angular/default.asp



المقدمة

برػ” من سمعته قوال لكم أنقل أن أحب.. الدورة بهذه البدء قبل واآلن

jQuery ال مثل نعرفها الت ومكاتبها js ال أن فه قول “بالك

التالعب على بنائا Dynamics الوب صفحات لجعل نستخدمها

قوم فعلا هو AngularJS ال لكن .. وؼرها والمواقع بالعناصر

HTML ال جعل على dynamic !! .. هذه استهجنت.. وشخصا

فإن Angular لل وتجربت تعلم وبعد لكن ..األمر بداة ف الفكرة

..أنت ستشاهده ما وهذا... روعتها لشدة قوله مكن ما أقل هذا أن أقول

^_^


المقدمة

؟ Angularلماذا جب أن أتعلم ال ..أول أمر خطر ببالنا اآلن

اذا كنت تستخدم الجافا سكربت لتجعل من موقعك..الجواب هو

Dynamic .. فالخار األمثل هوangular ألنه تح لك اآلت :

.ساعدك على تنظم الشفرة البرمجة للمشروع1.

Responsiveساعدك على انشاء مواقع متجاوبة مع الهاتؾ 2.

*_* jQueryالتعامل مع ال angularمكنك من خالل ال 3.

.سهلة جدا ف الفحص واكتشاؾ األخطاء4.

؟ Angularاذا ما هو ال


المقدمة

مصممة لتضؾ نوعا ( Framework)ه بئة عمل Angularال

، وكف من ممزاتها أنك لتتعامل HTMLمن التفاعلة على ال

، وقوم مبدأ التقسم (pure)معها كف أن تتعلم الجافا سكربت

... MVVMأو MVCالبنائ لها على مبدأ ال

قبل البدء، ألنك MVCجب أن تعرؾ ما هو ال : MVCمفهوم ال

، MVCستتعامل مع بئة عمل مصممة نوعا ما لتكون قربة من ال

كما أنه مهم angularسسهل علك فهم ال ..ولهذا فهم هذا النوع

..لك ف األمام اذا أحببت تعلم بئات عمل أخرى


المقدمة

MVC ه اختصار لModel-View-Controllerوهو أحد ال ،

Design Pattern األكثر شهرة، وتقوم فكرته على تقسم المشروع

الى وحدات منطقة صؽرة تعارؾ على ( وخصوصا الكبر منها)

نسقها بن المبرمجن والمطورن، وتكون هذه الوحدات ه نقاط

اإلنطالق للبحث عن المشاكل والتطور لألنظمة وبنائها وتحدثها،

: أجزاء أو قطع وه 3وتكون هذه الوحدات مقسمة الى

1 )model : فعلا مكننا إعتبارها مركز أي مشروع أو تطبق، وعادة

، (عادة( )server)تحتوي على البانات الت مكن جلبها من الخادم

وأي بانات راها أي مستخدم بعد ذلك ستكون قادمة من جزء من هذا

... modelأو من أكثر من modelال


المقدمة2 )view : ه الواجهة الت تعامل معها المستخدم، وهDynamic

، لذلك modelوتفاعلة، وتتحدث معلوماتها بحسب البانات القادمة من ال .من بانات modelفه تصمم إعتمادا على ما حتوي ال

3 )controller : ه الوحدة المنطقة الت تبن وتصل بن الباناتالمختلفة وطرقة العرض المناسبة لها، أي أنها المسؤولة عن الربط بن ال

View والModel ^_^ باإلضافة الى ذلك، فه الت تقوم بفصل ،وإجراء التؽرات الالزمة وؼرها modelوتقسم البانات القادمة من ال

..حسب احتاجها viewمن األمور، وتعطها لل

قدم فائدة كبرة لنا، فمن خالله أضا أمكننا أن نستخدم patternهذا ال ألشفرة البرمجة ف أكثر من مكان دون الحاجة الى إعادة بناء العجلة

^_^2nees.com( دورة مجانة)أنس حكمت أبو حمد

المقدمة

: Angularاآلن ممزات ال

.1AngularJS is a Single Page Application (SPA)

فهو الموقع أو التطبق الذي SPAوإن كنت ال تعرؾ ما هو ال

قوم بتحمل جمع المصادر الت حتاجها ف أول عملة تحمل

. للصفحة

من ممزاتها أضا أنها تحتاج الى عدد أقل من األسطر البرمجة 2.

أضا فالشفرة .. jQueryمقارنة مع الجافا سكربت أو ال

النك تسر على * ^_ cleanالبرمجة الخاصة بها تعد شفرة

النمط المحدد لبئة العمل هذه، ومكن استخدامها ف أماكن أخرى

.بما أن الشفرة البرمجة قللة وواضحة بشكل سهل


المقدمة

أصبح من السهل فهم أي تطبق فقط من angularبوجود ال 3.

المستخدم، وبالنسبة Controllerوال HTMLالنظر الى ال

فإن هذه المزة وبمعنى آخر تسمح لك angularلمطورن ال

الن المسمات والتصنفات واضحة من خاللها HTMLXبانشاء

أو انتظار ال html5دون حتى الحاجة الى اإلعتماد على ال

html6 ...

، لذلك لن جد المصمم pure htmlمع ال angularعمل ال 4.

. صعوبة ف تصمم وتطور هذه الصفحات

أو حتى ال jQuery UIنحن لسنا هنا بصدد التخل عن ال 5.

Bootstrap وإنما ال ،Angular ندمج كطرؾ ثالث قدم ما

^_^لده من خدمات لتم دمج هذه المكاتب والخصائص معا 2nees.com( دورة مجانة)أنس حكمت أبو حمد


لحظة تفكر

Angularأساسيات ال

^_^ Angularلنبدأ فعلا بعملة تحمل وشرح ال ..اآلن

: Angularتحمل ال

ومن ثم /https://angularjs.orgقم بالدخول الى الموقع الرسم

قم بالضؽط على تحمل، سكون ناتج التحمل هو ملؾ مسمى ب

angular.min.js ...

أردك أن تقوم باستخدام ال..عند تطبق األمثلة ..أضا إختصارا للوقت

bootstrap ومكنك ذلك من خالل الموقع

http://getbootstrap.com/ ..وسكون الملؾ المطلوب من.. bootstrap.min.cssالتحمل هو


https://angularjs.org/

http://getbootstrap.com/


سنقوم باستخدامه ف دورة ال templateاآلن سنقوم بعرض

Angular ..أضا وباإلضافة الى الملفات الت قمنا بتحملها، أردك أن

..كما ف الصورة app.jsو style.cssتقوم بانشاء



(تعرفات مبدئة لحن الوصول الى كل عنوان: )تعرفات مهمة قبل البدء

وجد عدة تعرفات مهمة جب علك ان تعرفها قبل الخوض أو البدء

: وه angularبشرح أي مفهوم بال

1 )Template : وقصد بها الHTML مع الخصائص

... المضافة

2 )Directives : وقصد بها عناصر الHTML مضافا الها

custom attributes and elements ...

3 )Model : وقصد بها البانات الت ستعرض للمستخدم من خالل ال

view الخاصة بها، بنائا على ما التفاعل بنها وبن المستخدم.

4 )Scope : وهو مكان حفظ الmodel والذي حدد النطاق الذي مكن

controllers, directives andالوصول اله من قبل كل من expressions 2( دورة مجانة)أنس حكمت أبو حمدnees.com


5 )Expressions : تسمح لك بالوصول الى المتؽرات والدوال ضمن

، وذلك عطنا القدرة على اضافة قم modelالنطاق الخاص بال

dynamic للhtml ..

6 )Filter : هذه تتح لنا التحكم بشكل القمة المراد طباعتها للمستخدم

..(. Format for Expressionsبمعنى آخر )

7 )View : وهو ما شاهده المستخدم(DOM.)

8 )Data Binding : هذا المصطلح شر الى عملة تبادل ف الوقت

modelوال viewبن كل من ال ( بشكل متزامن)الحقق

9 )Controller : قوم بالتحكم بالتطبق من خالل الربط المنطق بن

.. modelوال viewال



10 )Module : هو الحاوي ألجزاء عدة مختلفة من المشروع مثل

controllers, services, filters, directives...

ف المشروع ngتعن ال : مالحظة

Angular Directive (التفاصل الحقا. )اآلن لنبدأ على بركة هللا ف

..angularمثال بسط ف ال



: شرح المثال السابق

(1ng-app : نكتشؾ أن هذه ..حسب التعرفات الت طرحناها

directiveووظفة هذا ال .. Directiveالخاصة عبارة عن

وهذا مهم لتطبق أي .. angularه تعرؾ تطبق ال

Expressions وبدونه لن عمل، باإلضافة الى ذلك مكننا من ،

الرئس modulesاسناد قمة، هذه القمة تمثل اسم ال

..وسنتطرق لمثال على هذه الحقا بإذن هللا تعالى .. للمشروع

وهو أول .. Expressionsهذه تستخدم لتعرؾ ال .. {{}}2)

واآلن لنبدأ معا حز ..موضوع سنقوم بالحدث عنه بإذن هللا تعالى

..العمل الفعل


شاهد المثال

1.html

Expressions

من htmlقوم على مزامنة البانات من والى ال Angularإن ال

.. Angularولهذا فهو باألهمة بمكان لل ... Expressionsخالل

: Expressionsقواعد ال

{{ }}داخل ال Expressionsجب علك كتابة ال 1)

(2ng-bind تقوم بعملة مزامنة البانات أضا، ومكن استخدامهاExpressionsمثل ال

..Expressionsستم طباعة النتائج كما ه تماما ف ال 3)

Expressionsتشبه ال Angularف ال Expressionsال 4)ف الجافا سكربت من حث القدرة على احتواء أرقام وأحرؾ

( ..”anees” + “hikmat“)مثل ... والعملات المختلفة


Expressions

: 1مثال


Expressions

: 2مثال

.تستخدم إلعطاء قمة ابتدائة ng-init: مالحظة


Expressions

: 3مثال

مكنها من استدعاء القم من ال Angularف ال Expressionsال

objects ألننا ف أؼلب األوقات..وهذا أمر مهم ..أو من المصفوفات

objectsف الؽالب سكون إما JSONوال .. JSONسنتعامل مع

لذلك سنورد مثاال أضا على هذه.. أو مصفوفات أو خلط بنهما

^_^.. المالحظة المهمة



2.html


لحظة تفكر

Directives

فهذه تعن أو تدل -ngتسبق ب attributeتحدثنا فما سبق أن أي

وبما أن الفكرة أصبحت أوضح قلال اآلن، فإن هذه.. angularعلى

^_^.. directiveتخبرنا بالتحدد أن ما نراه هو -ngال

المختلفة والمهمة، وتحدثنا directiveبكل تأكد هناك العدد من ال

عن بعضها ف الشرائح السابقة، وسنضؾ الها أضا اآلن وف األمام

واآلن... بإذن هللا تعالى Directiveوبعد هذا الموضوع العدد من ال

هذا ال..ng-modelوهو ال .. directiveسنذكر إحدى أهم ال

directive قوم على عملdata bind (تزامن للبانات )مع عناصر

الخ.. inputوال text-areaوال input textالتحكم مثل ال


Directives

الحظ هنا كؾ تم أخذ القمة وتحدثها مباشرة من خالل ال : )1مثال

Directive والExpression ^_^


Directives

، ووظفتهng-repeatرائع وهو directiveهناك أضا : 2مثال

: شاهد المثال... ^_^ ه القام بعمل دوران

هنا المعلومات itemsمثل ال

..objectالمراد جلبها على شكل



3.html

Directives

: مالحظات مهمة

(1ng-init قلنا أنها تستخدم إلسناد القم اإلبتدائة للعناصر، لكن هذا

ال نكثر من استخدامه عادة، وإنم نستخدم ال Directiveال

controllers ( ف ؼالب األمر..)إلعطاء أو اسناد القم اإلبتدائة

مكنك اإلطالع علها ..األخرى directiveهناك العدد من ال 2)

وستم بإذن هللا تعالى ذكر عدد ال .. من المراجع الت أرفقتها سابقا

وتم ادراج هذا ...بأس به قدر اإلمكان بما نساب هذه الدورة

.. controllersوال moduleالموضوع كمقدمة لل

https://docs.angularjs.org/guide/directive


https://docs.angularjs.org/guide/directive

Modules ف الشرائح السابقة أضا، كما أكرر لك ذلك moduleتحدثنا عن ال

ألهمة الموضوع وبأسلوب آخر، إن أول ما تفكر به عن النظر لل

modules أنها طرقة تستخدم ف الangular لضم أو إحتواء

مجموعة مترابطة من الشفرات البرمجة موجودة تحت عنوان أو اسم

، ولذلك شاهد اآلخرن^_^ moduleواحد، هو اإلسم الخاص بال

^_^الشفرة البرمجة الخاصة بك بسهولة، وكون فهمها أسهل وأسرع

وه moduleوهناك جزئتان مهمتان حول ال

directivesوال servicesوال controllerأنه مكننا تعرؾ ال 1).. moduleلكل

الذي moduleأخرى تعتمد علها ال modulesمكننا أضا انشاء 2) module can also depend on other..قمنا ببنائه

modules as dependencies


Modules

لكن ألهمة الموضوع..أعتذر عن إطالة الكالم ف الشرحة السابقة

^_^وستجد أن هذا الكالم الكثر، ما هو الى أمر بسط جدا عند التنفذ..

؟ moduleواآلن كؾ تم تحمل أو اإلتصال بال

اإلسم الخاصوالفكرة ه ارسال .. ng-appكون ذلك من خالل ال

... directive ng-appالى ال moduleبال

.. moduleشاهد كؾ مكننا انشاء ..ولتصبح الصورة أوضح


هذه ما أطلقنا علها ال

Dependencies ف الشرحة

moduleهنا نضع ال ..السابقة

moduleاألخرى الت تعتمد على

...الذي ثمنا ببنائه

Modules

ستجد..الذي قلت بأنن سأستخدمه templateاذا عدت الى ال ..اآلن

بداخله moduleهذا الملؾ سنقوم بوضع ال .. app.jsهناك ملؾ

: على الشكل التال

ماذا بعد؟ ..واآلن

حتى storeاسمه moduleبوجود ng-appجب علنا أن نخبر ال

ستطع اإلتصال به ومناداته، وقلنا ذلك تم عن طرق استخدام ال

module ..شاهد المثال :ng-app="store"


Modules

وبهذا نكون انتهنا من شرح طرقة انشاء وبناء ال : )شكل الملؾ اآلن

module هل الحظت سهولة الموضوع ( داخل الصفحات^_^..

ألن اإلضافات ستبدأ من..المهم أن تقوم بالتطبق مع اآلن أوال بأول

* ^_...هنا



لحظة تفكر

Controller

لكن العجب ف..أضا controllerلقد أجزلنا ف الحدث عن ال

الموضوع، أنن لم أتحدث أو أتطرق الى أي مثال الى اآلن، وهذا

صحح، ألن كنت أنتظر اإلنتهاء من شرح طرقة تعرؾ ال

module واآلن^_^حتى تسنى لنا فهم الموضوع بشكله الصحح ،

ولذلك جب علنا....السابق، فستجد أنه فارغ moduleاذا الحظت ال

بإحدى أهم المكونات وهو..وسنمأله اآلن ..ملئه حتى نستفد من وجوده

*..^_ Controllerال

هو الذي جلب البانات من السرفر وؼرها Controllerفهذا ال

، وهو الذي حددviewومن ثم فصلها وستعرضها للمستخدم عن طرق ال

أي من البانات الت جب أن تظهر للمستخدم، كما أنه المسؤول عن أي

*..^_لتنفذ أي أمر viewتفاعل حصل بن بن المستخدم وال 2nees.com( دورة مجانة)أنس حكمت أبو حمد

Controller: Controllerلنقوم بانشاء ..واآلن

، والحظ أنن عرفته باستخدام الcontrollerالحظ سهولة تعرؾ ال

app وهذا الapp هو المتؽر الذي حفظ الobject الخاص بال

module ..،هذه الطرقة آراها أسهل وأرتب ف كتابة الشفرة البرمجة

* ^_ …()function)ولذلك أضا احتوت الجافا سكربت كود ب


Controller

،(store)واآلن سأقوم بتعرؾ منتج ستم عرضه ف المتجر

:شاهد المثال... الرائع controllerوسنشاهد اآلن، كؾ دور ال

من خالل ال controllerسنقوم بارجاع القم عن طرق ال )

function الذي جعلنا قمته الراجعة ه الproduct)


Controller

كؾ سنستطع الوصول الى القمة السابقة وعرضها من خالل..اآلن

: فشاهد الصورة التالة..اذا كنت مصرا على اإلجابة .. ؟ htmlال

(ال تنسى تطبق وكتابة ما تم عرضه بالصور لنبقى معا أثناء التنفذ)


Controller

: شرح الصورة السابقة

1 )StoreController هو اسم الController الذي قمنا بانشائه

... module storeداخل ال

2 )as store هنا قمنا بانشاءstore على أنه اسم مرادؾ لل

StoreController .. وبهذا مكنن التعامل مع اإلسمstore وكأنه

StoreController .. وهذا أسهل لتنفذ الشفرات البرمجة..

اال ضمن نطاق StoreControllerلن عمل ال : مالحظة مهمة

لذلك لو قمنا بوضع ال ..الخاص به divالبدائة والنهاة لل

{{store.product.cost}} كمثال خارج هذا الdiv ..فلن طبع شء

؟ moduleلكن ماذا لو أننا لم نضع أضا اسم ال ... ^_^2nees.com( دورة مجانة)أنس حكمت أبو حمد

Controller


Controller


^_^انتبه جدا للنتجة

Controller

لكن تطرقت..تأكد مكنك تجربة العدد من اإلحتماالت ..بكل

..^_^الحتماالت قد كثر الخطأ ف الوقوع بها

وتأكد من أنك تستطع تطبق وكتابة الشفرة البرمجة: )شاهد المثال

..( قبل اإلنتقال للمستوات الت تلها

... ^_^ وبعد ذلك انتقل للشرحة التالة لشرح نقطة خطرة



4.html

Controller

شاهد

هذه

المالحظة

:الخطرة

انتبه لطرقة تعرؾ

الرسائل داخل ال

Controller

^_^..

والحظ عدم

byeظهور ال


Controller

لماذا لم تظهر الرسالة السابقة؟

^_^لنعد تسلسل األحداث حتى نصل الى النتجة المطلوبة

لم ) module storeوتحتوي على اسم ال ng-appقمنا بوضع 1)

(تم اظهارها بالصفحة السابقة لؽاات استؽالل حجم الصفحة فقط

بعنوان controllerقمنا بانشاء 2)

aneesMessageControler ..

thisثم قمنا بوضع رسالتن، األولى عرفت من خالل استخدام ال 3)

local variableعلى أنها varواألخر من خالل استخدام ال

عن طرق ال htmlقمنا بجلب هذه القم من خالل ال 4)

controller لكن الlocal var لم طبع(..bye )


Controller

نصل لنتجة مهمة، وه أن ال ..من خالل التتبع السابق...اذن

Local variable أو الinner variable ال مكن الوصول الها

بالطرقة هذه، ولذلك، ولنستطع الوصول الى المتؽرات أو القم، جب

من var، وهنا ه تعمل عمل ال thisأن نستخدم الكلمة المحجوزة

حث المبدأ، أي أنها تقوم بتعرؾ متؽر، اال أنها تعط صالحة

^_^للوصول الها

: ^_^واآلن شاهد المثال عملا



5.html


لحظة تفكر

Controller

ماذا لو أردنا استرجاع القم من مصفوفة تحتوي مجموعة من.. اآلن

؟ objectsال

: ^_^طبعا، وبكل تأكد مكنك ذلك من خالل الشكل التال

(^_^قم بتنفذ الشفرة البرمجة وانظر النتائج قبل استكمالك للشرائح )


Controller

؟^_^ هل الحظت الشرحة السابقة والنتائج الخاصة بها

ما رأك بطرقة الحل تلك؟

بكل تأكد الحل السابق سعمل معك بشكل صحح، لكن هل من المنطق

أن أقوم بتكرار أو استدعاء القم من المصفوفة واحدة واحدة ؟

وهو Angularطبعا ال، وهنا ظهر أضا جمال آخر وجدد من ال

^_^وجود خاصة تسمح لك باستدعاء جمع القم عن طرق الدوران

directiveسأخبرك أنه علك استخدام ..^_^وإن سألتن كؾ ذلك

* ..^_ ng-repeatواحد وبسط وهو

^_^لنشاهد مثاال


Controller

”…“=ng-repeatالحظ هنا : مثال

.. اسم المتؽر الخاص بالقمة عند الدوران course Loopال

in aneesCourse.courses هذه تمثل اسم الAlias الخاص بال

controller باإلضافة الى اسم المتؽر الذي حتوي مجموعة

app.js (..this.courses... )القم ف ملؾ ال

( ng-repeatلكن باستخدام ال ..هذا نفس المثال السابق)



6.html

Controller

^_^ما رأك أن نقوم بإضافة زر لتحمل الدورات السابقة ..^_^..اآلن

.. P:لؽاات الشرح -*_-وهم –طبعا سكون الزر

اظهار زر التحمل للدورات المسموح ل..ما أرده أضا بالضبط هو

..أي أن الزر لن كون ظاهرا لعبض الدورات .. ^_^ بتحملها فقط

*_* ng-showكؾ هذا؟ والجواب هو *..^_والسؤال اآلن

: شاهد المثال


Controller

وبنفس..^_^ ng-hideف المقابل للخاصة السابقة، وجد لدنا

فهذا عن أنها trueتساوي ng-hideاألسلوب ف حالة كانت ال

قم بتطبقه لتصل: )واآلن لنستعرض مثاال سرعا..^_^ ستكون مخفة

(لنتجة


Controller

ما رأك اآلن أن تقوم باستخدام..اذا قمت بتطبق المثال السابق ..^_^

ng-repeatبعض المتؽرات الموجودة والت مكننا استخدامها مع ال ^_^...

$first و$middle و$last متؽرات نوعها 3هذهboolean،

جمع middleلتحدد اذا كان العنصر أول العناصر وال firstال

* _ف نهاة العناصر lastالعناصر بن البداة والنهاة وال

$index قوم على ارجاع موقع القمة...

$even و$odd تقوم على فحص هل العنصر فردي أم زوج..

..^_^تخل مقدار الفائدة المتحققة

^^أنه ال حقق الشرط falseتعن حقق الشرط و trueبكل تأكد أن


Controller

( قم بتطبقه ثم شاهد المثال: )مثال



7.html

Controller

هناك أضا حركة جملة مكننا من التعامل معها واستخدامها من..اآلن

وتكمن هذه الخاصة ف امكانة تكرار عناصر ال.. repeatخالل ال

html أثناء الدوران..

وال ”“=ng-repeat-startوكون هذا باستخدام ال

ng-repeat-end ...


Controller

، هناك فكرة رائعة ما رأك أن نقوم بتطبقها معا؟ ^_^ماذا بعد ...ممم

... eventوهذا مثل .. ng-clickاسمه directiveهناك

^_^ eventلنشاهد مثاال على هذا ال ..اآلن

..^_^ هل الحظت سهولة الفكرة

لكن ماذا لو أردنا ارسال أو.. ng-clickلكن هذا التنفذ المباشر لل

كما كنا نتعامل مع المتؽرات ؟ app.jsاستقبال قم من خالل ال


Controller

:شاهد الصورة التالة.. ولإلجابة على السؤال السابق

وذلك ألجل thisقمنا باستخدام ال .. functionلك نأخذ القمة من

..وبهذا أستطع الوصول للقم وارسالها واستقبالها ..^_^ scopeال

واآلن لنشاهد المثال

بشكل عمل وانتبه

: ^_^لكل جزئة



8.html


لحظة تفكر

Filters

؟ AngularJS Filtersما هو ال ..^_^..السؤال البده

بكل بساطة ه مزة تستخدم لمعالجة البانات أو شكل البانات لتم

عرضها للمستخدم بشكل سهل القرائة والفهم، وتم تطبق هذه ال

Filters داخل الExpressions أو داخل الservices orcontroller ...وعادة ما تكون ه المرحلة النهائة لشكل البانات

ومن األمثلة علها الفلتر الخاص بصؽة الوقت أو..الناتجة للمستخدم

الخ..العملة

أضا من مزاا الفلتر أنه وفر علنا تخزن البانات بأشكال متعددة، فلو

فإنه كف أن نضع الفلتر داخل ال.. dynamicكان لدنا محتوى

view وهذا جعل أمر تعدل..وستم عرض البانات هذه كما تم بالفلتر

*..^_..شكل البانات أسهل اضا


Filters

الموجودة أو المبنة أصال ف Filtersمكننا استخدام أحد ال : مالحظة

^_^ الخاص بك Filterأو مكنك بناء ال AngularJSال

: الموجودة ه Filtersال

1 )Currency : أي )قوم هذا الفلتر على جعل الرقم على شكل عملة

وكون الرمز الخاص ( 1,234.56$كأننا نتعامل مع العملة مثل

الحالة )بالعملة هو الرمز الخاص باللؽة المستخدمة محلا

( ...اإلفتراضة

واآلن لنشاهد مثاال على هذا الفلتر


Filters

:الصؽة العامة

..(اختاري fractionSizeاختاري وال symbolال : )شاهد المثال


Filters

2 )number :قوم هذا الفلتر على جعل النص الرقم بصؽة رقم

حتوي فواصل تفصل بن الفئات، كما مكن تحدد عدد الخانات

ستم ارجاع ..واذا لم تكن القمة المسندة للفلتر رقما ..الخاصة باألعشار

Empty (وستصبح المخرجات فارؼة..أي ال شء .. )وإذا استخدمنا

فستم ارجاع اإلشارة الخاصة Infinity–أو Infinityكلمة

..بالماالنهاة

: الصؽة العامة


Filters

:شاهد المثال

الى ف حال قمت localفإنها لن تعمل على ال ..بخصوص الماالنهاة

من هنا مكنك اإلطالع على المزد ..ببعض التؽرات

...من هناأو مكنك رؤة المثال وتطبقه مباشرة


https://github.com/angular/angular.js/issues/10421

https://docs.angularjs.org/api/ng/filter/number

Filters

3 )uppercase & lowercase : ^_^ أسهل فلتر هههه قوم هذا

أو الى uppercaseالفلتر على تؽر حالة األحرؾ إما الى

lowercase ..._^ *



Filters

: مثال


Filters

4 )date : نستخدم هذا الفلتر لتؽر الشكل الخاص..سهلة أضا

: والصؽة العامة له ه.. بالتارخ

ف حال عدم تحدد شكل mediumDateالحالة اإلفتراضة ه

..التارخ المراد

Date ،تمثل نص أو رقم عبر عن أجزاء الثانة أو عن تارخ معن

أو ISOبمعنى آخر، إما أن عتمد أحد األنظمة الخاصة بالوقت مثل ال

..تم وضع التارخ المراد بنائا على عدد أجزاء الثوان


Filters

:مثال

.. من هنامكنك مشاهدة صػ الوقت المختلفة


https://docs.angularjs.org/api/ng/filter/date


لحظة تفكر

Filters

5 )orderBy : تستخدم هذه المزة لترتب قم مصفوفة معنة إن كانت

كون الترتب النص ..هذه المصفوفة ذات قم نصة أو رقمة

: والصؽة العامة ه* ^_..أبجدا

ه مزة اختارة تسمح لنا من من اعادة الترتب بشكل reverseال

– Aعكس، عن ترتب من Z عكس صبح منZ 0 A ..والقمة

( .. true or false)الخاصة به منطقة عن


Filters

: 1مثال


Filters 2مثال:


Filters

لكن.. orderByبهذا نكون انتهنا بإذن هللا تعالى من شرح ال

وه أنن عندما ذكرت األمثلة..كمالحظة مهمة وأظنك الحظتها

والصػ العامة الت سبقت لم أستخدم السكربت ولم أتطرق اله والسبب

ف ذلك عود الى محاولة تبسط األمر حتى اإلنتهاء من فهم ال

angular وحن اإلنتهاء بإذن هللا تعالى من آخر جزئة.. كؾ عمل

سنقوم بطرح مثال وضح طرقة بناء واستخدام فلتر من خالل..بالفلتر

scope$وال filter$وستم شرح مفهوم مهم مثل ال ..الجافا سكربتوإن استطعت...دعنا نحاول المسر كما ذكرنا ..لذلك.. وؼرها ..

فبعد فهم الصؽة العامة..تعلمها أو تطبقها لوحدك فهذا ممتاز جدا

فترض أنك تستطع القام بذلك من خالل)Angualeوكؾ عمل ال

..(^_^الصؽة العامة الخاصة بالسكربت


Filters

6 )limitTo :تقوم هذه المزة على انشاء نص أو مصفوفة جددة

تحتوي عدد العناصر الذي تم تحدده لإلقتطاع أو كأكبر( نسخة فقط)

ومكن البدء بتحدد مكان البدء..عدد ممكن سمح لنا بالحصول عله

أو من نهاة( موجب) -أو النص –بالعد حتى تم النسخ من بداة المصوفة

ولسهل شرح الكالم( ... اذا كانت القمة سالبة) -أو النص –المصفوفة

: الحظ الصؽة العامة..

Limit :و ( عدد..)الحد األعلى للعناصرbegin :مزة اختارة قمتها

القمة السالبة هنا تعن ابدأ من مهاة النص أو المصوفة 0اإلفتراضة 2nees.com( دورة مجانة)أنس حكمت أبو حمد

Filters

: 1مثال


Filters

: 2مثال


Filters

7 )json :سمح لنا هذا الفلتر من القام بتحول متؽر الجافا سكربت

وقد تتسائل اآلن،.. ^_^.. JSON stringالى objectمن نوع

!لماذا مكن أن أحتاج الى هذا التحول أصال ؟

وه أننا نستخدم هذا..^_^وإجابته سهلة ..وهو سؤال منطق جدا

فحص القم وتصححها ف حالة) debuggingاألسلوب ؼالبا لعمل

..^_^( وجود أي مشكلة



Filters

: مثال



لحظة تفكر

Filters

8 )filter : وجد بالFilters فلتر اسمهfilter ^_^وقوم هذا ،

الفلتر على اقتطاع جزء من المصفوفة وارجاعه على أنه مصفوفة

ضمن aneesمثل البحث عن اسم ..جددة بنائا على ما تمت تصفته

الخ، ف حال كتابة.. taher, anees, anas, saddamقائمة من

an .. سظهر لنا مصفوفة جددة تحتويanees وanas .. الخ



Filters

: شرح الصؽة العامة

الت string, object, functionهو ال expressionقصد بال

...مكن استخدامها إلختار العناصر من المصفوفة

فقصد بها المقارنة الت تم من خاللها فحص comparatorأما ال

..التطابق الكامل بن العنصر ف المصفوفة والقمة المراد البحث عنها

أو false|undefinedأو trueوه إما أن تكون

function(actual, expected) ... بحث قوم هذا الfunction

مباشرة trueوف حال استخدمنا ال..ف حالة التطابق trueبإرجاع

,function(actualفإنها اختصار ل expected) { return angular.equals(actual, expected)}


Filters

: 1مثال


Filters

2nees.com( دورة مجانة)أنس حكمت أبو حمد : 2مثال

(جب أن تطابق اإلسم..)ال وجد نتائج

(ألهمة الشرح..)الشفرة البرمجة ف الشرحة التالة

Filters

على حدى للقام بعملة البحث objectالحظ أنه مكنن أن أستخدم كل

، كما أنن مكنن تحدد جمع العناصر ألحد مربعات البحث من^_^

: شاهد الشفرة البرمجة للمثال السابق...$خالل استخدام ال


Filters

لكن.. Filterإنتهنا من موضوع ال ..نكون بإذن هللا تعالى ..اآلن

وه استخدام ال..بقى علنا التنوه الى جزئة قمنا بتأجلها سابقا

filter أو حتى انشاء .. من خالل الجافا سكربتcustom filter من

وهذا ما سنتطرق اله بإذن هللا تعالى، وكما ان..خالل الجافا سكربت

هناك صؽة عامة.. htmlهناك صؽة عامة تعلمنا استخدامها داخل ال

وبكل تأكد لن أشرح عنها الى مثال واحد، ألن هذه..للجافا سكربت

، واإلختالؾ أننا استخدمنا الجافا سكربت^_^الفكرة تشابه ما تعلمناه

* ...^_للقام بالعملة

وتوقؾ على..استعرض جمع األمثلة ..قبل اإلنتقال الى الشرحة التالة

: والشفرة البرجة كذلك..فكل جزئة تمثل فكرة ..كل جزئة منها

2nees.com( دورة مجانة)أنس حكمت أبو حمد شاهد المثال

9.html

Filters

الخارات اإلختارة تبقى اختارة،:) استخدام الفلتر من الجافا سكربت

كمثال شاهد الصؽة( ^_^كما شرحنا سابقا ..تبقى كذلك..واإللزامة

من هنا العامة للجافا سكربت


https://docs.angularjs.org/api/ng/filter/date

Filters

^_^ custom filterآخر جزئة بإذن هللا تعالى وه انشاء ..واآلن

angularخاص بنا، هناك دالة ف ال filterلك نتمكن من إنشاء

، ومكننا استخدامها ف كل^_^ ()filter.تمكننا من ذلك وه

module نقوم بإنشائه داخل الangular ...

: اآلن أنظر الى الشكل التال


Filters..لنأخذ مثاال عملا، ولنقم بانشاء فلتر بسط قوم بتربع أي رقم..واآلن

* ^_.. custom filterاسم الدالة الخاصة بانشاء filterال

اسم الفلتر، وهذا الفلتر سنجعله ربع makeSquareNumberال

*... ^_الرقم

ال آخذ بعن اإلعتبار ف األمثلة حاالت الخطأ الممكنة، مثل ادخال: مالحظة

ألن هذه األمور جب أن تعرفها بالجافا سكربت.. نص بدل رقم وؼرها

... angularولس بدورة ال


Filters

: مالحظات على المثال السابق

فلتر مكنك globalك makeSquareNumberتم انشاء 1)

appاستخدامه، وال مكن استخدام هذا الفلتر اال من خالل ال

*_..*مودول

واحد، ولس objectستم ف هذا المثال معالجة األرقام الت تمثل 2)

..مصفوفات وؼرها

والحظ كؾ أنن أستخدم ال : )واآلن هنا طرقة استخدام المثال السابق

filter مع العنصر كobject داخل جملة الدوران )..


Filters

نفسها repeatسنقوم اآلن بانشاء مثال لفلتر سعمل مع ال : 2مثال

هذا المثال سقوم على فلترة عناصر المصفوفة... objectبدال من ال

تكملة المثال ف..) ”a“الت تبدأ األحرؾ الخاصة بها بالحرؾ

( الشرحة التالة


Filters

إن الفكرة من المثال السابق لست بجددة، ففعلا ما قمنا به هو..حققة

عملة دوران ألخذ عناصر المصفوفة واجراء شرط، هذا الشرط هو

الفلتر، والناتج الخاص به حفظ داخل مصفوفة أخرى، تمثل النتائج الت

^_^..وبهذا، ستقبل هذا الفلتر المصفوفة كاملة ..ستعرض



لحظة تفكر

Filters

^_^ ماذا ؟ ..واآلن

؟ ..الم تبادر لذهنك سؤال معن

كؾ مكنن استخدام متؽرات مع الفلتر، مثال،..الم در ف ذهنك

أي 4:ثم jsonكنا نضع كلمة .. JSON filterعندما تحدثنا عن ال

كؾ مكنن اآلن مثال اضافة متؽر..فراؼات 4اجعل المسافة بمقدار

4أو 3أو 2قوة ..مثل هذا لمثال الرقم، بحث أحدد مقدار التضاعؾ

الخ، وكؾ مكنن أضا بنفس الطرقة وف المثال الثان، أن أحدد..

الخ .. ”c“أو ”b“مثل ..الحرؾ الذي سأقوم بالفلترة بنائا عله

ورائع، بحث عطك قدرة كبرة على التحكم..هذا األمر بسط جدا

: لنشاهد مثاال اآلن..^_^..بالفلتر الخاص بك


: المثال


Filters

Filters

أنن استقبلت القم الت تم ارسالها من خالل..الحظ ف المثال السابق

الفلتر، وبعد ذلك جعلت أحد الخارات الزاما وهو القوة المرفوعة

فأنا أنه الفلتر بهذه القمة لعدم إنطباق 1للرقم، وبإرجاع للرقم

كما ترد مكنك التحكم..الشروط، ومكنن أضا عرض رسالة خطأ

..قمت بجعل حقل الرسالة اختاري..بنما الخار الثان .. بذلك

* ^_الحظ كؾ أمكننا التعامل بكل سهولة مع الخصائص

* .._*أضا repeatلنستخدم هذه الفكرة مع ال .. واآلن

: لنشاهد المثال الثان


Filters

: 2مثال


Filters

،Filtersبهذا نكون إنتهنا بإذن هللا تعالى من حدثنا المتواضع عن ال

..وكل رجائا بك أنك التزمت بتطبق جمع األمثلة السابقة

اآلن لمشاهدة جمع األمثلة الت تم ذكرها والعمل بشكل عمل، مكنك

رجى امعان النظر بالنتائج والشفرة البرمجة وال... النقر هنا

console ..



10.html

ng-src Directive هل خطر.. P:اآلن ف فقرة سهلة وسرعة وكفاصل بن الدروس

؟.للصورة pathتحدد ال angularببالك كؾ مكننا باستخدام ال

:ما رأك أن نجرب أو نرى هذه الطرقة..حسنا

..بعد تجربتك لها

انظر للخطأ وخمن

لماذا هذا الخطأ ؟

بعدها انتقل للشرحة

^_^التالة


ng-src Directive

،*_*consoleطبعا لن تظهر الصورة، وسظهر خطأ لدك ف ال

لماذا ؟

بكل بساطة وبالنهاة ال تنسى أننا نتعامل مع سكربت، وهنا سحاول

لهذا جب.. Exeprissionالمتصفح تحمل الصورة قبل تنفذ ال

وكون الحل..^_^علنا أن نجدث حال أو طرقا أخرى لهذه المشكلة

فهذه ستسمح لنا من بتحدد الصورة المطلوبة.. ng-srcمن خالل

..^_^.. resourceوجلبها، وه فعال عملة

: واآلن لنذهب لمشاهدة المثال


ng-src Directive

: مثال



11.html


لحظة تفكر

^_^ angularمن خالل ال tabsإنشاء

ولنشاهد تطبقا عملا... directiveلنتحدث عن المزد من ال ..اآلن

طبعا ال ننسى أننا.. )للتنقل بن المحتوى tabsجمال، وهو إنشاء

..(كما ذكرنا أول الدورة اختصارا للوقت bootstrapنستخدم

وهو بسط.. angularطبعا هذا تطبق عمل وتفاعل باستخدام ال

* ^_قبل اإلنتقال الى الموضوع التال ..وسشرح فكرة مهمة جدا

: شاهد المثال..” ^_^ حبة حبة ” لذلك إنتبه وسر مع



سقوم..عند النقر على أحد الروابط الموجودة .. المثال السابق بسط جدا

وستشاهدها مطبوعة أسفل الحاوي الخاص بال tabبتؽر قمة ال

Tab ..شاهد النتجة :

عند النقر 2ه tabاذا عدت للصورة السابقة ستالحظ أن قمة ال

قام بعمل تحدث Expristionوفعلا ما حصل هو أن ال ..^_^علها

(updated )للقمة الخاصة به مباشرة عند النقر باستخدام ال

Ng-click ... لنستبدل الرقم ولنعرض المحتوى الخاص بكل..واآلن

tab ... ثم انتقل للشرحة التالة ..لكن كؾ تم ذلك ؟ تذكر ؟ حاول*_*2nees.com( دورة مجانة)أنس حكمت أبو حمد


..!!الت ذكرناها سابقا ng-showسنقوم باستخدام ال ..اآلن

عند النقر tabبكل بساطة من خالل أخذ القمة من ال ! ..كؾ ذلك؟

: شاهد المثال...^_^.. ng-showومقارنتها داخل ال

الحظ أننا قمنا بعرض

tabالمحتوى بنائا على ال



هل الحظتها ؟..^_^لكن هناك مشكلة ف التطبق السابق

اال عند قمنا tabالمشكلة ه أنه لم تم عرض أي محتوى ل

وهذه مشكلة تحل بكل بساطة من خالل تحدد قمة ابتدائة لل..بالنقر

tab باستخدام ^^^__^^^ng-init ...الحظ المثال :



*^_..ما رأك أن نعط المثال نوعا من التفاعلة مع المستخدم ..واآلن

الس..^_^الت قام باختارها tabلل activeمثل اضافة الكالس

: شاهد المثال.. ^_^من المنطق القام بذلك

(ng-class ) هوdirective ستخدم إلضافة كالس من خالل ال

angular _^*


^_^ angularمن خالل ال tabsإنشاء ما رأك ف التسلسل السابق ؟ ..^_^اآلن

وهو سهل وواضح، طبعا لس ألن أنا من..أعتقد أن المثال إكتمل

P:تبسط علنا المهام angularبل ألن ال ..كتبت المثال هل عجبك الشكل السابق؟ ... اآلن ما أرؼب بسؤال عنه

وهل تشعر بوجود خطأ منطق ف طرقة العمل هذه ؟

؟ ”Clean“وهل تشعر بأن الشفرة البرمجة نظفة

طبعا جب أن تكون إجابتك ب ال أو ربما ثم نعم أو ربما ثم ال أو ربما

وإنما ه تخل منطق للشفرة ..” حزرة ” طبعا ه لست ... ^_^

لكننا بذات الوقت إعتمدنا إعتمادا كلا..فالشكل السابق قد كون بسطا

!؟ controllerأن ال ..وهذا سبب لنا خطأ منطق .. htmlعلى ال

ستوجب عله تكرار htmlوبما أنه ! .. cleanوبهذا لن تعتبر الشفرة البرمجة

وأنفذ العملة من controllerلماذا ال أستخدم ال .. htmlهذه العملة ف كل

&_&هذا هو ما جب أن سأل أو جاب عله ^_^ .. htmlخالله ف كل صفحة



ولتحول الصؽة الى صؽة مثالة أو صؽة أفضل اتبع الخطوات

: التالة

1)



ف هذه الخطوة، سكون المطلوب منا بكل بساطة هو انشاء متؽر ( 2

الت قمنا بالنقر tabمن خالله مكننا الوصول وتعدل قمة ال

هو من تؽرت قمته بنائا tab3علها، لذلك تالحظ أن المتؽر

^_^ .. htmlالت تم استقبالها من ال setTabعلى


^_^ angularمن خالل ال tabsإنشاء الحظ هنا، فعلا عند ( 3

التحقق من أي عملة فإننا

نرجع قمة

0أو 1

صح أو خطأ

وبنائا علها كون

وهنا..الناتج المنطق

ستم التحقق ..كذلك

هل ما تم النقر عله

اذا..ساوي الحالة

activeأضؾ ال ..نعموأظهر المحتوى المطلوب



: واآلن شاهد الشكل الكامل للمثال



12.html


لحظة تفكر

FORMSالتعامل مع ال

مهم Directiveوللبدء بهذه الجزئة المهمة، علنا أن نستذكر ..واآلن

لكن اآلن..، وبكل تأكد تحدثنا عنه سابقا ng-modelجدا، وهو ال

، ونشاهد كؾ مكننا استخدامه مع ال^_^سنزدكم من الشعر بتا

Controller وأهمة دوره مع ال ،Forms _^... *

، ووظفتها القام بعملmodel-ngتحدثنا سابقا عن ال : تذكر•

data-bind مع عناصر التحكم..

واآلن لنشاهد مثاال سرعا، على طرقة التفاعل أو استخدام ال

Ng-model مع الController .._^*



ال شء جدد سوى أنن استخدمت ال ..اآلن أنظر الى المثال : مثال

Alias name الخاص بالcontrollar داخل الng-model قبل

.. formCtrl0.powerNumberفأصبح اإلسم ..إطالق التسمة

P:قبل اإلنتقال للشرحة التالة ( مهم)اآلن طبق المثال



{formCtrl.powerNumber}}ستالحظ أمرا، وهو أن ال ..اآلن

! ستظهر أثناء تحمل الصفحة، ثم تختف وتعوض القمة الفعلة مكانها

عموما ف نهاة jsأو angular jsوالسبب ف هذا هو وضع ال

وبهذا فإنه لن تم تحمل هذا الملؾ.. bodyالصفحة أو قبل إؼالق ال

السابق Expressionلذلك سظهر ال ..اال بعد تنفذ ما قبله من أوامر

jsمكنك أن تقوم بوضع ملفات ال ..ولحل هذه المسألة ..ومن ثم ختف

* ..^_ ng-clockأو مكنك استخدام ال .. headerف ال

displayوبالتحدد !! cssه ng-clockوبكل بساطة فكرة ال

لكن مع وجود تفاعل طبعا أو عملات من خالل ال..^_^ noneبقمة

angular .. هو طرقة استخدامه، شاهد مثاال..لكن ما همك أنت:_^*




بعد تحمل الصفحةقبل تحمل الصفحة


..^_^ بشكل فعل Formsلنبدأ بال ..^_^ واآلن

، والتng-submitأول فكرة وأهمها ف ..شاهد هذا المثال البسط

والحظ انن قمت..لمحتوات هذا الفورم submitمن خاللها تم عمل

ng-modelبإجراء العملة الت أرؼب بها، والحظ كؾ بدأ ظهر دور ال 2nees.com( دورة مجانة)أنس حكمت أبو حمد


!هنا ؟ ng-clickلماذا لم نستخدم ال ..سخطر ببالنا سؤال ..واآلن

ال وجد فرق عما تعلمناه سابقا وقمنا به.. الس من الممكن استخدامها ؟

؟ ng-clickمن خالل ال

لكن سأشرح لك اآلن بعض..^_^ جمع ما قلته صحح ا صدق

والت تمثل ng-submitالنقاط المهمة الت توضح لماذا استخدمت ال

^_^ ng-submitوال ng-clickفروقات بن ال

تحددا، بنما form elementمع ال ng-submitنستخدم ال ( 1

والسبب ف ذلك أن ال ..مع أي عنصر آخر ng-clickنستخدم ال

submit كون لجمع محتوات الform(.. القاعدة تقول

Form is Submitted, Not Button ..^_^ )



clickمن خالل ال ng-submitالخاص بال triggerنطلق ال ( 2

اذا ng-clickبنما ال ..فوق أي عنصر enterأو من خالل ال

فلن نطلق الحدث الى عند النقر على ال buttonتم وضعها لل

btn ..

:لننتقل الى جزئة مهمة وه..واآلن

Form Validation and States

وهنا سنتحدث عن األخطاء الممكن حدوثها، وكفة التحكم والتحقق

..^_^ angularوؼرها من العملات باستخدام ال


FORMSالتعامل مع ال ^_^:شاهد هذه الشفرة البرمجة، وانتبه لكل خاصة ونقطة بها..واآلن

أوال قمنا بإطفاء التحقق اإلعتادي بالفورم من خالل استخدام..الحظ هنا

.. HTML5والموجودة ف ال novalidateال

كمثال على خاصة سنتحقق من requiredبعد ذلك قمنا باستخدام ال

..تحققها ف الحقول الموجودة

وهذا المتؽر مهم، فهو valid$ثم . وبعد ذلك استخدمنا اسم الفورم ثم

>--..المسؤول عن ارجاع النتجة النهائة الخاصة بالتحقق للفورم


FORMSالتعامل مع ال ^_^: شاهد تنفذ الشفرة البرمجة السابقة..واآلن

قم بتنفذ المثال للضرورة

حتى تتابع معنا التؽرات

...^_^أوال بأول



تظهر مباشرة إما valid$فإن النتجة الخاصة بال ..اذا الحظت ..اآلن

false وإماture والسؤال..حسب المعطات الت تم التعامل معها

كؾ مكنن استخدام هذه القمة لمنع عملة ال..؟ -__-اآلن

submitting الخاصة بالفورم ؟

: بالشكل التال...^_^كون ذلك بوضعها كشرط

* ^_لنذهب سوا لمشاهدة مثاال عملا على هذه الجزئة ..واآلن



: مثال



لحظة تفكر


الت تتؽر ف الحقول classالى جزئة مهمة وه ال * ..^_واآلن

، وتكمن أهمتها ف^_^أثناء عملة التفاعل بن المستخدم والحقل

والحقول الت تم التحقق منها..تمز الحقول الت حصل بها الخطأ

كل ما علك معرفته هو*..^_..وعمل هذا أمر سهل جدا ..بنجاح

ومن ثم.. الكالس الت تم تؽرها لحظة التفاعل والحالة المطلوبة

..^_^ cssتحدد اللون عن طرق ال

..لنشاهد معا مجموعة الكالس الت مكننا التعامل معها..واآلن

لذلك تسمى .. inputالكالس الت نتحدث عنها تتعلق بعملات ال )

input class.. )



: الت سنتحدث عنها ه Input Classال



: مثال


FORMSالتعامل مع ال : مالحظة

بهذه الجزئة وبما تم شرحه الى اآلن، مكنك المتابعة والبحث عن

المختلفة والبحث angular dirالمزد من الخصائص، واستخدام ال

مثل التعامل مع ال patternمثل ال .. ng-minlengthعنها مثل

Checkbox والradio والselectBox ..األمور سهلة جدا وال

..وجد اختالؾ سوى أنك ستقرأ قلال

falseأو trueسترجع angularمن خالل ال checkboxمثال ال ومكننا أضا إسناد قم..ctrl.user.agreeبنائا على الشكل التال

: وذلك من خالل الشكل التال C++ ..:Pأو Angularأخرى مثل

ng-model="ctrl.user.agree”

ng-true-value=" Angular"ng-false-value=" C++” .... واآلن لنشاهد ما تم ذكره من أمثلة^_^

شاهد المثال2nees.com( دورة مجانة)أنس حكمت أبو حمد

13.html

ng-include والCustom Directive

!! ng-includeوهو ال ^_^ الى موضوع جدد ..واآلن

هل جاء ف خاطرك وما أن تتطلع الى استخدام نفس الشفرة الخاصة

ف أكثر من صفحة دون تكرارها ؟ HTMLبال

اذا كانت اإلجابة نعم، فمكنك صنع ذلك اآلن دون الحاجة الى استخدام

الخ .. PHP, ASPمثل Server Sideلؽة

^_^كؾ ذلك ؟

والموجودة داخل ال ng-includeبكل بساطة من خالل

AngularJS _^ *



:لنعد قلال لمشاهدة مثال ذكرناه سابقا..واآلن

شاهد كؾ سأقوم بتضمن هذه الشفرة البرمجة واستدعائها..واآلن

الت Expressions، والحظ أننا سنأخذها مع ال ^_^عند الحاجة

(تابع مع أوال بأول هنا.)^_^قمة الروعة *..^_تم استخدامها



، وبداخلها تم وضع‟„ف طرقة التمضن السابقة نالحظ أهمة وجود

واآلن لنشاهد شكل الصفحة الت..^_^الصفحة الت جب تضمنها

* ^_..سنقوم بتضمنها

وهذا هو الشكل الخاص بالصفحة الت سنقوم باستخدام التضمن بها

(14.html ... )



واآلن لنعد ترتب أوراقنا ونشاهد المثال كامال، ومن ثم سنقوم بتنفذه

_^ *

P:مهما كانت النتجة ..ومن ثم انتقل للشرحة التالة –قم بتنفذ المثال ..اآلن 2nees.com( دورة مجانة)أنس حكمت أبو حمد


:وهو..^_^عند تطبقنا للمثال السابق، سقوم بإعطائنا خطأ جمل

طبعا الحل والمشكلة بسطة..)سأقوم اآلن بالبحث عن المشكلة بجوجل

لكن خطر ببال التطرق لمحاولة حل المشاكل الت..ومن البدهات

..( لترسخ هذا المفهوم ..نتعرض لها من خالل البحث


ng-includeالحظ حتى أنن لم أحدد

فقط بحث ..المعلومات الكافة

نسخ ولصق وكانت ..سرع

النتجة أن وجدت الحل من

وحتى من ..الرابط األول

P:..الرابط الرابع

هل عرفت أن

المشكلة؟

نعم ا صدق، إنها

باستخدام المتصفح

التقلدي إلستعراض

والحل ..هذه الصفحة

كون هو تشغل

الصفحة من خالل

السرفر مثل أباتش



ما لدي هو سرفر أباتش)لنقوم بتطبق المثال على السرفر ..واآلن

وبكل تأكد لن همن نوع بئة التطور الت( wampف بئة تطور

P:المهم هو وجوده ..تعمل علها أو نوع السرفر



لحظة تفكر


واآلن( ng-includeال ) اآلن نكون انتهنا من هذه الجزئة ..^_^

ولنبدأ بها..^_^ Custom Directiveالى الجزئة األخرى وه ال

^_^على بركة هللا

الذي سنقوم ببنائه، شابه فكرة العمل Custom Directiveال

ومنها سنتعلم إنشائه، ومنها سنشاهد لماذا.. ng-includeالخاصة بال

..^_^وجد خار مثل هذا، وما ه أهمته

Customوالسؤال األول واألهم اآلن، لماذا جب أن أقوم بإنشاء Directive لقوم بنفس هذه الوظفة ؟



وجوابه بدأ من نقطة مهمة وه أن ال ..وهذا السؤال منطق جدا

Directive مكننا من كتابة شفرةHTML من تصمم وصؽة

:مثال شاهد الشفرة التالة..^_^ السلوك الخاص بها من خالل التطبق

!! ماذا بعد !! اذن

: إنتقل للشرحة التالة



وهذا عن

والت Attributeأو Custom Tagأننا مكننا إنشاء واستخدام 1)

وراثتها من أجل ... )مكن استخدامها أو تعدلها والعمل علها

(التطبق

واستعماله من خالل هذا Controller Logicمكننا تضمن ال 2)

.البناء اذا أردنا ذلك

المعقدة UIمكن أن تم استخدامه لبناء 3)

مكنن من إستخدام بعض المكونات أو األوامر المجودة سلفا أو 4)

..الت تم استخدامها


ng-include والCustom Directive؟ قبل شرح اآللة لذلك Custom Directiveواآلن كؾ مكننا بناء

توجب علنا شرح المكونات الت مكننا استخدامها هنا، ومع أننس..

اال..سنكتف بصورة مبسطة ومختصرة عن الموضوع لوضوح الفكرة

* ^_أنه من األهمة بمكان شرح مثل هذهالخصائص



: Custom Directiveمثال على إنشاء


.ملف الجافا سكربت مهم جدا هنا

include.html-14صفحة ال

ه ذات الصفحة ف المثال السابق


( Run on Server)واآلن لنقوم بتطبق المثال ولنشاهد النتائج



ف المثال السابق قمنا باستخدام : مالحظة

<course-title></course-title>

course-title/> (..Self Closing Tag)>ولم نقم باستخدام

XHTMLفمثال ه تقرأ من خالل ال ..لست مدعومة ف كل مكان

لكن ف ال.. <course-title></course-title>بشكلها

HTML5 تقرأ على<course-title> ^^.... لذلك وجب التنبه..

..^_^ لنكمل سلسلة األمثلة بإذن هللا تعالى ..واآلن

E، وف مثالنا السابق استخدمنا الحرؾ restrictطبعا تحدثنا عن ال

*^_ Aواآلن ما رأك بمشاهدة ال .. Elementوالذي رمزنا به الى



مكن أن كون Directiveكما شرحنا ف الشرائح السابقة، فإن ال

Element ومكن أن كونAttribute(..تذكر من هنا ) الخ

*_* Attributeعلى أنه Directiveواآلن لنشاهد كؾ مكننا بناء


HTML

App.jsناتج التطبق


Directiveهنا سننه حدثنا بإذن هللا تعالى عن موضوع ال ..واآلن

، وسننتقل الى موضوع جدد وشق بإذن هللا تعالىng-includeوال

..لكن وقبل ذلك، علك القام بتطبق األمثلة الت تم ذكرها

وبعد ذلك مكنك مشاهدة جمع األمثلة الت تم ذكرها ف هذا الموضوع

، تتبع الشفرة البرمجة بانتباه، الموضوع سهل جدا، كما^_^من هنا

، وقد شرحنا ذلك فserverأنوه الى أهمة تطبق هذه األمثلة على ال

الملفات المطلوب نسخها للسفر لعمل المثال..)بداة هذا الموضوع

,js folder, css folder, 14.html: ه

14-include.html, 1.png, 2.png) ^_^لصبح الشكل

: كما ف الشرحة التالة




HTMLشاهد المثال ك

14.html


لحظة تفكر

$http

Angularالخاص بال Coreموجودة بال Serviceه http$ال

.^_^وتستخدم لجلب البانات من خالل السرفر

واآلن كؾ تم جلب البانات؟

الت مكننا استخدامها، ولكن Methodsطبعا هناك أكثر من نوع لل

^_^ GET^_^ الطرقة التقلدة والسهلة ه باستخدام ال

،Methodsوؼرها من ال POSTأو ال GETطبعا لن أشرح ال )

..(ففترض بك معرفتها

بإذن http$واآلن سأقوم بشرح الطرقة الرئسة وطرقة إعداد ال

*^_ هللا تعالى


$http

مكنها أن تعمل http$أول معلومة أردك أن تعرفها ه أن ال

اإلتصال بن المتصفح والسرفر من خالل وسلتن األولى من خالل ال

XMLHttpRequest Object والثان من خاللJOSNP..

، فإذا كنت ال(Response Statusال )ثان معلومة وه مهمة

، وتكمن أهمةمن هنا تعرفها أو تعرؾ أرقامها مكنك اإلطالع علها

هذه النقطة بمعرفة النتجة من الطلب الذي قمت بإرساله من المتصفح

تدل على 299الى 200الى السرفر، وما همنى هنا معرفة أن الرقم

*..^_.. حاالت نجاح مختلفة


http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

$http:ال مكن استخدامها هنا وه methodثالث معلومة وه ال

$http.get$http.head$http.post$http.put

$http.delete$http.jsonp$http.patch

تم انشائها بشكل تلقائ من قبل Http headersرابع معلومة، إن ال

من خالل header، ومكنك التعدل على ال Angularال

$httpProvider.defaults.headers.*


$http

P:المعلومة الخامسة التالة Request Methodالصؽة العامة لل

, josnp get, delete, head ه*(url, [config]);,url) *فه post, patch, putأما ال data, [config]);

: شرح ما تم ذكره

الخ .. head(url, [config])مثل methodترمز ألي *:

هو خار الزام وشر الى رابط الصفحة المطلوبة على: urlال

.السرفر

فتعن البانات الت post, patch, putوه تخص ال : dataال

..ستم ارسالها

..خار اختاري شر الى أي إعداد آخر نحب إضافته: configال


$http؟ وكؾ مكنن تحول ما تم http$كؾ مكننا إستخدام ال ..واآلن

لنشاهد معا..^_^ذكره ف الشرائح القللة الماضة الى شفرة برمجة

طبعا هذه الصورة)

القاسة لإلستخدام،

واآلن، لنتابع بإذن

هللا تعالى ونشاهد

أمثلة على هذا

( ^_^الموضوع


$http

تنفذ األمثلة الت ستم ذكرها جب: انتبه)

أن كون على السرفر، كما

أن الشفرة البرمجة الت ستم وضعها

ستستخدم ف جمع األمثلة األخرى،

.(والخاصة بهذا الموضوع

وضعها phpقم ببناء صفحة أوال

على السرفر، وهنا سأسمها

15.Php ..


$http

على السرفر htmlقم بوضع هذه الشفرة البرمجة داخل صفحة : ثانا

angualerطبعا هذه الشفرة ستكون داخل ال ..)أضا template

(..كما ف جمع األمثلة الت تم ذكرها سابقا


$http

^_^اآلن Controllerنقوم بإضافة ال : ثالثا

طبعا هذه الصؽة بأبسط صورها وذلك لتوضح الفكرة، وهذا هو المثال

..األول

الخاص بك أو ipقم باستبدالها برقم ال 192.168.0.147طبعا ال

localhost (.. حسب إعدادات السرفر الخاص بك)..


$http

: بشكله الكامل 1مثال


15.html

App.js

$http

: 2مثال



لحظة تفكر

$http(POSTمثال على )^_^ هذا المثال مهم، انتبه جدا :3مثال

: لتصبح بالشكل التال php.15أوال سأقوم بعمل تعدل بسط على


$http

JSوال HTMLاآلن قم بإضافة هذه التعدالت على ال


$http

..^_^ واآلن قم بتطبق المثال، ولنشاهد النتائج معا

: النتجة

!لماذا لم تظهر الرسالة !! ، ما هذه النتجة الؽر متوقعة *_*

جب علنا القام بتعدل بسط على ال POSTلنقوم باستخدام ال

Header الخاص بالHTTP ؟ !!

كؾ مكنن القام بذلك ؟


$http

requestsهذه الطرقة ستم تنفذها على جمع ال : الطرقة األولى

المستخدم moduleمن خالل ال POSTالت ستم طلبها على شكل

...حالا

: شاهد الطرقة

: واآلن لنشاهد النتجة


$http

فقط على ال headerوتستخدم هذه الطرقة لتنفذ ال : الطرقة الثانة

Request الحال ...

: شاهد المثال

الحظ أضا

هذه الطرقة

الت مكنك

استخدامها

ومكنك

تطبق المحتوى

بالطرقة السابقة


$http

:نتجة تطبق المثال

واآلن قبل اإلنتهاء من الحدث عن هذا الموضوع، رؼب بالتنوه لنقطة

مهمة وه أن الصؽة الت تم استخدامها ف المثال السابق ه على

;http(config)$: الشكل التال

شاهد الشرحة التالة والت تحوي على المعلومات ال ذكرتها وكؾ

مكنك أن أن تقرأ المزد وتطور من مهاراتك حسب احتاجاتك ف

^_^ العمل


$http


https://docs.angularjs.org/api/ng/service/$httpصورة من موقع

$http

واآلن، بإذن هللا تعالى، نكون قد تحدثنا عن أهم النقاط الخاصة بهذه

.الموضوع، سائلن هللا عز وجل أن نكون قد وفقنا ف هذا الطرح

ال تنسى: )واآلن لنشاهد جمع األمثلة الت ذكرها ف األمثلة السابقة

(تنفذ هذا المثال على السرفر


HTMLشاهد المثال ك

طبعا لن عمل المثال ك

HTML وستجد ،

مجموعة من األخطاء ف

، لكن consoleال

لتطلع على الشفرة

.البرمجة

مهم أن تقوم بأخذ هذا *(

الملؾ ال السرفر

.وتطبقه كما ف الصورة

15.html


لحظة تفكر

AngularJSالتعامل مع الجداول في

واآلن، وبعد الحدث الشق الذي سبق هذا الموضوع، نأت الى موجوع

*..^_ AngularJSالجداول والتعامل معها ف

وهو موضوع للتسلة قبل*.. _*طبعا هذا الموضوع سهل جدا

^_^فهل أنت مستعد؟ .. P:الموضوع القادم

؟ Directive، هل تذكر هذا ال ng-repeatواآلن

مثل أفضل طرقة لبناء جدول أو تمثل الجدول Directiveهذا ال

! كؾ هذا ؟.. على صفحة الوب

لنشاهد المثال ف الشرحة التالة



الحظ ال : 1مثال

Ng-repeat وكؾ

.. trأنها استخدمت مع



لقد تعلمنا سابقا كؾ مكننا استخدام الفلتر، ولكن هل مكننا: 2مثال

تطبق ذلك هنا أضا؟

*^_الجواب بكل تأكد نعم، شاهد المثال



اآلن، ماذا لو أردنا ترقم الصفوؾ داخل الجدول: 3مثال

(indexing .. )هل سنقوم بإنشاء هذه األرقام دوا ؟!

! ؟ jQueryأو ال jsهل هذا عن طرق ال .. ال، لن نفع هذا

! إذن كؾ ذلك ؟!! أضا الجواب ال

شاهد المثال*... _* index$الجواب بكل سهولة وجمال من خالل ال



، لنقوم بتؽر ^_^اآلن ما رأك أن نعط حركة تنسق جملة : 4مثال

* .. ^_لون الخلفة للصفوؾ الزوجة والفردة

كؾ هذا ؟

even$وال odd$بكل بساطة ا صدق العزز، من خالل ال

: لنشاهد المثال أ



: أ-4شرح المثال

مثل جملة شرط، فإذا تحقق الشرط سقوم directiveهو ng-ifال

بتنفذ العنصر وما فه، وإال فإنه لن نفذ ذلك، ولهذا فإنن قمت بتكرار

األعمدة كما ترى مرة بشكل فردي، ومرة بشكل زوج، حتى تم

..(زوج أم فردي ) rowطباعة التنسق بشكل مختلؾ حسب ال

ركز ف المثال وتابع: )ب-4لنشاهد معا المثال..هل هناك طرق أخرى

..(للشرحة التالة لشرحه



اذا الحظت ف المثال السابق، فإن قمت باستخدام : ب-4شرح المثال

داخل الكالس، بحث أطبع الكالس الذي inline Conditionال

.. من خالل الشرط evenأو oddحدد هل العنصر


AngularJSالتعامل مع الجداول في :ج-4المثال

الحظ هنا أن النتجة ه ذاتها

لكن هنا قمت باستخدام ال

Ng-class وبهذا لم أضطر

لتنفذ الشرط {{}}إلستخدام ال

الحظ كؾ مكن استخدام ال

AngularJS بشكل مترابط ^^



هل تعرؾ كؾ كون شكل ال .. واآلن السؤال الذي طرح نفسه

HTML لكل من المثال ( كشفرة برمجة تقرأ من المتصفح)الناتج

! ج ؟-4ب والمثال -4

(F12مكنك مشاهدته من خالل النقر على : )شاهد الفرق



ومكننا أضا القام بنفس العملة دون القام بوضع أي: د-4المثال

: التالة Directiveبكل بساطة من خالل ال ..كؾ ذلك ؟ ..^_^شرط

(ng-class-odd( )ng-class-even )_^.. * كؾ مكننا استخدام

شاهد المثال ..^^ الجملة والسهلة Directiveهذه ال


..الناتج HTMLشكل ال


إنتهنا من هذا الموضوع الجمع..نكون بإذن هللا تعالى ..^_^وبهذا

وبكل.. والذي تطرقنا به الى حركات جملة وأفكار متنوعة لكنها سهلة

^^تأكد، كثر مما تم ذكره مكنك استخدامه على عناصر أخرى

^______^ لنشاهد معا جمع األمثلة السابقة ..واآلن



16.html


لحظة تفكر

AngularJS Create New Module

واآلن، ننتقل الى الموضوع األخر بإذن هللا تعالى، وأول سؤال جول

؟ وهل مكن moduleبخاطرنا اآلن، هل مكننا إنشاء أكثر من

مع بعضها البعض ف نفس المشروع؟ وما moduleاستخدام هذه ال

لإلجابة عن هذه األسئلة تابع..^_^ ه الفائدة المرجوة من هذا األمر ؟

.. P:معنا

، كما مكننا أضا استخدامها فmoduleمكننا إنشاء أكثر من : أوال

^^نفس المشروع

وقد كون من moduleهناك العدد من المزاا إلنشاء أكثر من : ثاناأهمها هو تقسم العمل والوظائؾ على شكل ملفات سهل تتبعها

وتحدثها واستخدامها ف مشارخ أخرى، وهذه مزة راائعة



جدد، وسنقوم باستخدامه moduleلنشاهد معا خطوات إنشاء ..واآلن

..^^ف نفس المشروع

2neesCourses.jsقم بإنشاء ملؾ 1)

اآلن سنقوم بوضع الشفرة البرمجة كما تعلمنا عندما أنشئنا ال 2)

module ألول مرة^^

..ف هذه الدورة

(ال شء جدد الى اآلن)



الذي كنا نقوم باستخدامه app.jsاآلن سنقوم بالعودة الى ملؾ ال ( 3

الجدد والذي كان ف النقطة moduleبإضافة اسم ال وسنقوم

الموجودة ف تعرؾ ال []الى 2nees-coursesالسابقة هو

module ^_^... مالحظة لتبسط الفكرة قمت )شاهد الصورة

بأخذ نسخة مصؽرة

app.jsمن ملؾ

ووضعها ف ملؾ جدد

app2.js حتى كون المثال

...(واضحا



طبعا سنقوم باستخدام .. HTMLواآلن، سنذهب لنرى صفحة ال ( 4الذي قمنا باعتماده لجمع األمثلة، لكن سحدث Templateنفس ال

moduleتعدل بسط وهو إضافة ملؾ الجافا سكربت الخاص بال

: شاهد الصورة... الرئس app.jsالجدد بعد ملؾ ال

انتقل للشرحة )^^ ..وبهذا صبح قالبنا الجدد جاهزا إن شاء هللا ( التالة



، طبعا المثال الذي ^^واآلن لنطبق القالب الجدد ف مثال لنرى النتائج

app.jsسأضعه هو نفسه الخاص بالجداول والذي استخدمناه ف ال

ف أكثر من CTRLوالسبب ف ذلك أنن مثال سأستخدم نفس هذه ال

مشروع، أو أرد فصلها ألهمتها وإستخدامها وتحدثها بشكل سهل

اآلن شاهد الشفرة الموجودة بصفحة ال .. ألي أمر تحب ^^

HTML ( ..ف الشرحة التالة)

لكن جب ..هذا الموضوع سهل جدا ...ال تسنى تطبق المثال أوال بأول)

...( علك تطبق مثال وتتبعه، والفكرة الخاصة به سهلة




•


، وأحببنا أن كون ^^واآلن لنشاهد تطبق آخر مثال ف هذه الدورة

لذلك جعلنا هذا الموضوع ^^ آخر مثال من أسهل األمثلة والمواضع

هنا، ولكون نقطة إنطالق لك للمتابعة والتعلم ف أمور أخرى

وأي من األمور الت لم تم ..أخرى directiveوالتعرؾ على

Angularالتطرق لها، اآلن أنت مكنك فهم أو بناء أي مشروع

وبقى .. الموضوع سهل ورائع وعمل ... بسط بإذن هللا تعالى

^^ الدور علك اآلن لتتابع



17.html


لحظة تفكر

الخاتمة

وهكذا لكل بداة نهاة ، وخر العمل ما حسن آخره وخر الكالم ما قل ودل

وبعد هذا الجهد المتواضع أتمنى أن أكون موفقا ف سردي لهذه الدورة

المتواضعة، سردا ال ملل فه وال تقصر موضحا الخصائص المهمة للؽة

.، وفقن هللا وإاكم لما فه الخر وكل الخرAngularال

وأذكركم إخوان أن هذا العمل عمل بشري، فإن أصبنا فبفضل وتوفق من

. هللا تعالى، وإن أخطئنا فمن أنفسنا، نسأل هللا العفو والمؽفرة لنا ولكم

وأرجوا من حضرتكم الدعاء ل ولوالدي وللمسلمن، ؼفر هللا لنا ولكم،

ورزقنا هللا الرزق الحالل الطب لنا ولكم، وؼفر اللهم لوالدنا كما ربونا

.اللهم آمن... صؽارا


الخاتمة

: مالحظة

أذكر أنن أشهد هللا تعالى أن هذه الدورة لكل من ال ستخدمها ف

حرام، وإنما ه دورة لنتفع بها الشخص والمجتمع واألمة اإلسالمة

اللهم نسألك الرزق الحالل .. ككل، دون إخالل بمبادئنا وقواعدنا

.اللهم آمن..ونعوذ بك من الحرام ما ظهر منه وما بطن... الطب

.أنس حكمت أبو حمد: أخوكم

2nees.com: الموقع اإللكترون

.الحمد هلل رب العالمن..الحمد هلل صاحب المن والفضل



Education

Angular js دورة