الصفحة الرئيسية » أدوات » 15 أدوات AngularJS مفيدة للمطورين

    15 أدوات AngularJS مفيدة للمطورين

    التفكير في غمس أصابع قدميك في الزاوي؟ إذا كنت قد مرت على أفضل 10 برامج تعليمية لتعلم منشور AngularJS وترغب في اللعب مع Angular لوحدك ، فأنت في المنصب الصحيح. لدينا هنا بعض الأدوات التي يمكن أن تبسيط سير العمل في التنمية.

    نحن نبحث في 15 من أفضل بيئة تطوير متكاملة ، برامج تحرير النصوص ، أدوات الاختبار والتصحيح ، الوحدات النمطية و أدوات التطوير والتطبيقات للبناء مع الزاوي. إذا كانت لديك أدواتك أو تطبيقاتك المفضلة ، فقم بمشاركتها معنا في التعليقات أدناه.

    بيئة تطوير متكاملة ومحرر النص

    في عالم البرمجة ، هناك نوعان من المحررين: بيئة تطوير متكاملة متكاملة (IDE) و المحررين النص خفيفة الوزن. كلاهما يتيحان سير عمل تطوير أسرع. يعد IDE ومحرر النصوص المدرجين أدناه أدوات جيدة لتسريع عملية تطوير الزاوي. يمكن تهيئتها بسهولة لبيئة الزاوي.

    WebStorm

    WebStorm غير مناسب لجافا سكريبت فحسب ، بل وأيضًا HTML و CSS. يحتوي على محرر مباشر رائع يتيح لك رؤية نتائج الترميز الخاصة بك على المتصفح دون الحاجة إلى تحديث متكرر. بشكل افتراضي ، يحمل الإصدار الأحدث حزمة البرنامج المساعد AngularJS على الرغم من أنك ستحتاج إلى تضمين البرنامج النصي Angular في مشروعك أولاً. لمزيد من التفاصيل ، اقرأ منشور مدونة WebStorm.

    Aptana

    Aptana هو بيئة تطوير متكاملة مفتوحة المصدر مجانية وهي في الواقع نسخة مخصصة من Eclipse تركز على Javascript و HTML و CSS وغيرها من الأشياء الجيدة على الويب. لتمديد Aptana للحصول على دعم Angular ، كل ما عليك القيام به هو تثبيت امتداد AngularJS Eclipse من كسوف السوق.

    نص سامية

    يعد Sublime Text أحد أكثر برامج تحرير النصوص شيوعًا ، وهو محبوب من قِبل الكثيرين نظرًا لتخصيصه للتكيف مع أي نوع من بيئة البرمجة. إنه سريع أيضًا ولديه دعم مقتطف الشفرة القابل للتخصيص ، ويحتوي على العديد من الحزم بما في ذلك حزمة AngularJS التي تسمح لك بالعمل مع Angular. هنا وظيفة كبيرة من جانب دان Wahlin يمكنك التحقق من ذلك.

    المزيد عن النص السامي:

    • 18 الإضافات الأساسية سامية النص
    • 12 النصائح والحيل سامية الأكثر طلبا
    • كيفية إدراج مسار الملف في نص سامية
    • معاينة سريعة للمشروع المضيف المحلي مع نص سامية
    • إدارة الملاحظات والقوائم مع نص سامية
    • مضيفا البادئة بائع CSS مع نص سامية

    أدوات اختبار وتصحيح الأخطاء

    اختبار وتصحيح الأخطاء هي أجزاء مهمة من عملية التطوير وخاصة في بيئة مثل الزاوي. إليك بعض الأدوات التي يمكن أن تساعدك على اختبار التطبيق وتصحيحه.

    الكرمة

    Karma عداء اختبار رائع صُمم من أجل Angular ، ولكن يمكن استخدامه أيضًا مع أي إطار Javascript آخر. وهو يدعم أي نوع من الاختبارات: اختبار وحدة ، اختبار منتصف الطريق و اختبار E2E. يعمل Karma عن طريق فتح المتصفحات التي تدرجها في ملف التكوين. يتواصل بعد ذلك مع المستعرض النشط باستخدام socket.io ويسألك عما إذا كنت ستجري الاختبار أم لا.

    الياسمين

    يستخدم الياسمين للتطوير الذي يحركه السلوك (BDD) ، لكن يمكنك استخدامه للتطوير الذي يحركه الاختبار (TDD) بتخصيص بسيط. يقترن عادةً مع Karma: Karma كمرشح للاختبار ، والياسمين كإطار اختبار. تقوم ياسمين تلقائيًا بفحص جميع فئات ووظائف Javascript وإعلامك بالكود غير المعالج. العيب هو لا يعرف أي بيئة (متصفحات) يقوم بها الاختبار, لكن كارما تعوض عن هذا العيب.

    MochaJS

    بالمقارنة مع الياسمين ، MochaJS هو أكثر مرونة لكن تأتي الياسمين كحزمة الكل في واحد. مع MochaJS ، إذا كنت تريد استخدام إطار تجسس ، فأنت بحاجة إلى إعداد Mocha مع مكتبتها المناسبة مثل sinon.js. وإذا كنت بحاجة إلى إطار للتأكيد ، فيجب تكوين Mocha بإطار مثل Chai.

    منقلة

    منقلة وربما أقوى الآلي نهاية الى النهاية (e2e) أداة اختبار الزاوي. تم تطويره من قبل فريق Angular ، تم بناء Protractor من خلال الجمع بين بعض التقنيات الرائعة المتوفرة اليوم مثل NodeJS ، السيلينيوم ، webDriver ، موكا ، والخيار و الياسمين.

    الزاوي Batarang

    بالإضافة إلى منقلة, أداة رائعة أخرى قام بتطويرها فريق Angular هي Angular Batarang. BATARANG هو امتداد كروم لتصحيح الأخطاء التطبيقات الزاوي. بعد فحص التطبيق الخاص بك ، سوف Batarang تظهر لك النموذج والأداء والاعتماد عليها ينتج عن تصحيح الأخطاء ثلاث علامات تبويب مختلفة. يمكنك أيضًا التحكم في الفحص وتحديد ما إذا كان سيتم عرض التطبيقات ، الارتباطات أو النطاقات.

    نانوغرام المفتش

    ng-inspector هو امتداد لمتصفح معتمد على Chrome و Safari. على عكس Batarang الذي يظهر في DevTools ، يفضل ng-inspector عرض اللوحة الجانبية بدلاً من ذلك. يمكنك فحص عناصر DOM وتمييزها وأنت تحوم فوق نطاق. يمكنك أيضًا رؤية النطاق والطراز المحدثين في الوقت الفعلي.

    وحدات

    أفضل مكان للعثور على وحدات الزاوي هو ngmodules.org. ولكن إذا كنت بحاجة إلى نظرة عامة سريعة ، فيما يلي قائمة ببعض الموارد الجيدة التي جمعناها لك.

    AngularUI

    AngularUI هي عبارة عن مجموعة من مكونات واجهة المستخدم المدمجة مع AngularJS. تساعدك توجيهات الأداة المساعدة في إنشاء تطبيقات Angular بشكل أسرع. بدلا من الحاجيات ، يستخدم AngularUI التوجيهات الخام مثل واجهة المستخدم الموجه, واجهة المستخدم خريطة, واجهة المستخدم تقويم إلخ. التوجيهات التي قد تعجبك أكثر شيئ هي UI-Bootstrap التي يمكن أن تكون أصليًا إنشاء Twitter Bootstrap في الزاوي. تحقق من صفحة الوثائق نظيفة وجميلة للبدء.

    نانوغرام الجدول - جدول الفرز والتصفية

    إذا كنت بحاجة إلى جداول في تطبيق الويب الخاص بك ، فإن النوع الذي يمكن فرزه وتصفيته ، ثم ngTable هي الأداة التي تبحث عنها. كما يدعم ارتفاعات الصف المتغيرة وقدرات ترقيم الصفحات الرائعة.

    Restangular

    مع الزاوي ، قد يكون لديك صعوبة في العمل $ الموارد و $ HTTP لإنشاء Rest API. Restangular يمكن أن تساعد في جعل استخدام الحصول على وحذف وتحديث ونشر طلبات البيانات أسهل. بعض الميزات التي تميز Restangular بصرف النظر عن $ الموارد هي دعم طريقة HTTP ، عنصر الربط الذاتي ، وعود الاستخدام وغيرها الكثير. تعرف على المزيد هنا وتحقق من العرض التوضيحي المباشر على Plunkr.

    Gettext الزاوي

    Angular-Gettext هي وحدة زاوي رائعة للتوطين السهل للغاية. الميزات الرئيسية هي أنه يمكنك ترجمة تطبيق الويب الخاص بك بنفس سهولة الإضافة صفة، عزا. يتيح لك التركيز على تطوير تطبيقك وترك كل الترجمات إلى Angular-Gettext.

    أدوات وتطبيقات

    أخيرًا ، سنترك هذا هنا. إنها قائمة تضم المزيد من الأدوات والتطبيقات التي قد تجعل عملية التطوير Angular أسهل وأكثر سلاسة. أنها تعمل بشكل جيد مع أولئك الذين بدأوا للتو لالتقاط الزاوي.

    مولد الزاوي

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

    ngDocs - AngularJS Reference

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