freeCodeCamp/guide/arabic/angular/command-line-interface/index.md

title	localeTitle
Command-line Interface	واجهة خط الأوامر

واجهة خط الأوامر

التحفيز

يرتبط Angular ارتباطًا وثيقًا بواجهة سطر الأوامر الخاصة به (CLI). يبسط CLI جيل نظام الملفات الزاوي. إنه يتعامل مع معظم التكوينات خلف الكواليس حتى يستطيع المطورون بدء الترميز. يحتوي CLI أيضًا على منحنى تعليمي منخفض يوصى به لأي وافد جديد يريد الانتقال مباشرة. Heck ، حتى من مطوري Angular ذوي الخبرة يعتمدون على CLI!

التركيب

يتطلب CLI Angular Node.js و Node Packet Manager (NPM) . يمكنك التحقق من وجود هذه البرامج باستخدام الأمر terminal: node -v; npm -v . وبمجرد تثبيتها ، قم بفتح مطراف وتثبيت CLI Angular باستخدام هذا الأمر: npm install -g @angular/cli . يمكن تنفيذ ذلك من أي مكان على نظامك. تم تكوين CLI للاستخدام العام مع العلم -g .

تحقق من وجود CLI باستخدام الأمر: ng -v . هذا يخرج عدة أسطر من المعلومات. واحد من هذه الخطوط تنص على نسخة من CLI المثبتة.

تعرف على أن ng هي لبنة البناء الأساسية لـ CLI. سوف تبدأ جميع الأوامر الخاصة بك مع ng . الوقت لإلقاء نظرة على أربعة من أكثر الأوامر الشائعة المسبقة بـ ng .

الأوامر الرئيسية

• نانوغرام جديد

• نانجو خدمة

• نانوغرام تولد

• بناء ng

• تحديث نانوغرام

الشروط الأساسية لكل من هذه الأمور هي قول جيد. معا ، فإنها تشمل ما ستحتاج إليه لتصل إلى الأرض مع Angular. بالطبع ، هناك الكثير. جميع الأوامر مبينة في GitHub Documentation 1 . من المحتمل أن تجد أن الأوامر المذكورة أعلاه ستغطي القواعد الضرورية.

نانوغرام جديد

ng new بإنشاء نظام ملفات Angular جديد . هذه عملية سريالية. يرجى الانتقال إلى موقع ملف مرغوب فيه لإنشاء تطبيقات جديدة . اكتب هذا الأمر على النحو التالي ، مع استبدال [name-of-app] بكل ما تريد: ng new [name-of-app] .

يجب أن يظهر نظام الملفات أسفل المجلد [name-of-app] . لا تتردد في استكشاف ما يكمن في. حاول عدم إجراء أي تغييرات حتى الآن. كل ما تحتاجه لتشغيل تطبيق Angular الأول الخاص بك يأتي مجمعة معًا في نظام الملفات الذي تم إنشاؤه.

نانجو خدمة

لتشغيل التطبيق ، يجب تنفيذ أمر ng serve داخل مجلد [name-of-app] . في أي مكان داخل المجلد سوف تفعل. يجب على CLI Angular التعرف على أنه داخل بيئة تم إنشاؤها باستخدام ng new . سيتم تشغيله بشرط شرط واحد. المضي قدما ng serve : ng serve .

يتم تشغيل التطبيق على المنفذ 4200 بشكل افتراضي. يمكنك عرض تطبيق Angular بالانتقال إلى localhost:4200 في أي متصفح ويب. أعمال Angular عبر جميع المتصفحات. إلا إذا كنت تستخدم إصدارًا قديمًا من Internet Explorer ، فسيظهر التطبيق. يعرض الشعار الرسمي Angular إلى جانب قائمة من الروابط المفيدة.

حسنا ، يعمل التطبيق. ومن المأمول أن تعمل ، ولكن عليك أن تعرف ما يجري تحت غطاء محرك السيارة. ارجع إلى نظام ملفات [name-of-app] . انتقل [name-of-app] -> src -> app . وهنا تكمن الملفات المسؤولة عن ما شاهدته في localhost:4200 .

نانوغرام تولد

تحدد ملفات .component مكونًا Angular بما في ذلك المنطق ( .ts ) والأسلوب ( .css ) .spec.ts ( .html ) والاختبار ( .spec.ts ). و app.module.ts تبرز بشكل خاص. معا ، تعمل هاتان المجموعتان من الملفات معاً component module . كل من component module هما مثالان منفصلان عن مخططات الزوايا. تصنف الرياضيات الكتل المختلفة ذات الأغراض المحددة من الكود القابل للتوليد مع ng generate .

