وأوضح الزاوي واجهة سطر الأوامر

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

التركيب

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

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

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

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

  • نانوغرام جديد
  • يخدم ng
  • نانوغرام توليد
  • بناء نانوغرام
  • تحديث ng

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

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

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

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

يخدم ng

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

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

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

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

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

من أجل هذه المقالة ، افهم أن تقوم moduleبتصدير واستيراد الأصول من وإلى شجرة المكونات الأساسية. componentيهتم A بقسم واحد من واجهة المستخدم. يبقى منطق تلك الوحدة وأسلوبها وتخطيطها واختبارها مغلفًا داخل .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 المعياري. ng generateأيضا أسلاك الأشياء. ترتبط المخططات التي تم إنشاؤها في سياق نظام الملفات الزاوي بالوحدة النمطية الجذرية للنظام. في هذه الحالة ، سيكون هذا app.module.tsالملف بالداخل [name-of-app -> src -> app].

بناء نانوغرام

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

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

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

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

تحديث ng

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

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

ng update [package]

خيارات

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

    قم بالمرور دون إجراء أي تغييرات.

  • فرض --force

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

  • الكل --all

    ما إذا كان سيتم تحديث جميع الحزم في package.json أم لا.

  • التالى --next

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

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

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

  • من عند --from

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

  • إلى --to

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

  • التسجيل --registry

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

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

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

معلومات اكثر:

  • أفضل الأمثلة الزاويّة
  • أفضل دروس Angular و AngularJS
  • كيفية التحقق من صحة النماذج التفاعلية الزاوي