دليل المبتدئين لبناء تطبيقات الويب باستخدام AngularJS

angularjs الرئيسية

انضم إلى إطار عمل تطبيقات الويب من Google

إذا كنت مطور JavaScript محترفًا ، فمن المحتمل أنك سمعت عنها Ember.js (إطار عمل JavaScript مفتوح المصدر) و Backbone.js (مكتبة JavaScript بواجهة RESTful JSON). ولكن إذا لم تكن مألوفًا أنجولار جي إس حتى الآن ، ستفقد بعض ميزاته الجذابة للغاية التي يمكنها حقًا تحسين HTML لتطبيقات الويب.

سنقدم لك هنا لمحة عن AngularJS ، وهو إطار عمل JavaScript MVW فائق البطولية ، بما في ذلك ميزاته البارزة وعملية البدء به.



نأمل أن يساعدك هذا ليس فقط في تطوير تطبيقات ويب غنية جيدة التصميم وقابلة للصيانة ، ولكن أيضًا يمنحك بعض الأسباب القوية لاختيار AngularJS لمشاريعك القادمة. هيا نبدأ!

ما هي أبعاد شريحة جوجل

01. ما هو AngularJS؟

AngularJS ، الذي أنشأته Google ، هو إطار عمل تطبيق ويب مفتوح المصدر مصمم لجعل تطوير الواجهة الأمامية والاختبار أسهل لمطوري الويب. الهدف الرئيسي من AngularJS هو إطالة تطبيقات الويب بإمكانية MVC (نموذج - عرض - متحكم). إنه إطار عمل JavaScript MVC / MVVM من جانب العميل قابل للتوسيع بالكامل ، ويعمل بدون تبعيات للمكتبة ، ويعمل أيضًا بشكل رائع مع المكتبات الأخرى. حتى ، يمكنك أيضًا تعديل أو استبدال كل ميزة لتناسب احتياجاتك الخاصة.

تم تطوير AngularJS في عام 2009 بواسطة Adam Abrons و Mi & Scaron؛ ko Heverym ، اللذين كانا مهندسي Google في ذلك الوقت. كما هو مذكور في الموقع الرسمي ، فهو 'إطار هيكلي لتطبيقات الويب الديناميكية' وهو أفضل ملاءمة لإنشاء تطبيقات ويب من صفحة واحدة لا تتطلب سوى JavaScript و CSS و HTML من جانب العميل.

يتيح لك استخدام HTML كلغة نموذجك ويسمح لك بتوسيع بناء جملة HTML للتعبير عن مكونات تطبيق الويب الخاص بك بدقة ودقة. يساعدك AngularJS على هيكلة كود JavaScript الخاص بك بشكل أفضل ويجعل من السهل اختباره ، وتعليم المتصفح كيفية الاستفادة من حقن التبعية لأي تقنية خادم.

كيفية استخدام AngularJS

إن بدء استخدام AngularJS سهل للغاية. يمكنك الحصول على تطبيق Angular بسيط في خمس دقائق فقط عن طريق إضافة بعض السمات إلى نصوص HTML النصية الخاصة بك. وهذه هي:

1. قم بتضمين التوجيه 'ng-app' في العلامة. ستجعل AngularJS تعمل على الصفحة ، وتحدد الصفحة كتطبيق Angular.

2. ضع علامة Angular في الجزء السفلي من صفحتك ، حيث تنتهي العلامة.

3. أضف HTML عادي. تُستخدم سمات HTML للوصول إلى توجيهات AngularJS ، بينما يتم تقييم التعبيرات باستخدام تدوين مزدوج القوس.

Today's tasks

  • {{task.name}}

هنا ، يحدد التوجيه ng-controller مساحة اسم ، حيث يمكنك وضع Angular JS للتحكم في البيانات وتقييم التعبيرات في HTML الخاص بك. في حين أن التوجيه ng-replic هو كائن Angular repeater ، والذي يطلب من Angular إنشاء عناصر قائمة طالما أنك تريد عرض المهام.

في حين أن معظم أطر العمل اليوم هي مجرد مجموعة من الأدوات الموجودة ، فإن AngularJS هو إطار عمل من الجيل التالي ، يحتوي على بعض الميزات الجذابة للغاية التي لا تفيد المطورين فحسب ، ولكنها مفيدة أيضًا للمصممين. فيما يلي بعض الميزات الرائعة لـ AngularJS ، والتي ستساعد المطورين على جعل تطبيقات الويب المستقبلية الخاصة بهم رائعة ...

التوجيهات

التوجيهات هي واحدة من أقوى ميزات AngularJS وأكثرها إقناعًا. إنها تسمح لك بتوسيع HTML الخاص بك وتستخدمها AngularJS لتوصيل عملها بالصفحة. إنها تسمح لك بتحديد علامات HTML مخصصة وقابلة لإعادة الاستخدام ، والتي يمكن استخدامها لمعالجة سمات DOM وتعديل سلوك عناصر معينة. جميع التوجيهات مسبوقة بـ ng- ، وهي مصممة لتكون عناصر مستقلة منفصلة عن تطبيق MVC الخاص بك ، وتوضع في سمات HTML.



كيفية تلوين الرسوم الهزلية باليد