من أجل هذه المقالة ، فهم أن module بتصدير واستيراد الأصول من شجرة المكونات الأساسية وإليها. يتعلق أحد component بجزء واحد من واجهة المستخدم. يظل منطق هذه الوحدة .component ملفات .component المختلفة.

أما بالنسبة إلى ng generate ، فيمكن لهذا الأمر إنشاء هياكل عظمية لكلٍّ من المخططين الزاويين المتوفرين 2 . انتقل إلى [name-of-app -> src -> app] . حاول إنشاء component جديد عن طريق تنفيذ: ng generate component [name-of-component] . استبدل [name-of-component] بكل ما تريد. سيظهر ملف جديد [name-of-component] مع ملفات component الضرورية.

يمكنك أن ترى أن ng generate رمز تعميم Angular's. ng generate أيضا الأسلاك الامور. ترتبط الرياضيات التي يتم إنشاؤها في سياق نظام الملفات الزاوية بالوحدة الأساسية للنظام. في هذه الحالة ، سيكون ملف app.module.ts داخل [name-of-app -> src -> app] .

بناء ng

Angular هو أداة أمامية. تقوم CLI بعملياتها نيابة عن الواجهة الأمامية. ng serve يعتني الإعداد خادم النهاية الخلفية. هذا يبقي التطوير يركز بالكامل على الواجهة الأمامية. ومع ذلك ، يجب أن يكون الاتصال بنهاية الخلفية الخاصة بك لتطبيق Angular ممكنًا أيضًا.

ng build يلبي هذه الحاجة. قبل تجربة ذلك داخل نظام الملفات. انتقل إلى [name-of-app] -> angular.json . ابحث عن سطر الشفرة المفرد هذا: "outputPath": "dist/my-app" .

يحدد هذا السطر من التكوين مكان ng build dumps نتائجها. النتائج هي تطبيق Angular بأكمله تم تجميعه في مجلد واحد dist/my-app . داخل هذا المجلد ، يوجد index.html . يمكن تشغيل التطبيق Angular بأكمله مع index.html . لا يلزم ng serve من هنا. مع هذا الملف ، يمكنك بسهولة ربط نهاية ظهرك.

اعطها الذهاب: ng build . مرة أخرى ، يجب تنفيذ ذلك داخل نظام الملفات الزاوي. استنادًا إلى القيمة الأساسية لـ “outputPath:” في angular.json . سيولد ملف حيث تم ترجمة التطبيق الأصلي بالكامل. إذا احتفظت بـ “outputPath:” ، فسيكون التطبيق المجمع في: [name-of-app] -> dist -> [name-of-app] .

تحديث نانوغرام

في التحديث الزاوي cli ng قم بتحديث تلقائي على كل الحزم الزاويّة و npm إلى أحدث الإصدارات.

هنا يمكن استخدام البنية والخيارات مع ng update .

ng update [package]

خيارات

• ركض جاف --dry-run (alias: -d)

  من خلال تشغيل دون إجراء أي تغييرات.

• فرض --force

  إذا كان خطأ ، فسيحدث خطأ إذا كانت الحزم المثبتة غير متوافقة مع التحديث.

• الكل --all

  سواء لتحديث جميع الحزم في package.json.

• التالى --next

  استخدم الإصدار الأكبر ، بما في ذلك إصدار beta و RCs.

• الهجرة فقط --migrate-only

  فقط إجراء الترحيل ، لا يتم تحديث الإصدار المثبت.

• من عند --from

  الإصدار الذي سيتم الانتقال منه. متاح فقط مع حزمة واحدة يتم تحديثها ، وفقط عند الترحيل فقط.

• إلى --to

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

• سجل --registry

  سجل NPM لاستخدام.

استنتاج

هذه الأوامر تلبي الأساسيات. إن CLI في Angular هي خدمة رائعة تساعد على تسريع عملية إنشاء التطبيقات وتكوينها وتوسيعها. إنه يفعل كل هذا مع الحفاظ على المرونة ، مما يسمح للمطور بإجراء التغييرات اللازمة.

يرجى مراجعة هذه الروابط على localhost:4200 إذا لم تكن قد قمت بذلك بالفعل. لا تنسَ تشغيل ng serve قبل فتحه. مع فهم أفضل لـ CLI ، أنت الآن على استعداد لمعرفة المزيد حول ما يتم إنشاؤه بواسطة الأوامر الأكثر أهمية.

مصادر

1. جوجل. "angular / angular-cli / wiki # additional-commands." GitHub.

2. جوجل. "angular / angular-cli / wiki / generate # available-schematics." GitHub.

مصادر

• Angular CLI Website

• الزاوي CLI README

• توثيق CLI للزاوية