دليل سريع لمساعدتك على فهم وإنشاء تطبيقات Angular 6

هذا المنشور مقسم إلى جزئين:

يوضح الجزء الأول كيفية إنشاء تطبيق Angular 6 بسيط باستخدام Angular CLI ويشرح هيكل المشروع.

يوضح الجزء الثاني الكود الحالي الذي نشرته في GitHub. يوضح هذا الرمز استخدام المكونات والخدمات وعميل HTTP والاتصال بين المكونات.

الجزء الأول

قم بتثبيت Node.js إذا لم يكن موجودًا بالفعل

أنت بحاجة إلى Node.js ، حيث يتم تنزيل المكتبات المطلوبة لـ Angular باستخدام مدير حزمة العقدة (npm). راجع //nodejs.org/en/ لتثبيت Node.js.

قم بتثبيت Angular CLI

Angular CLI هي واجهة سطر أوامر لـ Angular ، وهي مفيدة جدًا في إنشاء قالب مشروع Angular 6 بسرعة. قم بتثبيت حزمة Angular CLI npm بشكل عام باستخدام الأمر التالي:

npm install -g @angular/cli

أنشئ المشروع

يساعد Angular CLI في إنشاء مشروع بسهولة بالغة. لإنشاء المشروع ، استخدم الأمر التالي.

ng new simple-angular6-app

simple-angular6-app هو اسم المشروع. ستلاحظ الآن أنك ترى مجلدًا باسم تطبيق simple-angular6. المجلد هو المشروع الذي تم إنشاؤه. لاختبار ما إذا كان كل شيء قد تم ضبطه بشكل صحيح ، انتقل إلى مجلد المشروع وقم بتشغيل التطبيق باستخدام الأوامر التالية:

cd simple-angular6-app npm start

انتقل إلى المستعرض الخاص بك وانتقل إلى عنوان URL التالي: localhost: 4200. يجب أن تكون قادرًا على رؤية أن تطبيقك قيد التشغيل.

سيبدو التطبيق كما يلي:

شرح هيكل المجلد الأساسي

عند إنشاء المشروع ، ستلاحظ أنه ينشئ مجموعة من الملفات. سأقوم هنا بإدراج بعض الملفات والمجلدات المهمة التي يجب أن تكون على دراية بها:

  1. package.json: يحتوي هذا الملف على قائمة تبعيات العقدة المطلوبة.
  2. src / styles.css : يحتوي هذا الملف على CSS العام المتاح في جميع أنحاء التطبيق.
  3. src / main.ts : هذا هو الملف الرئيسي الذي يبدأ التطبيق Angular (يتم تمهيد AppModule هنا كما هو موضح في الكود). هنا يشير الامتداد .ts إلى TypeScript.
  4. src / index.html : هذا هو الملف الأول الذي يتم تنفيذه جنبًا إلى جنب مع main.ts عند تحميل الصفحة.
  5. src / app / app.module.ts : هذا هو الملف الذي يتم فيه تحديد جميع المكونات والموفرين والوحدات النمطية. بدون تعريفها هنا ، لا يمكن استخدامها في أي مكان آخر في الكود.
  6. src / app / app.component.html: هذا هو المكون الرئيسي للتطبيق الزاوي ، وعادة ما تكون جميع المكونات الأخرى موجودة داخل هذا المكون. src / app / app.component.ts هو منطق هذا المكون ، و src / app / app.component.css هو CSS لهذا المكون. لا يقوم هذا المكون بحد ذاته بأي منطق مهم ، ولكنه يعمل كحاوية للمكونات الأخرى.
  7. dist : هذا المجلد حيث توجد الملفات المبنية. يتم تحويل TypeScript أساسًا إلى JavaScript ويتم تخزين الملفات الناتجة هنا بعد التجميع والتصغير. (يظهر هذا المجلد فقط إذا كان التطبيق مبنيًا. لن تؤدي عملية "npm start" البسيطة إلى إنشاء هذا المجلد.) نظرًا لأن متصفحات الويب لا تفهم سوى JavaScript (على الأقل في الوقت الحالي) ، فمن الضروري تحويل TypeScript إلى JavaScript قبل نشر الكود . لمشاهدة هذا المجلد ، يمكنك كتابة ما يلي في موجه الأوامر:
npm run build

