الإعداد الزاوي الأساسي وهيكل المكونات (كيفية إنشاء تطبيق التجارة الإلكترونية باستخدام Angular و Firebase Cloud Firestore) - الجزء 1

Angular هي عبارة عن نظام أساسي للويب مفتوح المصدر يستند إلى TypeScript ويرأسه فريق Angular في Google.

الزاوي JS والزاوي مختلفة تماما. إذا لم يكن لديك أي فكرة عن Angular JS (أو Angular 1.x) فلا تقلق لأنني أيضًا لم أعمل معها. الزاوي 2 والإصدارات السابقة أبسط إلى حد ما من الزاوي 1.x ، نحن على ما يرام.

ما تحتاج ربما:

  • نود.جي إس

تحقق من تثبيت Node.js.

  • الآلية الوقائية الوطنية

تحقق مما إذا كان NPM (مدير حزمة العقدة) مثبتًا أم لا

تحقق من Node.js و NPM الإصدار:

العقدة -v
npm -v
  • تثبيت الزاوي CLI (واجهة سطر الأوامر):
npm i -g @ angular / cli

تأكد من حصولك على أحدث إصدار. تعرف على المزيد حول Angular CLI هنا.

  • أساسيات جافا سكريبت.
  • أساسيات Bootstrap.

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

ولكن لا تقلق ، يشبه TypeScript جافا سكريبت إلى حد كبير. إذا كنت معتادًا على JavaScript ، فأنت ذهبي.

الآن بعد أن أصبحت بيئتنا جاهزة ، فلنتقدم.

هيا بنا نبدأ

يتم استخدام CLI الزاوي لإنشاء المكونات والخدمات والأنابيب والطرق والتوجيهات.

لإنشاء نوع تطبيق الزاوي جديد أدناه الأمر:

نانوغرام جديد ngCart - rring

هنا ngCart هو اسم تطبيقاتنا ، سيقوم فوق الأمر بإنشاء مجلد باسم ngCart وإجراء جميع الملفات اللازمة لنا.

- يتم استخدام علامة التوجيه لإنشاء ملف app-routing.module.ts والذي سيحتوي على جميع المعلومات حول المسارات.

".ts" هو امتداد يستخدم لملفات TypeScript.

هذا هو هيكل الملف الذي نحصل عليه بعد تشغيل الأمر

لا تخيف ، أعرف أن هناك الكثير من الملفات. لكننا في الغالب سوف نعمل في src / app / directory.

سيحتوي app.component.css على كل CSS لمكون التطبيق.

سيتضمن app.component.html جميع HTML لمكون التطبيق.

سيحتوي app.component.ts على كل المنطق المتعلق بمكون التطبيق.

سوف app.module.ts رعاية جميع الحزم المستخدمة في التطبيق لدينا.

لتحقيق مظهر رائع ، سنستخدم Bootstrap 4.

قم بتضمين Bootstrap CDN لـ CSS في ملف index.html قبل