عندما جئت عبر AngularJS منذ بضعة أسابيع ، كنت مفتونًا في البداية. في الوقت الذي عملت فيه من خلال مجموعة من البرامج التعليمية المتاحة على موقع AngularJS ، شعرت بسعادة غامرة لإيجاد هذا الإطار.
ما هو AngularJS؟ AngularJS هو الطفل الجديد (نسبياً) في كتلة الترميز. للإقتباس من موقعهم على الإنترنت "هو إطار هيكلي لتطبيقات الويب الديناميكية" وهو مناسب بشكل خاص لبناء تطبيقات الويب من صفحة واحدة ، على الرغم من أنه بالتأكيد لا يقتصر على ذلك.
تم تطويره في عام 2009 من قبل Miško Hevery و Adam Abrons - وكلاهما موظف في Google في ذلك الوقت - فهو جافا سكريبت تمامًا وجانب كامل من جانب العميل ، لذلك يمكن تشغيل AngularJS في أي مكان يمكن تشغيله. كما أنها صغيرة: مضغوطة ومختزلة أقل من 29 كيلو بايت. وهو مصدر مفتوح تحت رخصة معهد ماساتشوستس للتكنولوجيا. يمكنك أيضًا استخدام الشعار ، المتوفر تحت ترخيص Creative Commons Attribution-ShareAlike 3.0 Unported.
وفقا لويكيبيديا ، فإن هدف Angular “هو زيادة التطبيقات المستندة إلى المتصفح مع القدرة على عرض نموذج -MVC” (MVC) ، وهو يفعل ذلك بالضبط ، مما يوفر إطار ربط / MVC. هذا هو ملزم في اتجاهين ، مانعًا لك. لذيذ. باستخدام بنية بسيطة مثل {{my data}} ، يتعين عليك ربط البيانات بصفحتك. تقوم خدمة النطاق $ بالكشف عن التغييرات في النموذج وتعديل تعبيرات HTML في طريقة العرض من خلال وحدات التحكم. تعمل في الاتجاه الآخر ، وتظهر التغييرات في طريقة العرض في النموذج. هذا يزيل الحاجة إلى الغالبية العظمى من تلاعبات DOM التي تتمحور حول البيانات ، الكثير منا ، بما فيهم أنا ، يعتبر أمرًا بديهيًا عند العمل مع مكتبة مثل jQuery.
يتم تشغيل الزاوي مباشرة خارج منطقة الجزاء دون الاعتماد على المكتبات ، على الرغم من أنه يمكن تمديده مع العديد من الوحدات المتوفرة ، وبالطبع يمكنك بناء الخاصة بك لتناسب احتياجاتك الخاصة. كونه جافا سكريبت نقية ، فإنه أيضا لديه ميزة كونه لاذع الخادم.
إذا كنت معتادًا على مكتبة قوية مثل jQuery ، فمن السهل أن ترغب في مزجها مع الأشياء التي يمكن أن تقوم بها Angular بالفعل. ومع إدراك هذه المشكلة المحتملة ، على المطورين أن يقولوا: "إذا كنت تكافح لكسر هذه العادة ، ففكر في إزالة jQuery من تطبيقك. هل حقا. Angular لديه خدمة http $ والتوجيهات القوية التي تجعلها غير ضرورية دائمًا. "هناك شيء واحد مؤكد ، إذا قمت بالالتزام بـ Angular ، فإن الحلقات jQuery والوضوح مع الخادم سيغيب عن الكود ، الزاوي يوفر مثل هذه طريقة موجزة ونظيفة من تحقيق نفس الأشياء.
تستخدم التوجيهات الزاوية لتوصيل الإجراء الخاص بها إلى الصفحة. يتم وضع التوجيهات ، وجميعها مبدئية بـ ng- ، في سمات html.
بعض التوجيهات الشائعة التي تأتي مدمجة مسبقًا مع Angular هي:
نانوغرام التطبيق: هذا هو في الأساس نقطة الدخول الأولية للزاوية إلى الصفحة. يخبر Angular حيث يحصل على التصرف. هو كل ما يتطلبه الأمر لتحديد الصفحة كتطبيق Angular.
ng-bind: يغير نص العنصر إلى قيمة تعبير.
سيعرض قيمة "الاسم" داخل الامتداد. تنعكس أي تغييرات على "الاسم" على الفور في DOM حيث يتم استخدام المتغير.
ng-controller: تحدد فئة JavaScript للإجراء المحدد. يتم حفظ وحدات التحكم عادةً في ملفات .js الخارجية.
ng-repeat: ينشئ بنية الحلقة النظيفة جدًا في صفحتك.
- {{item.description}}
حلقات دون عناء من خلال كل عنصر في المجموعة.
لم أستخدمها بعد ، لكنني قرأت أن إنشاء توجيهات مخصصة يمكن أن يكون مشكلة صعبة ، وهو أمر يستغرق بعض الوقت لتغليف رأسك. الزاوي يقدم أ الفيديو للمساعدة في توضيح المفهوم.
كما ذكر من قبل ، فإن التوجيه نانوغرام التطبيق في العلامة التي تحدد الجزء الرئيسي لتشغيل Angular في الصفحة.
إضافة إلى رأس الصفحة لإحضار الإطار الزاوي نفسه.
يشير إلى ملف جافا سكريبت الخارجي أو الملفات التي تحتفظ بفئات جافا سكريبت التي سيتصل بها تطبيق Angular. فئة بسيطة للغاية ، على سبيل المثال ، قد تكون:
function ItemListCtrl ($scope) {$scope.items = [{ "description": "coffee pot" } ، {"description": "nerf gun"} ، {"description": "phone"} ،]؛} تمرير ng-controller “ItemListCtrl” ، وهو اسم فئة جافا التخيلي JavaScript ، يخبر Angular ما الرمز لتشغيل:
وتدوين الترقيم المزدوج يخبر Angular ما هي التعبيرات المراد تقييمها.
ng-repeat عبارة عن توجيه مكرر بشكل رائع يقوم بتكرار من خلال المجموعة الحالية ويقوم بالإجراء المحدد أو يوفر البيانات المحددة. انها بسيطة جدا ونظيفة.
Stuff on my desk:
{{item.description}}سيعرض هذا الإعداد البسيط:
Stuff on my desk:coffee potnerf gunphoneمن المسلم به أن هذا لا يبدو مثيرا للإعجاب ، ولكن الفكرة نفسها. تجعل علامات الترميز والتحكم في الصفحات بسيطة جدًا مع الزاوي ، البسيط ، البسيط جدًا.
يُعد الحصول على بيانات حقيقية في تطبيقك أمرًا بسيطًا للغاية. يحب Angular استخدام JSON:
function ItemListCtrl ($scope, $http) {$http.get(‘items/list.json').success(function (data) {$scope.items = data;} } يؤدي هذا إلى إرجاع كائن JSON يمكن التلاعب به في الإرادة في تطبيق Angular.
واحدة من المبادئ الأساسية التي أسسها Angular كانت أن التطبيقات التي تم إنشاؤها بها قابلة للاختبار بشكل كامل. للاختبار من طرف إلى طرف لدينا Angular Scenario Runner لمحاكاة تفاعلات المستخدم مع تطبيقك. يمكنك إطعامها اختبارات السيناريو مكتوبة في جافا سكريبت.
لتصحيح الأخطاء في المستعرض ، AngularJS Batarang هي امتداد كروم متاح على جيثب.
مع اكتساب AngularJS مزيدًا من الجر ، ستتوفر المزيد من الموارد ، ولكن يوجد بالفعل عدد من المواقع التي توفر التعليم وطرق توسيع نطاق Angular.
ال موقع AngularJS نفسها ، بالطبع مصدرك النهائي. وهي تقدم برامج تعليمية صلبة وبسيطة ولها نشاط نشط إلى حد ما الوجود على + Google.
هناك عدد من الزاوي المستودعات على جيثب.
وحدات الزاوي ، يقدم مجموعة من الوحدات المقدمة من المستخدمين ، من خدمات Backbone إلى Rails integration.
هل استخدمت AngularJS حتى الآن؟ كيف يقارن إلى مكتبات أكبر مثل jQuery؟ اسمحوا لنا أن نعرف في التعليقات.