כיצד לשכפל ולהפעיל אפליקציה זוויתית במחשב שלך

קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף.

Angular היא מסגרת JavaScript חזקה לבניית יישומים של עמוד בודד. גוגל פיתחה את התוכנה ומתחזקת אותה לצד תורמים ברחבי העולם.

כמו React, אתה יכול להשתמש ב-Angular כדי ליצור מגוון אפליקציות חזיתיות, כולל מערכות אינטרנט, נייד ושולחן עבודה. תעשיות מסוימות מעדיפות את Angular מכיוון שהיא מקיפה ויציבה.

בואו ללמוד עוד על Angular על ידי שיבוט פרויקט מ-GitHub והפעלתו באופן מקומי.

תנאים מוקדמים לשיבוט

בניגוד למסגרות אחרות, שיבוט והפעלת יישום Angular הם פשוטים. אתה תשבט פרויקט GitHub. לפני שתתחיל, ודא שאתה עומד בדרישות הבאות:

• אמורה להיות לך גרסה יציבה של Node.js מותקנת. אם לא, למד כיצד להתקין את Nodejs באובונטו אוֹ התקן את Nodejs ב-Windows.
• אתה צריך יש להתקין את Git.
• צריך שיהיה לך חשבון GitHub.

1. התקן את מנהל חבילות הצומת

מנהל חבילות צומת (npm) הוא מאגר תוכנה עבור חבילות JavaScript. ל-npm יש CLI (ממשק שורת פקודה) המבצע משימות שונות. אתה יכול להשתמש ב-CLI כדי להוריד, להתקין ולפרוס תוכנה.

כאשר אתה מתקין את Node.js, הוא מגיע עם חבילת npm. כדי לבדוק את גרסאות החבילות של Node.js ו-npm, הפעל את הפעולות הבאות בטרמינל:

כדי לבדוק את הגרסה של Node.js המותקנת, הדפס את הגרסה עם הפקודה הבאה:

צוֹמֶת --גִרְסָה

אתה יכול לבדוק את הגרסה של npm באמצעות אותה אפשרות:

npm --גִרְסָה 

2. התקן את Angular CLI

אתה יכול להשתמש ב-Angular CLI כדי לבצע משימות פיתוח שונות. המשימות כוללות יצירת יישומים, בדיקות ופריסה. כדי להתקין את Angular CLI, הפעל את הפקודה הבאה:

$ npm התקנת -g @זוויתי/cli

כדי לבדוק את גרסת Angular CLI, הפעל את הפקודה:

גרסת $ ng

3. מצא פרויקט ב-GitHub

אתה תשבט את גיפי-רפליקה פרויקט מ-GitHub:

נווט אל הכפתור הירוק המסומן קוד. לחץ עליו כדי לחשוף רשימה נפתחת. העתק את הקישור HTTP או SSH. כל אחד משני אלה יצליח.

4. שכפל את הפרויקט באופן מקומי

ראשית, צור תיקיה ושמה לה Angular-Clone. זכור ללכת לתיקיה עם הפקודה הבאה:

CD Angular-שיבוט

לאחר מכן, הפעל את שיבוט git הפקודה כדי להעתיק את הפרויקט לתיקיה שלך.

git שיבוט https://github.com/Reuben-Kipkemboi/Giphy-Replica.git

לאחר מכן, בדוק את התיקיה Angular-Clone כדי לראות אם השיבוט Giphy-Replica נמצא בפנים. לָרוּץ ls כדי להציג את תוכן התיקיה:

ls

נווט לתיקיה:

CD גיפי-רפליקה

בשלב זה, אתה יכול לבדוק את קבצי הפרויקט בעורך קוד לבחירתך או להציג אותם דרך ממשק האינטרנט של GitHub.

5. התקן חבילות npm

עליך להתקין את כל החבילות והתלות מהפרויקט המשובט כדי להפעיל אותו. כדי להתקין את החבילות, הפעל:

npm להתקין

אם אתה נתקל בדוחות פגיעות, תקן אותם באמצעות:

תיקון ביקורת npm

6. פתח את הפרויקט בדפדפן

עכשיו יש לך את כל הדרישות כדי להפעיל את הפרויקט, אתה יכול להפעיל אותו ולפתוח אותו בדפדפן. התחל בבניית הפרויקט ובשירות:

לשרת

ואז פתח http://localhost: 4200/ בדפדפן כדי להציג את הפרויקט.

אתה יכול להשתמש ב-Angular CLI לפתוח את הפרויקט באופן אוטומטי בדפדפן:

$ ng serve -o

פקודה זו בונה את האפליקציה, מפעילה את השרת וצופה בקבצים לאיתור עדכונים.

בדפדפן שלך, אתה אמור לראות את אתר Giphy-Replica:

למה לשכפל פרויקט זוויתי?

במקום להתחיל פרויקט מאפס, אתה יכול לשכפל אחד מ- GitHub. שיבוט פרויקט בקוד פתוח ושינוי שלו לשימושך חוסך זמן בהתחלת פרויקט מאפס. אתה יכול גם לתרום כל שינוי שימושי בחזרה לפרויקט במעלה הזרם אם זה רלוונטי.

Angular, שנבחרה כמסגרת הקדמית הפופולרית הרביעית הכי פופולרית בשנת 2021, ממשיכה להדהים עם כל מהדורה. זה מגיע עם חבילות נהדרות התומכות בפיתוח של יישומים בני עמוד בודד. השתמש במסגרת המצוינת הזו כדי לבנות יישומים ברמה עולמית.