حسناً، حسناً، أسمعك تقولين
دعونا نمضي في ذلك،
أرني بعض التعليمات البرمجية.
في الواقع، سنبدأ في إنشاء
تطبيق Angular الخاص بنا في هذا التمرين الأول.
سوف نستخدم واجهة سطر الأوامر الزاوي،
و كلي الزاوي للسقالات خارج التطبيق الزاوي لدينا في هذا التمرين.
ثم، ونحن نذهب من خلال بقية التدريبات في هذه الدورة،
ونحن سوف بناء لدينا تطبيق الزاوي خطوة بخطوة.
و كلي الزاوي هو وسيلة مريحة للغاية لإنشاء تطبيق الزاوي.
يتبع تطبيق Angular الذي تم إنشاؤه بواسطة CLI Angular
أدلة الأنماط التي اقترحها مطورو إطار العمل Angular.
يمكننا استخدام كلي الزاوي لسقالة
العديد من أجزاء التطبيق الزاوي لدينا بما في ذلك المكونات،
وخدمات التطبيق الزاوي لدينا.
كما يأتي Angular CLI مع خادم مدمج خاص به،
والذي يمكننا استخدامه لخدمة تطبيق Angular أثناء بنائه،
ثم عرض تطبيقنا Angular في
المتصفح كمعاينة مباشرة لتطبيقنا.
كما هو الحال عندما نجري
تغييرات، سوف تنعكس التغييرات على الفور إلى المتصفح.
هذا هو السبب في أنني اخترت استخدام CLI Angular
كنهج لبناء تطبيق Angular الخاص بنا في هذه الدورة.
للبدء، انتقل إلى موقع مناسب على
جهاز الكمبيوتر الخاص بك وإنشاء مجلد باسم Angular.
لذلك، أنا ذاهب لبدء الانتقال إلى بلدي الوثائق مجلد كورسيرا.
هذا هو المكان الذي أقوم بتخزين جميع ملفاتي لدورة Coursera الخاصة بي،
وبعد ذلك سأقوم بإنشاء مجلد
باسم Angular ثم الانتقال إلى المجلد Angular.
الآن، سنقوم بإنشاء تطبيق Angular الخاص بنا داخل هذا المجلد.
الخطوة الأولى التي نقوم بها في هذا التمرين هي تثبيت CLI Angular.
لذلك، في موجه،
اكتب npm install -g @angular /cli @ 6.2.1.
الآن، كلما قمت بتثبيت وحدة NPM،
سأحدد أيضًا الإصدار الدقيق لوحدة NPM التي أقوم بتثبيتها.
وأود أن أحثكم بشدة
على تثبيت نفس الإصدار بالضبط من وحدة الآلية الوقائية الوطنية بحيث يمكنك الذهاب من خلال
بقية التدريبات دون وجود أي مشكلة مع التدريبات.
لذلك، في هذه الحالة، أقوم بتثبيت الإصدار 6.2.1 من CLI الزاوي.
الآن، إذا كنت تقوم بذلك على جهاز Mac أو Linux،
فلا تنس sudo أمام تثبيت npm.
سيستغرق التثبيت بعض الوقت.
لذلك، بمجرد الانتهاء من تثبيت،
ثم الزاوي كلي سوف تكون متاحة على سطر الأوامر الخاص بك.
بمجرد اكتمال التثبيت،
يمكنك التحقق من تثبيت CLI الزاوي ونرى ذلك.
بمجرد تثبيت ذلك،
قد تحتاج إلى إعادة تشغيل الجهاز الطرفي الخاص بك
لكي تكون أدوات Angular CLI متاحة في المطالبة.
يتوفر CLI Angular عن طريق كتابة ng
في الموجه متبوعًا بمجموعة من الإرشادات الإضافية.
لذا، فإن الأمر الأول الذي سنجربه هو مساعدة ng،
وسيدرج هذا مجموعة من جميع الأوامر الأخرى
التي يسمح لنا Angular CLI بتنفيذها.
Ng كما ترى سيكون البادئة
لجميع أوامر CLI Angular التي ستستخدمها في هذه الدورة.
سيدرج هذا مجموعة من جميع الخيارات التي يوفرها لنا Angular CLI.
سوف نتعلم الكثير من هذه الأوامر ونحن نذهب من خلال بقية هذه الدورة.
لإنشاء تطبيق Angular جديد،
سأقوم بإنشاء هذا التطبيق في
المجلد Angular في مجلد فرعي باسم الارتباك.
إذا كنت قد أخذت الدورة السابقة على Bootstrap أربعة،
فستفهم لماذا أسمي هذا التطبيق على أنه الارتباك.
لذلك، في موجه،
اكتب ng الارتباك الجديد،
وبعد ذلك سأستخدم sass
كإطار تصميم CSS لتطبيق Angular الخاص بي.
لذا، أقوم بتحديد نمط ناقص ناقص يساوي SCSS،
واضغط على Return وسيستغرق الأمر بعض الوقت
حتى يتم إنشاء التطبيق Angular في المجلد الحالي.
بمجرد تثبيت التطبيق الخاص بك،
دعنا نستخدم الخادم المدمج من
Angular CLI لتجميع تطبيقنا Angular والبدء في خدمته.
انتقل إلى مجلد الارتباك،
وعند المطالبة، اكتب ng service،
وانتظر حتى
يبدأ خادم Angular Live Development ويبني تطبيقنا Angular والبدء في خدمة التطبيق.
بمجرد الانتهاء من
ذلك، ستلاحظ أن هذا التطبيق سيكون متاحًا عن طريق كتابة
http://localhost:4200 في شريط العناوين في متصفحنا.
يمكنك ترك خادم التطوير قيد التشغيل بشكل مستمر.
عند إجراء تغييرات على تطبيق Angular الخاص بك،
سيقوم الخادم تلقائيًا بإعادة ترجمة التغييرات ثم
يبدأ في تقديم تطبيق Angular المحدث داخل متصفحك.
لذا، ستكون هذه طريقة جيدة جدًا لمشاهدة التغييرات التي تجريها
داخل تطبيق Angular الخاص بك والتي تنعكس على الفور
في المتصفح حيث تقوم بعرض تطبيق Angular الخاص بك.
إذا ذهبت إلى المتصفح والوصول إلى تطبيق Angular في localhost: 4200،
ترى أن التطبيق يبدأ في العمل،
وسوف تخدم هذه المجموعة من الكلمات في متصفحنا.
لذلك، هذا هو تطبيق بسيط جدا أن العظام العارية تطبيق الزاوي
لتحصل على البدء مع تطوير التطبيق الزاوي الخاص بك.
سنقوم ببناء على رأس هذا التطبيق السقالات بواسطة Angular CLI،
من خلال تنفيذ ميزات مختلفة كجزء من هذه الدورة.
إذا كنت تخطط لاستخدام Git لتطبيق Angular الخاص بك لتعيين الإصدار،
ففي هذه المرحلة،
قد تكون فكرة جيدة لتهيئة مستودع Git الخاص بك.
يقوم Angular CLI تلقائيًا بتهيئة مستودع Git الخاص بك،
وبالتالي الالتزام الأول بالرسالة الأولية بمستودع Git.
دعونا نتحقق من حالة مستودع Git الخاص بنا.
يتيح التحقق من خلال كتابة git log
سطر واحد وسترى أن
الإعداد الأولي قد تم الالتزام به لمستودع Git الخاص بنا.
الآن، يمكننا البدء في العمل على تطبيق Angular الخاص بنا الذي
قمنا بسقالات في هذا المجلد هنا.
إذا اخترت مزامنة مستودع Git الخاص بك مع مستودع عبر الإنترنت
، فيرجى التأكد من أن المستودع الخاص بك عبر الإنترنت هو مستودع خاص.
يسمح لك Bitbucket بإنشاء مستودعات خاصة مجانية.
لذا، قم بإعداد مستودع Git الخاص بك على Bitbucket.
مع هذا، نكمل ممارستنا.
في هذا التمرين الأول،
قمنا بتثبيت CLI الزاوي.
بعد ذلك، قمنا بسقالات تطبيقنا الزاوي الذي
سنعمل على تطويره بشكل أكبر كجزء من بقية التمارين في هذه الدورة.