هناك العديد من الملفات الأخرى أيضًا ، ولكن معرفة هذه الملفات الأساسية أمر جيد كبداية

تيبسكريبت

يستخدم Angular 6 TypeScript لتنفيذ المنطق. أولئك الذين عملوا في Java سيجدون TypeScript سهلًا للغاية. TypeScript هي لغة مبنية فوق JavaScript ولكنها من النوع الآمن ، ويقوم TypeScript بدوره بالتجميع إلى JavaScript

إنشاء المكونات والخدمات

  1. المكون : يقوم المكون في Angular بوظيفة محددة. تم إنشاء تطبيق Angular باستخدام مكونات مختلفة. يمكن استخدام Angular CLI لإنشاء المكونات بسهولة. بناء الجملة هو إنشاء مكون [اسم]. استخدم الأمر التالي لإنشاء مكون يسمى "العملاء".
ng generate component customers

2. يقوم الأمر أعلاه بإنشاء مجلد يسمى العملاء داخل src / app . المكون الذي تم إنشاؤه لديه:

  • و customers.component.html ملف للبت في قالب (كيف ينبغي أن ننظر UI مكون)
  • و customers.component.ts الملف الذي هو فيه منطق موجود
  • و customers.component.css الملف الذي يحتوي على محتوى CSS
  • و customers.component.spec.ts الملف الذي يستخدم لاختبار وحدة (متعود المواصفات تفسيره في هذا المنصب).

3. الخدمة : تقدم الخدمة بشكل أساسي وظائف يمكن لأي مكون استخدامها. يمكن مشاركة الخدمة عبر جميع المكونات ، أو يمكن قصرها على مكون معين (يمكن وضع أي منطق قابل لإعادة الاستخدام في خدمة). يمكن استخدام Angular CLI لإنشاء الخدمات أيضًا. بناء الجملة هو ng إنشاء الخدمة [الاسم]. استخدم الأمر التالي لإنشاء خدمة تسمى "البيانات":

ng generate service data

4. يتم إنشاء الخدمة داخل src / app. تحتوي الخدمة التي تم إنشاؤها على ملف data.service.ts الذي يحتوي على المنطق وملف data.service.spec.ts لاختبار الوحدة.

مبروك ؟

لقد نجحت في إنشاء أول تطبيق Angular 6 وتعلمت أيضًا كيفية إنشاء المكونات والخدمات. لقد تعلمت الآن أيضًا بنية المجلد الأساسية لمشروع Angular 6. سيشرح الجزء التالي رمز GitHub الحالي لتوضيح كيفية استخدام المكونات والخدمات وعميل HTTP والاتصال بين المكونات.

الجزء 2

الشفرة

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

عنوان URL للتطبيق

لمعرفة كيف يبدو التطبيق النهائي ، يمكنك النقر فوق عنوان URL هذا. سيعطيك هذا فكرة جيدة عما يحاول التطبيق القيام به.

سيبدو التطبيق هكذا على شاشة الهاتف المحمول:

ماذا يفعل هذا التطبيق؟

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

شرح هيكل التطبيق

المكونات التي تم إنشاؤها هي:

  1. customersComponent : هذا يتوافق مع مجلد src / app / customers . هذا المكون هو لعرض قائمة العملاء. إن customers.component.tsيحتوي الملف على وظيفة تسمى ngOnInit () . يتم استدعاء هذه الوظيفة كلما تم تحميل المكون. لذلك يمكن استخدام هذه الوظيفة لتحميل بيانات المكون. يتم تحميل هذه البيانات عن طريق استدعاء دالة getCustomerList () . يقوم getCustomerList () بدوره باستدعاء خدمة البيانات للحصول على البيانات المطلوبة.
  2. CustomerdetailsComponent : يتوافق هذا مع مجلد src / app / customerdetails . يعرض هذا المكون التفاصيل لعميل واحد محدد. يحتوي ملف customerdetails.component.ts على الوظيفة ngOnInit () التي يمكن استخدامها لتحميل البيانات. لتحميل البيانات ، يتم استدعاء وظيفة getCustomerDetails () . تقوم هذه الوظيفة بإجراء مكالمة إلى خدمة البيانات للحصول على البيانات المطلوبة. ولكن هنا ستلاحظ أيضًا استخدام routeParams.id الذي يتم إرساله إلى الخدمة. يتم استخدام routeParams للحصول على المعلمات من عنوان URL للتطبيق والمعرفيتم استخدام المعلمة لمعرفة العميل الذي يجب تحميل التفاصيل له. سيصبح هذا أكثر وضوحًا عندما أصل إلى جزء التوجيه.
  3. DisplayComponent : هذا يتوافق مع مجلد src / app / display . يعرض هذا المكون اسم العميل الذي تم النقر فوقه في CustomersComponent. (بيت القصيد من هذا المكون هو توضيح اتصال مكون من أصل إلى فرعي.) هذا مكون فرعي من customersComponent . في customers.component.htmlستلاحظ ذلك .هذا يجعل من DisplayComponent مكونًا فرعيًا لـ customersComponent . يتم تمرير البيانات من CustomerComponent إلى DisplayComponent باستخدام السمة [customer] .