بعض توجيهات AngularJS البارزة هي:

  • ng-app: يخبر هذا التوجيه Angular بمكان التنشيط. لتعريف الصفحة على أنها تطبيق Angular ، تحتاج إلى استخدام رمز بسيط:.
  • ng-bind: يخبر هذا التوجيه Angular بتغيير محتوى النص لعنصر HTML بقيمة التعبير المحدد ، وتحديث النص مع تغير قيمة هذا التعبير.
  • ng-model: إنه مشابه جدًا لـ ng-bind ، ولكنه يربط العرض بالنموذج ، والذي تتطلبه التوجيهات الأخرى مثل select أو textarea أو input.
  • فئة ng: تسمح بالتحميل الديناميكي لسمات الفئة.
  • ng-controller: يتيح لك هذا التوجيه تحديد فئة تحكم JavaScript لتقييم تعبيرات HTML.
  • ng-تكرار: حلقات بدون جهد من خلال عنصر تم تعيين متغير الحلقة المحدد له في مجموعة.
  • ng-hide و ng-show: باستخدام قيمة التعبير المنطقي ، يقرر هذا التوجيه ما إذا كان سيتم عرض العنصر أم لا.
  • ngIf: توجيه تعليمة if أساسي يسمح بإعادة إدراج نسخة من العنصر المترجم في DOM ، إذا كانت الشروط صحيحة. إذا كان الشرط خاطئًا ، فإنه يزيل العنصر من DOM.

فيما يلي مثال على التوجيه الذي يستمع إلى حدث ويحدث نطاقه $ ، وبالتالي.

myModule.directive('myComponent', function(mySharedService) { return { restrict: 'E', controller: function($scope, $attrs, mySharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'Directive: ' + mySharedService.message; }); }, replace: true, template: '' }; });

يمكن استخدام هذا التوجيه المخصص على النحو التالي:

ربط البيانات ثنائي الاتجاه

ربما يكون ربط البيانات هو السمة الأكثر شيوعًا والأكثر شهرة في AngularJS. إنه يوفر للمطورين من كتابة قدر كبير من التعليمات البرمجية عن طريق تقليل الكثير من العبء على الواجهة الخلفية للخادم. في تطبيق ويب نموذجي ، يتم تخصيص 80٪ من قاعدة الشفرة للتلاعب ، والعبور ، والاستماع إلى DOM. يجعل ربط البيانات هذا الرمز غير مرئي ، لذا يمكنك التركيز على أشياء مهمة أخرى في تطبيقك.

تقليديًا ، تحتوي معظم أنظمة القوالب على ربط بيانات أحادي الاتجاه: فهي تدمج مكونات النموذج والقالب معًا في طريقة عرض. بعد الدمج ، لا تنعكس التغييرات التي تم إجراؤها على النموذج تلقائيًا في طريقة العرض. لعكس هذه التغييرات ، يحتاج المطور إلى معالجة عناصر وسمات DOM يدويًا. تصبح هذه العملية أكثر تعقيدًا وتعقيدًا ، عندما يقوم المستخدم بإجراء أي تغييرات على العرض. لأن المطور يحتاج بعد ذلك إلى تفسير التفاعلات ودمجها في النموذج وتحديث طريقة العرض.

مخطط ربط البيانات أحادي الاتجاه

الصورة مجاملة من http://docs.angularjs.org

في المقابل ، تقوم AngularJS بربط البيانات بطريقة أفضل ومختلفة من خلال معالجة مزامنة البيانات بين النموذج و DOM ، والعكس صحيح.

كيفية تلوين نمط الكتاب الهزلي

مخطط ربط البيانات ثنائي الاتجاه

الصورة مجاملة من http://docs.angularjs.org

فيما يلي مثال بسيط ، يشرح ربط قيمة الإدخال بملف

بطاقة شعار.

Name:

Hello, {{yourName}}!

حقن التبعية

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

من خلال الاستفادة من حقن التبعية ، تقدم AngularJS الخدمات التقليدية من جانب الخادم إلى تطبيقات الويب من جانب العميل ، مما يؤدي إلى تقليل العبء على الواجهة الخلفية وجعل تطبيق الويب أخف وزناً.

إذا كنت ترغب في الوصول إلى خدمات AngularJS الأساسية ، فأنت تحتاج إلى إضافة خدمة معينة كمعامل. ستلاحظ AngularJS تلقائيًا أنك تريد استخدام هذه الخدمة ، وستتيح لك مثيلًا.



function EditCtrl($scope, $location, $routeParams) { // Write something here... }

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

angular. module('MyServiceModule', []). factory('notify', ['$window', function (win) { return function (msg) { win.alert(msg); }; }]); function myController(scope, notifyService) { scope.callNotify = function (msg) { notifyService(msg); }; } myController.$inject = ['$scope', 'notify'];

القوالب

في AngularJS ، يتم كتابة القالب باستخدام HTML الذي يحتوي على سمات وعناصر خاصة بالزاوية. من خلال دمج القالب مع المعلومات من وحدة التحكم والنموذج ، يعرض AngularJS العرض الديناميكي في المتصفحات.

فيما يلي العناصر والسمات الزاوية التي يمكن استخدامها:

  • عامل التصفية: يتم تنسيق البيانات للعرض بواسطة هذا العنصر.
  • ضوابط النموذج: يتم استخدامه للتحقق من صحة إدخال المستخدم.
  • الترميز: لربط التعبيرات بالعناصر باستخدام التدوين المتعرج المزدوج {{}}.
  • التوجيه: عنصر أو سمة تعرض مكون DOM قابل لإعادة الاستخدام أو يطيل عنصر DOM موجود.

يُظهر الرمز الموضح أدناه نموذجًا به توجيهات وترميز:

آبل آيباد ميني 2 الجمعة السوداء
{{buttonText}}

في تطبيق نموذجي ، يحتوي القالب على توجيهات CSS و HTML و Angular في ملف HTML واحد (عادةً index.html).

اختبارات

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

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

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

Ajeet Yadav هو مطور ويب محترف ، مرتبط بـ Wordpressintegration.com ، شركة تطوير ويب مشهورة توفر فوتوشوب عالي الجودة لخدمة تحويل قالب / قوالب ووردبريس. يتبع تضمين التغريدة على تويتر.