Angular from web 2 App

إستهلال: تطورت تقنيات الويب إرتباطاً بتطور تقنيات الحاسوب و مع هذه التطورات ظهر لنا أشكال كثيرة من التقنيات المتخصصة في ..




14-04-2018 11:08 مساء
Jehazee
عضـو مشارك
rating
العضو غائب إنشغالات الحياة لا تنتهي, لأي أمر ضروري راسلني على بريدي الخاص
معلومات الكاتب ▼
تاريخ الإنضمام : 22-10-2009
رقم العضوية : 162
المشاركات : 36
الدولة : state less
الجنس : ذكر
تاريخ الميلاد : 3-12-1988
قوة السمعة : 20
موقعي : زيارة موقعي
اصدار المنتدى : غير محدد
 offline 

إستهلال:

تطورت تقنيات الويب إرتباطاً بتطور تقنيات الحاسوب و مع هذه التطورات ظهر لنا أشكال كثيرة من التقنيات المتخصصة في صناعة الويب وبالتساير مع مبادئ web 2.0 الذي طرح نسق جديد لمطوري الويب و أخرجه من حيز الصفحات الثابتة أو حتى ديناميكية الإنشاء بمساعدة JavaScript إلا أن الثبات في التصميم و التطوير بقيا مطلب أساسي لدى مجتمع مطوري الويب ومن هذا المنطلق حصلنا على تقنيات جديدة ذات كفائة عالية جداً مبنية على JavaScript وهي تقنيات الـAjax التي بنية على JavaScript و مع تعديلات جوهرية على DOM الخاصة بمفسرات HTML لنحصل على تقنيات أكثر تطور وقوة و ثبات من سابقتها و مثلاً على ذلك JQuery و ما سنتحدث عنه بالتفصيل ونشرحه في دروس دورية و مقسمة AngularJS.


مدخل:

لمحة عن Angular

إبتداء مشروع عمل هذا الإطار التقني منذ مطلع 2009 من قبل أحد مطوري شركة Google و إبتداء كمشروع فردي من قبل المطور والهاوي العامل لدى Google السيد / ميسكو هيفيري Mr. Misko Hevery وقد تم إصدار أول نسخة في عام 2012 والتي كانت نسخة بإصدار 1.0 و التي لاقت قبولاً كبير من الشركة الراعية له Google وتم تبني و دعم التطبيق و إطار العمل بشكل كامل من قبلها وحتى يومنا هذا لاتزال هي الراعي و الداعم الرسمي بإدارة السيد / ميسكو هيفيري.

 

الجانب التقني

تعتبر تقنية AngularJS مختلفة عن جميع التقنيات المكتوبة على نسق Ajax بل إنها تمتاز بثبات أكبر من غيرها ولكن هذا لايعد الأمر الوحيد الذي تنفرد به! بل إنها تعتبر إمتداد للـ HTML بشكل مباشر ولا تعتمد في تطبيقها على قراءة تفاصيلCSS بشكل أساسي, بل أن أمر الـ CSS متروك لتعديل تصميم نص HTML و أيضاً تعتبر تقنية ممتازة لصناعة تطبيق كامل منفصل كملف وحيد SPA/Single Page Application و الأجدر بالذكر من كل هذا إنها تقنية سهلة التعلم و الإكتساب.

 

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

 

قبل بداء هذا الدرس يجب أن تكون مُلم بأساسيات ثلاث تقنيات:


  • HTML

  • CSS

  • Java Script
 


<!DOCTYPE html>

<html lang="en-US">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

<div ng-app="">

<p>Name : <i*nput type="text" ng-model="name"></p>

<h1>Hello {{name}}</h1>

</div>

</body>

</html>
 

لاحظ للسطور المشار أليها بالألوان, قمنا بطلب المكتبة الخاصة التي ستساعدنا على أداء المهام من سيرفرات googleapis وستجد لديهم نسخ للعديد من مكاتب ajax الأخرى, ثم قمنا بتعريف تطبيق في محتوى element div عن طريق كتابة

 


<div ng-app="">
 

 وهنا نقوم بالتركيز على هذا الـ element لتفسير العمليات و المعطيات و الوظائف الخاصة بـ AngularJS.

 

قمنا بإضافة element خاص في نموذج i*nput تحت مسمى

 


<input type="text" ng-model="name">
 

وفي أسفله قمنا بكتابة element h1 والذي يحتوي على رمز غريب {{name}} و هو يُفسر من قبل angular كمتغير يجلب محتواه من السطر السابق في محتوى النموذج حوى أيضاً على model بأسم name وهنا نرى أن المكتبة ستقوم بتطبيق النص المكتوب في حقل النموذج على المتغير {{name}} بشكل فوري وسلس

 


<h1>Hello {{name}}</h1>

 

هذا التطبيق الأول وبإعتقادي أنه يشرح الكثير و الكثير من إستخدام AngularJS و سأقوم بتفصيل بعض الأشياء التي لم ذكرتها فالمثال ولم أفصلها فالشرح.



تم تحرير الموضوع بواسطة :Jehazee
بتاريخ:14-04-2018 11:22 مساء


15-04-2018 12:07 صباحا
مشاهدة مشاركة منفردة [1]
Soliman
PBB Management
rating
العضو غائب ظروف العمل
معلومات الكاتب ▼
تاريخ الإنضمام : 18-07-2009
رقم العضوية : 1
المشاركات : 11191
الدولة : السعودية
الجنس : ذكر
تاريخ الميلاد : 6-1-1980
الدعوات : 48
قوة السمعة : 66786
موقعي : زيارة موقعي
عدد الإجابات: 166
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif Angular from web 2 App
مقال جميل جزاكم الله الجنة . smile


23-04-2018 04:09 مساء
مشاهدة مشاركة منفردة [2]
Jehazee
عضـو مشارك
rating
العضو غائب إنشغالات الحياة لا تنتهي, لأي أمر ضروري راسلني على بريدي الخاص
معلومات الكاتب ▼
تاريخ الإنضمام : 22-10-2009
رقم العضوية : 162
المشاركات : 36
الدولة : state less
الجنس : ذكر
تاريخ الميلاد : 3-12-1988
قوة السمعة : 20
موقعي : زيارة موقعي
اصدار المنتدى : غير محدد
 offline 
look/images/icons/i1.gif Angular from web 2 App
المشاركة الأصلية كتبت بواسطة: Soliman »
مقال جميل جزاكم الله الجنة . smile

أهلا بك أخي سليمان, ممتن لله أن أراك مجدداً smile


المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
Angular from web 2 App #2 Jehazee
0 384 Jehazee

الكلمات الدلالية
from ، Angular ،







الساعة الآن 04:53 صباحا