بيانات العينة

توجد بيانات العينة في المجلد src / الأصول / samplejson .

الخدمات التي تم إنشاؤها هي:

  1. DataService : يتوافق هذا مع src / app / data.service.ts . يتم تخزين كل JSON المستخدم في التطبيق في المجلد src / الأصول / samplejson . تساعد DataService في الحصول على JSON من المجلد src / الأصول / samplejson باستخدام طلب HTTP. في التطبيقات الحقيقية ، تساعد الخدمة في الحصول على البيانات من Rest API أو أي واجهة برمجة تطبيقات أخرى عن طريق إجراء طلب HTTP. يتم استخدام هذه الخدمة من قبل كل من مكون العملاءو CustomerdetailsComponent.

فئات النماذج المستخدمة هي:

  1. العميل : هذا يتوافق مع src / app / customer.ts . هذه هي فئة النموذج المستخدمة في CustomerComponent لتحديد هيكل كل عميل في القائمة.
  2. تفاصيل العميل : هذا يتوافق مع src / app / customerdetails.ts . هذه هي فئة النموذج المستخدمة في CustomerdetailsComponent لتحديد البنية التي تحتوي على جميع تفاصيل العميل.

وحدة التوجيه

يتم تعريف وحدة التوجيه في src / app / app-routing.module.ts . ثم يتم تطبيق هذه الوحدة على التطبيق عن طريق إضافة app.component.html.

هناك طريقتان موجودتان في التطبيق:

  1. / customers : يعرض عنوان URL هذا قائمة العملاء ويشير إلى customersComponent.
  2. / customerdetails /: id : يعرض عنوان URL هذا التفاصيل الخاصة بكل عميل ويشير إلى CustomerdetailsComponent . و معرف التي هي موجودة في هذا URL هو routeParam. هذا المعرفبدوره يتم استخدامه بواسطة CustomerdetailsComponent لمعرفة تفاصيل العميل التي سيتم عرضها. على سبيل المثال / تفاصيل العميل / 1 سيعرض تفاصيل العميل الأول ، / customerdetails / 3 سيعرض تفاصيل العميل الثالث ، وهكذا.

مبروك مرة أخرى ؟

الآن أنت تعرف كيفية استخدام المكونات والخدمات. كما أنك تعرف كيفية إجراء مكالمات HTTP وكيفية استخدام التوجيه وكيفية تمرير routeParams.

تمت تغطية المفاهيم الأساسية في هذا المنشور ، ونأمل أن تكون مفيدة.

المراجع:

  1. لمعرفة المزيد عن Angular ، يمكنك مراجعة الوثائق //angular.io/guide/quickstart. التوثيق مفيد جدًا لفهم المزيد من مفاهيم الزاوية

عن المؤلف

أنا أحب التكنولوجيا وأتابع التطورات التكنولوجية. أحب أيضًا مساعدة الآخرين بأي معرفة لدي في مجال التكنولوجيا.

لا تتردد في الاتصال بي على حساب LinkdIn الخاص بي //www.linkedin.com/in/aditya1811/

يمكنك أيضًا متابعتي على twitter //twitter.com/adityasridhar18

موقع الويب الخاص بي: //adityasridhar.com/

المشاركات الأخرى ذات الصلة من قبلي

دليل سريع لمساعدتك على فهم وإنشاء تطبيقات ReactJS

مقدمة سريعة إلى Vue.js