كيفية إنشاء أول تطبيق Angular 6 الخاص بك في أقل من 5 دقائق

احصل على التدحرج الكروي باستخدام تطبيق ويب Angular 6 بسيط يعمل محليًا على جهازك في أقل من 5 دقائق.

المقدمة

ستكون هذه بداية لسلسلة من مشاركات المدونة التي تشرح كيفية تكوين مصادقة Azure B2C في تطبيق Angular 6.

إذا كنت لا تعرف ما لا تقلق Azure B2C. سأشرح كل ذلك لاحقًا في السلسلة. في الوقت الحالي ، إذا كنت تريد معرفة كيفية إنشاء تطبيق Angular 6 بسيط في أقل من 5 دقائق ، استمر في القراءة.

انتظر انتظر ... هل قمت بتثبيت NODE؟

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

وبالتالي…

هذا هو العقدة

هذه هي الطريقة التي تثبيت العقدة لنظام التشغيل mac

إذا لم يكن بإمكانك قراءة هذه المقالات ، فعندئذٍ على المدى القصير ، قم بتنفيذ الأوامر التالية (واحدة تلو الأخرى) لتثبيت Homebrew والعقدة على جهازك

آسف لجميع المستخدمين غير ماك. يفترض هذا القسم أنك على جهاز Mac. بديل Windows لـ Homebrew هو Chocolatey. يمكن الاطلاع على الوثائق هنا.

أول أمر (يؤدي هذا إلى تثبيت البيرة على جهازك):

/ usr / bin / ruby ​​-e "$ (curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

الأمر الثاني (يستخدم هذا homebrew لتثبيت العقدة على جهازك):

الشراب تثبيت العقدة

حسنا ... الآن نحن على استعداد للذهاب.

الخطوة 1: تثبيت CLI الزاوي

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

لتثبيت CLI باستخدام npm (مدير حزمة العقدة) ، افتح نافذة محطة / وحدة التحكم وأدخل الأمر التالي:

تثبيت npm -g @ angular / cli

سيطالبك هذا بمعلومات حول الميزات لتضمينها في مشروع التطبيق الأولي ، على سبيل المثال:

هل ترغب في إضافة التوجيه الزاوي؟ (Y / N): Y
ما تنسيق ورقة الأنماط التي تريد استخدامها ؟: CSS

اقبل الإعدادات الافتراضية بالضغط على المفتاح Enter أو Return.

الخطوة 2: إنشاء مساحة عمل وتطبيق أولي

قم بتغيير الدليل إلى مكان تريد أن يعيش فيه تطبيقك. ثم قم بتشغيل الأمر CLI ng الجديد في نفس الجهاز وقم بتقديم اسم للتطبيق الخاص بك ، على سبيل المثال ، التطبيق الأساسي - 2b -c-basic ، كما هو موضح هنا:

نانوغرام جديد B2C الأساسية التطبيق

ملاحظة: لقد أنشأ هذا الآن تطبيقًا باسم "b2c-basic-app" في أي دليل قمت بتشغيل الأمر عليه. يقوم Angular CLI بتثبيت حزم npm اللازمة للزاوية والتبعيات الأخرى. وهذا يمكن أن يستغرق بضع دقائق.

التطبيق الأولي الذي تم إنشاؤه هو مشروع بسيط للغاية يحتوي على "تطبيق ترحيب" جاهز للتشغيل.

الخطوة 3: خدمة التطبيق الخاص بك محليا

يتضمن Angular خادمًا ، بحيث يمكنك بسهولة إنشاء تطبيقك وخدمته. من أجل تشغيل التطبيق الخاص بك وتشغيله ، اتبع الخطوات التالية:

  1. قم بتغيير الدليل إلى مجلد مساحة العمل (التطبيق b2c-basic-app).
  2. قم بتشغيل الخادم عن طريق تشغيل الأمر CLI ng - - فتح

3. يقوم الأمر ng serve بتشغيل الخادم ومشاهدة ملفاتك وإعادة إنشاء التطبيق أثناء إجراء تغييرات على هذه الملفات.

4. يفتح الخيار --open (أو فقط - o) متصفحك تلقائيًا على http: // localhost: 4200 /.

يجب أن تكون قادرًا الآن على رؤية تطبيق Angular 6 جميل jubbly يعمل محليًا على جهازك. سهل peasy الليمون squeezy.

الخطوة 4 الاختيارية: إضافة زر تسجيل الدخول والتسجيل إلى التطبيق الخاص بك

سأضيف زرين إلى التطبيق. واحد للسماح للمستخدمين بتسجيل الدخول وآخر للسماح للمستخدمين بالتسجيل.

  1. افتح ملف app.component.html والذي يمكن العثور عليه ضمن / app
  1. الصق التعليمة البرمجية التالية في ملف app.component.ts

2. أنت الآن بحاجة إلى ربط طرق تسجيل الدخول والتسجيل في ملف .html بملف .ts. افتح ملف app.component.ts واستبدل بالشفرة التالية:

لاحظ كيف أضفت طريقتين لتسجيل الدخول () والاشتراك (). كلتا الطريقتين تشغل رسالة تنبيه بسيطة للمستخدم.

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

يجب أن يبدو تطبيقك مثل هذا الوحش المثير:

صفحة التطبيق الرئيسية

ها أنت ذا. تطبيق Angular 6 بسيط للغاية جاهز للبناء عليه. آمل أن تكون قد عملت كل شيء.

إذا أعجبك هذا المقال ، فيرجى إلقاء نظرة على التصفيق ، مما يجعل يومي أفضل قليلاً.

المادة التالية؟ انقر هنا لإعداد خدمة Azure B2C

رمز GITHUB: https://github.com/sambowenhughes/5-minute-angular-app